uniapp @escook/request-miniprogram 配置 axios

1. 背景

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。

因此，可以在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求（也可以使用其它包，步骤都差不多，如：uniapp-axios-adapter）

官网地址

2. 使用步骤

1. 安装 @escook/request-miniprogram

前提是已经安装了 npm
安装好后可以在 【package-lock.json】中查看包信息
没有 【package-lock.json】文件可以使用 npm init -y 初始化 【package.json】文件

npm install @escook/request-miniprogram

3. 使用 @escook/request-miniprogram

1. 在【main.js】中配置 axios

// 引入$http请求对象
import { $http } from '@escook/request-miniprogram'

// 将 $http 挂载到 uni 上，方便全局调用，在uni-app中，uni是全局对象（例如微信开发者工具的 wx 对象）
uni.$http = $http

// 配置基地址
$http.baseUrl = "https://www.baidu.com"
// 请求拦截器
$http.beforeRequest = function(config) {
	// 提示加载中
	uni.showLoading({
		title: "数据加载中..."
	})
	// 请求头添加 token
	const token = uni.getStorageSync('token');
	if (token) {
		options.header = {
			token
		}
	}
}
// 响应拦截器
$http.afterRequest = function() {
	// 关闭提示
	uni.hideLoading()
}

2. 发送请求

以 get 请求举例

// 默认多包了一层data，解构出来
const { data: res } = await uni.$http.get('/school/getSchool')
console.log('数据', res);

拼接路径参数

// 若 id 为数字类型需要模板字符串
const { data: res } = await uni.$http.get(`/school/getSchool/${id}`)
console.log('数据', res);

3. 优化

1. 处理请求结果

每次发起请求，都要写 if 语句判断请求是否成功，可以修改源码解决

项目根目录 => 【node_modules】=>【@escook】=>【request-miniprogram】=>【miniprogram_dist】=>【index.js】文件中 success 回调中（我在 62 行）

对 success 的回调进行改造

success: (res) => {
	// 看一下 res 的层级，每个人后端给的 res 层级可能不一样。
	// console.log("响应结果：", res);

	// 判断请求的结果
	if (res.data.meta.status == 200) {
		// 请求成功，返回data数据
		resolve(res.data.message)
	} else {
		// 请求失败，抛出异常，阻止代码继续运行
		uni.showToast({
			title: "数据请求失败",
			icon: 'none',
			duration: 1500
		})
		reject(res)
	}
},

问题：在【.gitignore】文件中忽略了【node_modules】，就无法上传修改的源码到 git 仓库
解决办法：将【@escook】目录复制一份到 util 目录，修改【main.js】中的引入地址

2. 改变引入方式

直接引入到【main.js】中导致代码可读性差
可以新建一个【request.js】文件，把代码放到文件中