uniapp请求封装

265 阅读1分钟

一.简述

uni.request是回调风格,回调风格的代码不易维护,回调地狱等问题。所以我们需要吧uni.request封装成promise风格。

二.三步走完成封装

1.在目录下新建utils/request.js

1674133695020.png

2.导出函数

export function request(){

}

3.返回一个Promise实例

export function request(){
    return new Promise((reslve, reject) => {
		
	})
}

4.将uni.request的结果交给Promise实例处理

export const basUrl = ''//后端接口地址
const token= uni.getStorageSync('storage_key')//自定义登录态
export function request(url, method = 'GET', data = {}) {
	// 这里可以配置请求拦截器
	// 加载效果
	uni.showLoading({
		title: "请稍后,加载中"
	})
    return new Promise((reslve, reject) => {
		uni.request({
			url: `${basUrl}${url}`,
			method,
			data,
			header:{
				token
			},
			success: (res) => {
				// 这里可以配置响应拦截器
				reslve(res)
			},
			fail: (err) => {
				reject(err)
			},
			complete: () => {
				// 请求完成,清除加载效果
				uni.hideLoading();
			}
		})
	})
}