前言
-
在使用uni-app开发小程序时候发现axios添加请求头时在实际网络请求时并没有添加进去
-
后面发现是有第三方包@escookrequest-miniprogram代替axios发送请求的，请求头也添加正常。
-
注意是这个包也是在外层包了一层data，但好像并不能统一处理掉。
代码实现
1.下包@escookrequest-miniprogram
npm install @escook/request-miniprogram2.在utils/下建立requesthttp.js文件夹-代码如下
// 按需导入 $http 请求对象
import {
$http
} from '@escook/request-miniprogram'
// 将按需导入的 $http 挂载到 wx 顶级对象之上，方便全局调用
// wx这个东西是微信小程序里的顶级对象，也就是说所有页面都可以访问wx这个对象
// 所以我所有地方就可以用 wx.$http访问到请求对象了
// 设置基地址
$http.baseUrl = 'http://127.0.0.1:8800'
// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
// 小程序里wx是顶级对象，但是在uniapp中，uni才是顶级对象
uni.$http = $http
// 请求开始之前做一些事情
// 因为咱们是uniapp项目，顶级对象不叫wx，叫uni，记得把wx这个改成uni
$http.beforeRequest = function(options) {
console.log('请求参数', options);
options.header = {
'token': uni.getStorageSync('token'),
'tenant-id': uni.getStorageSync('tenant-id')
}
uni.showLoading({
title: '数据加载中...',
})
// console.log('请求参数添加之后', options);
}
// 请求完成之后做一些事情
$http.afterRequest = function(res) {
console.log('请求之后', res);
uni.hideLoading()
}3.在main.js中引入
// 请求导入即可
import "./utils/requesthttp.js"4.页面发送请求
4.1get请求
// 默认多包了一层data，解构出来
const {
data: res
} = await uni.$http.get('/equipment/getSystemType')
console.log('数据', res);4.2get请求拼接路径参数
// 默认多包了一层data，解构出来
// 传递路径id数字类型需要模板字符串
方法（id）{
const {
data: res
} = await uni.$http.get(`/wechat-inspection/getFloor/${id}`)
}总结：
经过这一趟流程下来相信你也对 uni-app 使用@escookrequest-miniprogram请求发送 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！文章来源：https://www.toymoban.com/news/detail-545739.html
什么不足的地方请大家指出谢谢 -- 風过无痕文章来源地址https://www.toymoban.com/news/detail-545739.html
到了这里，关于uni-app 使用@escookrequest-miniprogram请求发送的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
