uniapp @escook/request-miniprogram 设置 axios

1. 配景

由于平台的限定，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。
因此，可以在 uni-app 项目中利用 @escook/request-miniprogram 第三方包发起网络数据请求（也可以利用其它包，步调都差不多，如：uniapp-axios-adapter）
官网地点
2. 利用步调

1. 安装 @escook/request-miniprogram

   条件是已经安装了 npm
安装好后可以在 【package-lock.json】中检察包信息
没有 【package-lock.json】文件可以利用 npm init -y 初始化 【package.json】文件

1. npm install @escook/request-miniprogram

复制代码

3. 利用 @escook/request-miniprogram

1. 在【main.js】中设置 axios

1. // 引入$http请求对象
2. import { $http } from '@escook/request-miniprogram'
4. // 将 $http 挂载到 uni 上，方便全局调用，在uni-app中，uni是全局对象（例如微信开发者工具的 wx 对象）
5. uni.$http = $http
7. // 配置基地址
8. $http.baseUrl = "https://www.baidu.com"
9. // 请求拦截器
10. $http.beforeRequest = function(config) {
11.         // 提示加载中
12.         uni.showLoading({
13.                 title: "数据加载中..."
14.         })
15.         // 请求头添加 token
16.         const token = uni.getStorageSync('token');
17.         if (token) {
18.                 options.header = {
19.                         token
20.                 }
21.         }
22. }
23. // 响应拦截器
24. $http.afterRequest = function() {
25.         // 关闭提示
26.         uni.hideLoading()
27. }

复制代码

2. 发送请求

   以 get 请求举例

1. // 默认多包了一层data，解构出来
2. const { data: res } = await uni.$http.get('/school/getSchool')
3. console.log('数据', res);

复制代码

拼接路径参数

1. // 若 id 为数字类型需要模板字符串
2. const { data: res } = await uni.$http.get(`/school/getSchool/${id}`)
3. console.log('数据', res);

复制代码

3. 优化

1. 处理请求结果

   每次发起请求，都要写 if 语句判定请求是否成功，可以修改源码解决
  项目根目录 => 【node_modules】=>【@escook】=>【request-miniprogram】=>【miniprogram_dist】=>【index.js】文件中 success 回调中（我在 62 行）

对 success 的回调进行改造

1. success: (res) => {
2.         // 看一下 res 的层级，每个人后端给的 res 层级可能不一样。
3.         // console.log("响应结果：", res);
5.         // 判断请求的结果
6.         if (res.data.meta.status == 200) {
7.                 // 请求成功，返回data数据
8.                 resolve(res.data.message)
9.         } else {
10.                 // 请求失败，抛出异常，阻止代码继续运行
11.                 uni.showToast({
12.                         title: "数据请求失败",
13.                         icon: 'none',
14.                         duration: 1500
15.                 })
16.                 reject(res)
17.         }
18. },

复制代码

问题：在【.gitignore】文件中忽略了【node_modules】，就无法上传修改的源码到 git 仓库
解决办法：将【@escook】目录复制一份到 util 目录，修改【main.js】中的引入地点

2. 改变引入方式

   直接引入到【main.js】中导致代码可读性差
可以新建一个【request.js】文件，把代码放到文件中
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。