介绍
由于平台的限制,小程序项目中不支持 axios,而且原生的 wx.request()
API 功能较为简单,不支持拦截器等全局定制的功能。因此,建议在 uni-app 项目中使用 @escook/request-miniprogram
第三方包发起网络数据请求。
@escook/request-miniprogram - npm
安装
uni-app默认是没有npm 包的管理文件 package.json 所以开始我们要初始化一个 npm init -y
再继续安装需要的模块
npm install @escook/request-miniprogram
最终,在项目的 main.js
入口文件中,通过如下的方式进行配置:
// 按需导入 $http 对象
import { $http } from '@escook/request-miniprogram'
// 将按需导入的 $http 挂载到 wx/uni 顶级对象之上,方便全局调用
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://...'
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
uni.showLoading({
title: '数据加载中...',
})
}
// 请求完成之后做一些事情
$http.afterRequest = function () {
uni.hideLoading() // 请求成功后关闭加载提示
}
在页面中发送请求
示例代码:
export default {
data() {
return {
// 默认为空数组
List: [],
}
},
onLoad() {
// 2. 在小程序页面刚加载的时候,调用获取轮播图数据的方法
this.getSwiperList()
},
methods: {
// 3. 获取列表数据的方法
async getSwiperList() {
// 3.1 发起请求
const { data: res } = await uni.$http.get('/api/...')
// 3.2 请求失败
if (res.meta.status !== 200) {
return uni.showToast({
title: '数据请求失败!',
duration: 1500,
icon: 'none',
})
}
// 3.3 请求成功,为 data 中的数据赋值
this.List = res.message
},
},
}