如题,官方能把request、showModal等内置api用Promise封装一下吗,具体我拿 uni.showModal举例子
我这么说肯定是有原因的,我自己就手动把官方的request库 封装了一下,我是这样代码的可读性更高,
也更好维护。
// 二次封装request
// 导入apiconfig
import config from '@/common/config/index.js'
// 配置错误信息
const REQUEST_ERROR = '请求错误,请重试!'
const intercept = {}
// 手写请求拦截器
intercept.req = (req) => {
// 自定义header
// jwt-token认证会用到
// console.log(req);
if (!req.data) req.data = null
let token = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).token : false; // 从浏览器获取token
if (token) // 有token值就把token值加入到请求参数中
{
req.data.token = token;
}
return req;
}
// 手写响应拦截器
intercept.rep = (res) => {
// console.log(res);
const { data: response } = res
// const status
if (res.statusCode !== 200) {
uni.showModal({
title: '提示',
content: '网络错误,请检查网络后刷新重试!',
showCancel: false
})
// 返回promise 的reject
return Promise.reject(REQUEST_ERROR)
}
// 返回获得的数据
return response
}
// 用promise封装请求函数
const pRequest = (rObj) => {
// console.log(rObj.url);
if (typeof rObj !== 'object') return console.error('rObj只可以传递对象!');
if (!((typeof rObj.success == 'function' || typeof rObj.success == 'undefined') && (typeof rObj.fail == 'function' || typeof rObj.fail == 'undefined'))) {
console.error('success和fail只能不传或者传回调函数!');
}
if (typeof rObj.url == 'undefined') return console.error('url不可为空!');
return new Promise((resolve, reject) => {
// console.log(rObj.url);
uni.request({
...rObj,
// 配置响应拦截器
success: res => resolve(intercept.rep(res)),
fail: () => {
reject(REQUEST_ERROR)
}
});
});
}
// 封装核心请求函数,借助uni.request
const request = async (options) => {
// 由于 uni.request 两种请求方法都是传 data,所以无需处理
options.method = options.method || 'get'
// console.log(options.method.toLowerCase());
// 对mock进行处理
let isMock = config.mock
if (typeof options.mock !== 'undefined') {
// 如果已经配置是否用mock,那么就重置为options的mock状态
isMock = options.mock
}
// 对请求url做处理
if (config.env == 'production') {
options.url = config.baseApi + options.url
} else {
options.url = isMock ? config.mockApi + options.url : config.baseApi + options.url
}
// 请求拦截
intercept.req(options)
// console.log(options);
// 返回请求结果
return pRequest(options)
}
export default request
使用时直接挂载到proxy上即可
import App from './App'
// 导入比例配置
import config from '@/common/config/index.js'
// 导入请求函数
import request from '@/common/api/request.js'
// 导入pinia
import {createPinia} from 'pinia'
// vue3
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
// 创建pinia实例
const pinia = createPinia()
// 挂载页面比例
app.config.globalProperties.$scale = config.scale
app.config.globalProperties.$request = request
app.use(pinia)
return {
app
}
}
// #endif
大家可以自己尝试一下哪一种更方便
q***@qq.com (作者)
感谢,我去研究一下,原来原生有这个功能
2023-07-04 21:28
昭昭L
还能这么用,才知道
2023-07-04 22:04
Diligent_UI
可以直接then,牛啊
2023-07-05 08:59