ToB企服应用市场:ToB评测及商务社交产业平台
标题:
uniapp @escook/request-miniprogram 设置 axios
[打印本页]
作者:
麻花痒
时间:
2024-8-28 17:58
标题:
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】文件
npm install @escook/request-miniprogram
复制代码
3. 利用 @escook/request-miniprogram
1. 在【main.js】中设置 axios
// 引入$http请求对象
import { $http } from '@escook/request-miniprogram'
// 将 $http 挂载到 uni 上,方便全局调用,在uni-app中,uni是全局对象(例如微信开发者工具的 wx 对象)
uni.$http = $http
// 配置基地址
$http.baseUrl = "https://www.baidu.com"
// 请求拦截器
$http.beforeRequest = function(config) {
// 提示加载中
uni.showLoading({
title: "数据加载中..."
})
// 请求头添加 token
const token = uni.getStorageSync('token');
if (token) {
options.header = {
token
}
}
}
// 响应拦截器
$http.afterRequest = function() {
// 关闭提示
uni.hideLoading()
}
复制代码
2. 发送请求
以 get 请求举例
// 默认多包了一层data,解构出来
const { data: res } = await uni.$http.get('/school/getSchool')
console.log('数据', res);
复制代码
拼接路径参数
// 若 id 为数字类型需要模板字符串
const { data: res } = await uni.$http.get(`/school/getSchool/${id}`)
console.log('数据', res);
复制代码
3. 优化
1. 处理请求结果
每次发起请求,都要写 if 语句判定请求是否成功,可以修改源码解决
项目根目录 => 【node_modules】=>【@escook】=>【request-miniprogram】=>【miniprogram_dist】=>【index.js】文件中 success 回调中(我在 62 行)
对 success 的回调进行改造
success: (res) => {
// 看一下 res 的层级,每个人后端给的 res 层级可能不一样。
// console.log("响应结果:", res);
// 判断请求的结果
if (res.data.meta.status == 200) {
// 请求成功,返回data数据
resolve(res.data.message)
} else {
// 请求失败,抛出异常,阻止代码继续运行
uni.showToast({
title: "数据请求失败",
icon: 'none',
duration: 1500
})
reject(res)
}
},
复制代码
问题:在【.gitignore】文件中忽略了【node_modules】,就无法上传修改的源码到 git 仓库
解决办法:将【@escook】目录复制一份到 util 目录,修改【main.js】中的引入地点
2. 改变引入方式
直接引入到【main.js】中导致代码可读性差
可以新建一个【request.js】文件,把代码放到文件中
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4