uni-app之request-miniprogram配置网络请求

uni-app开发小程序

1、 使用@escook/request-miniprogram配置网络请求

注：因为小程序中无法使用axios，而wx.request功能过于简单，所以下载加强版网络请求包，实现如下：

1.1 安装

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
},