uniapp项目里封装请求request

认识uniapp的request api

在uniapp中，有一个用于发起网络请求的api uni.request( objecct )

请求的参数是一个配置对象，配置这里不介绍了，可以参考uni.request

在实际项目中，每请求一次就要写一次请求接口，当业务多起来时，就会显得代码不那么清晰。通常在开发中我们会封装一些公共的部分，也可以将部分抽离出来，也方便代码维护。
这里将分享一种在项目中简单封装的例子，供大家交流

简单封装

将请求的js代码抽离放到一个js文件中，这里命名为 request.js

// request.js 封装一个函数
/**
* 参数就是配置对象
*/
function service(options={}){

	// 头信息配置
	options.header = {
		'content-type': 'application/json',
		...options.header,
	}
	
	// token 校验等
	if (token) {
		options.header[约定好的token头] = `bearer ${token} `
	}
	if (meta.Authorization) {
		options.header['Authorization'] = `Basic ...`;
	}
	
	// 请求数据处理
	if (['GET', "get"].includes(options.method) && options.params) {
		let data = options.params
		if (!options.data) {
			options.data = {}
		}
		options.data = {
			...options.data,
			...data,
		}
	} else if (['POST', "post"].includes(options.method) && options.params) {
		let keys = Object.keys(options.params)
		if (keys.length > 0) {
			let temp = '&'
			if (options.url.indexOf('?') == -1) {
				temp = "?"
			}
			keys.forEach(item => {
				temp = temp + `${item}=${options.params[item]}&`
			})
			temp = temp.substring(0, temp.length - 1)
			options.url = options.url + temp
		}
	}
	
	// 返回一个promise
	return new Promise((resolved,rejected)=>{
		// 请求成功回调
		options.success = (res) => {
			// 这里可以根据响应结果进行一些操作，比如身份过期，404等一些状态的处理
			// 这里不要操作数据，一般做一些页面流程或逻辑处理
			if (res.statusCode === 401) { // 比如token过期，我们可以重定向页面到登录或首页之类的
				uni.redirectTo({
					url: "/pages/index/index"
				})
				// 记得改变promise状态
				rejected(res)
			}
			// 这里一定要记得写(无论有没有操作，这里都必写)
			resolved(res)
		}
		// 请求失败回调
		options.fail = (err) => {
			rejected(err);
		};
		// 最后是正式发起请求
		uni.request(options);
	})

}

// 记得把函数暴露出去
export default service;

到这里request.js文件就写的差不多了，在这里也说明一下具体的思路。
对于各位前端朋友们来说，平时一般使用axios发送请求居多。

这里service函数在return语句之前的代码处理其实就相当于axios的请求拦截器的
这里可以处理请求的信息，包括头信息，参数等
ps：在uniapp中，请求参数对象中的method属性的值只能为大写，但上述代码中对大小写都匹配了。（因为我个人通常在开发中下意识就写小写）

return语句部分可以看作响应拦截器
这里可以进行逻辑处理，比如根据响应的状态码进项响应的操作，但不建议在这里直接操作数据

简单使用

封装好了uni.request，我们就可以来使用了。封装的目的是减少代码量，方便代码的管理和维护，所以，这里使用的方式也是单独写在一个js文件中，再通过export属性暴露出去。

// 新建 url.js 文件
// 引入 request.js 文件  路径根据自己写的路径来
import request from '@/request.js';

// 例如
// 获取用户信息 get
export const getUserInfoApi = (params) => {
	return request({
		// url: `/api/get/userinfo`,
		url: `/api/get/userinfo?id=${params}`,
		method: 'get',
	})
}
// 修改用户信息 post
export const editInfoDataApi = (data) => {
	return request({
		url: `/api/update/wuserInfo`,
		method: 'post',
		data,
	})
}

在 .vue 文件中使用

<script>
import { getUserInfoApi,editInfoDataApi } '@/url.js';
export default {
	data() {
		return {
			userinfo: {},
			formdata: {
				name: 'jack',
				age: 18
			}
		};
	},
	methods:{
		// async/await写法
		async getInfo(){
			let {data:res} = await getUserInfoApi()
			this.userinfo = res
		},
		// then()写法
		editInfo(){
			editInfoDataApi(this.formdata).then(res=>{
				console.log(res)
			}).catch(e=>{
				console.log(e)
			})
		},
	}
}
</script>

好了，到这里就说完了。这里只是分享一种便于实际开发的写法，我个人觉得这种写法请求名字很清晰，对代码维护比较友好，方便查找和修改之类的。这里新增请求只需要在url.js文件中添加，到页面使用时引入就好了。