uni-app开发小程序
1、 使用
@escook/request-miniprogram
配置网络请求注:因为小程序中无法使用
axios
,而wx.request
功能过于简单,所以下载加强版网络请求包,实现如下:
npm init -y 在项目根目录初始化package.json文件
npm i @escook/request-miniprogram -S 下载网络请求包
1.2 打开main.js
配置入口文件
// 导入网络请求的包
import {
$http
} from '@escook/request-miniprogram'
uni.$http = $http
// 请求的根路径
$http.baseUrl = '根路径'
// 请求拦截器
$http.beforeRequest = function(options) {
uni.showLoading({
title: '数据加载中...'
})
// 判断请求的是否为有权限的 API 接口
if (options.url.indexOf('/my/') !== -1) {
// 为请求头添加身份认证字段
options.header = {
// 字段的值可以直接从 vuex 中进行获取
Authorization: store.state.m_user.token,
}
}
}
// 响应拦截器
$http.afterRequest = function() {
uni.hideLoading()
}
// 封装弹框的方法
uni.$showMsg = function(title = '数据请求失败!', duration = 1500) {
uni.showToast({
title,
duration,
icon: 'none'
})
}
1.3 在页面中发起网络请求
async getNavList() {
const { data: res } = await uni.$http.get('/api')
if (res.meta.status !== 200) return uni.$showMsg()
this.navList = res.message
},