由于平台的限制,小程序项目中不支持 axios,而且原生的 wx.request()
API 功能较为简单,不支持拦截器等全局定制的功能。因此,建议在 uni-app 项目中使用 @escook/request-miniprogram
第三方包发起网络数据请求
官方文档:https://www.npmjs.com/package/@escook/request-miniprogram
安装 npm install @escook/request-miniprogram
最终,在项目的 main.js
入口文件中,通过如下的方式进行配置:
import { $http } from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
uni.showLoading({
title: '数据加载中...',
})
}
// 请求完成之后做一些事情
$http.afterRequest = function () {
uni.hideLoading()
}
这样既可使用,简单的联调
为以后api接口方便修改和联调,需封装api
封装request-miniprogram和封装axios基本一样
封装api
1.创建创建 utils文件然后创建baseUrl.js (起名看个人爱好)
import {$http} from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
uni.showLoading({
title: '数据加载中...',
})
}
// 请求完成之后做一些事情
$http.afterRequest = function () {
uni.hideLoading()
}
export default $http
2.创建api文件然后创建home.js (起名看个人爱好)
import http from '../../utils/baseUrl.js'
export function swiperdata(data) {
return http.get('/api/public/v1/home/swiperdata', data)
}
3.最后调用文件home.js 既可
import { swiperdata } from '../../api/home/index.js'
methods: {
// 3. 获取轮播图数据的方法
async getSwiperList() {
// 3.1 发起请求
const { data: res } = await swiperdata()
// 3.3 请求成功,为 data 中的数据赋值
this.list = res.message
},
}
结束。。。。
有问题欢迎提问,随时修改!