uni-app接口请求封装

三月.暖阳

已于 2023-07-27 14:32:29 修改

阅读量5.3k

点赞数 8

文章标签： uni-app vue 前端

于 2023-07-27 14:30:07 首次发布

本文链接：https://blog.csdn.net/yi2008yi/article/details/131959224

版权

1.前言。

正所谓“工欲善其事必先利其器”，在vue-PC项目中，我们可以借助axios来封装对应的api接口请求（ps：axios的接口请求封装）。不过，如果是用uni-app开发小程序，那么又该如何借助uni-app自带的网络请求uni.request()来封装“万金油”的api接口请求呢？

2.认识uni.request。

官方：uni.request。
在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单，换成大白话就是说：在uni-app中访问的网络接口请求域名必须要在你的微信/支付宝（你所要开发部署的小程序服务商）后台中配置对应的域名白名单。

uni.request()中特别注意的是请求方法必须是大写（比如：'GET'，'POST'）等。
uni.request()的返回值会根据你的写法来返回requestTask对象或者是封装后的Promise对象。

3.认识uni.getAccountInfoSync()。

想在uni-app中封装“万金油”通用型接口api请求，还有一个很重要的点就是要借助uni.getAccountInfoSync()。官方解释是：获取当前帐号信息，可以返回小程序的Appid。如果使用了微信小程序的云端插件，还可以返回当前插件Appid、版本号。

4.封装步骤解析。

结构图：

新建api文件夹，再在其内新建config.js文件用于处理环境域名配置，代码如下。

export default {
	//接口请求域名配置
	api: function() {
		let curVersion = uni.getAccountInfoSync().miniProgram.envVersion;
		switch (curVersion) {
			case "develop": //开发版
				return "https://sharebk.oss-cn-hangzhou.aliyuncs.com";
			case 'trial': //体验版
				return "http://xxx.xxx.xxx.xxx:xxx"
			case 'release': //正式版
				return "http://xxx.xxx.xxx.xxx:xxx"
			default: //其他,默认调用正式版
				return "http://xxx.xxx.xxx.xxx:xxx"
		}
	}
}

在api文件夹内新建request.js文件用于封装uni.request()，代码如下。

import config from './config.js';

const request = (url = '', method = 'GET', data = {}, header = {   //这里这样封装是为了后续具体组件中使用时可以直接传参,需按此顺序传参；而不需要写url：xxx等键值对传参
	//具体的header和后端商同后再编写，这里以常见的token为例
	'token': uni.getStorageSync('token') ? uni.getStorageSync('token') : '',
}) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: config.api() + url, //接口地址：前缀+方法中传入的地址
			method: method, //请求方法
			data: data, //传递参数
			header: header, //自定义头部，和后端商同后编写
			success: (res) => {
				console.log('request.js文件的通用接口请求封装返回的结果数据',res);
				//注：因为这里对请求成功的没有统一设置抛错提示，所以后续具体组件中使用接口请求的res除200（实际以后端同事定好的为准）成功外的其他code需要额外写抛错提示
				if (res.data.code == 'xxx') { //自定请求失败的情况，这里以常见的token失效或过期为例
					uni.removeStorageSync('token');
					uni.showModal({
						showCancel: false,
						title: '温馨提示',
						content: res.data.msg,
						success: function(result) {
							if (result.confirm) {
								// uni.reLaunch({
								// 	url: '/pages/login/index'    //这里需用绝对路径才可
								// });
							}
						}
					});
				}
				resolve(res.data) //成功
			},
			// 这里的接口请求，如果出现问题就输出接口请求失败的msg；
			//注：因为这里对于请求失败的设置统一抛错提示了，所以后续具体组件中使用接口请求的catch中不需要再写抛错提示
			fail: (err) => {
				uni.showToast({
					title: "" + err.msg,
					icon: 'none'
				});
				reject(err)
			}
		})
	})
}

export default request;