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

QiQi613

已于 2022-07-04 10:45:35 修改

阅读量1.9k

点赞数

文章标签：大数据

于 2022-06-23 21:30:10 首次发布

本文链接：https://blog.csdn.net/weixin_66556453/article/details/125435281

版权

本文介绍了如何在uni-app中使用@escook/request-miniprogram进行网络请求配置，包括安装包、设置请求拦截器和响应拦截器，以及在页面中发起请求的例子，帮助开发者实现更强大的请求功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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