[TOC] #### 1. 前言 --- 如果在项目中安装了 uView 2.x，那么强烈推荐你使用 uView 自带的网络请求方法，封装整个项目的网络请求逻辑 uView 自带的网络请求集成的是优秀的开源请求库：[luch-request](https://www.quanzhan.co/luch-request) ，uView 对其进行了简单封装 本文只是提供一个示例，配置文件、请求封装 更应该根据项目具体场景采用更合适的封装写法 #### 2. 封装 --- ##### 配置文件 在项目根目录下创建配置文件 `config/http.js`，通过查看以下代码可发现： 生产环境变量中应该定义所有需要的配置参数，而开发环境变量中仅需要定义开发环境需要配置的参数 ```javascript // 开发环境（运行） const develop = { url: 'http://192.168.1.57:8000', } // 生产环境（发行） const release = { url: 'http://api.baidu.com', version: '1.0.0', } // 默认使用生产环境配置 let config = release // 开发环境: 合并对象，开发环境配置覆盖生产环境 if (process.env.NODE_ENV === 'development') { config = { ...release, ...develop } } // 最终使用的配置 export default config ``` ##### 请求封装 创建 `utils/request.js` 文件，导入配置文件中的接口域名配置（实际开发中会有更多配置） ```javascript import http from '@/config/http'; module.exports = vm => { // 初始化配置 uni.$u.http.setConfig(config => { config.baseURL = http.url; return config }) // 请求拦截 uni.$u.http.interceptors.request.use(config => { // 根据 custom 参数配置，判断是否需要添加对应的请求头 if (config?.custom?.auth !== false) { // config.header.Token = vm.$store.state.token // config.header.Authorization = vm.$store.state.token } return config }, config => Promise.reject(config)) // 响应拦截 uni.$u.http.interceptors.response.use(response => { const res = response.data // 自动提示错误信息 if (res.code !== 200 && res.message) { uni.$u.toast(res.message) } return res }, response => { // 对响应错误做点什么（statusCode !== 200） // if (response.statusCode == 401) { } // if (response.statusCode == 404) { } return Promise.reject(response) }) } ``` ##### 引用封装 在 `main.js` 中引用 `utils/request.js`，要注意引用的位置，需要在 `new Vue` 之后，挂载实例之前 ```javascript // new Vue 得到 Vue 实例 const app = new Vue({ ...App }) // 引入请求封装，将 app 参数传递到配置中 require('./utils/request')(app) // 挂载实例 app.$mount() ``` ##### 接口管理 为了方便集中管理接口，将所有接口定义在 `api` 目录下，按照功能划分文件，比如：`api/user.js` ```javascript const http = uni.$u.http // 获取用户信息 export function getInfoApi(params) { return http.get('/user/info', { params }) } // 更新用户信息 export function updateUserApi(data) { return http.post('/user/update', data) } // 用户登录 export function userLoginApi(data) { return http.post('/user/login', data, { custom: { auth: false } }) } ```