由于平台的限制,小程序项目中不支持 axios
- 而且原生的 `wx.request()` API 功能较为简单,
不支持拦截器,等全局定制的功能
1,建议在 uni-app 项目中使用 `@escook/request-miniprogram` 第三方包发起网络数据请求。
2,请参考 **@escook/request-miniprogram** 的官方文档进行安装、配置、使用
官方文档:官方文档
步骤:
1,打开项目所在的目录,进行初始化:npm init -y
2,再下载第三方包:npm i @escook/request-miniprogram(如果你是用Hbuilder开发就打开项目的文件夹然后在文件地址那里 输入cmd 在里面下载)
创建一个根目录下的utils文件 然后在里面创建一个文件 http.js
这一步结束后 就去main.js中 全局导入 import './utils/http.js'
// 封装网络请求的方法
import {
$http
} from '@escook/request-miniprogram'
// 设置基地址
$http.baseUrl = '基地址' ------基地址
// 设置拦截器
// 请求拦截器
$http.beforeRequest = function() {
// 添加提示信息
uni.showLoading({
title: '数据加载中...'
})
}
// 响应拦截器
$http.afterRequest = function() {
// 关闭提示信息
uni.hideLoading()
}
// 挂载到全局(uni-app 中的全局对象建议大家使用 uni)
uni.$http = $http
// 暴露方法
export default $http
3,
在main.js中导入文件
import './utils/http.js'
4,使用方法·:
uni.$http.请求方式('请求地址')
async getSwiperList() {
const {
data: {
message,
meta
}
} = await uni.$http.get('/home/swiperdata')
if (meta.status !== 200) return uni.$showMsg()
// 保存数据
this.swiperList = message
},