UniApp Vue 3 中的网络请求封装详解及用法

// 导入uni.request，并在其基础上进行封装
import { request } from '@/utils/request';
 
// 定义API接口
export const api = {
  // 获取用户信息
  getUserInfo: () => request('/user/getUserInfo'),
  // 登录
  login: (data) => request('/user/login', 'POST', data),
  // 获取商品列表
  getGoodsList: (params) => request('/goods/list', 'GET', null, params),
};
 
// 使用封装后的API
// 获取用户信息
api.getUserInfo().then(response => {
  console.log('用户信息:', response.data);
}).catch(error => {
  console.error('获取用户信息失败:', error);
});
 
// 登录操作
api.login({ username: 'user1', password: '123456' }).then(response => {
  console.log('登录成功:', response.data);
}).catch(error => {
  console.error('登录失败:', error);
});
 
// 获取商品列表
api.getGoodsList({ page: 1, pageSize: 10 }).then(response => {
  console.log('商品列表:', response.data);
}).catch(error => {
  console.error('获取商品列表失败:', error);
});

这段代码展示了如何封装和使用网络请求，其中request函数封装了对uni.request的调用，并提供了统一的API接口来发送请求。这样的封装可以简化代码，提高复用性，并且确保整个项目的网络请求行为一致。