q***@qq.com
q***@qq.com
  • 发布:2023-07-04 17:05
  • 更新:2023-07-04 19:34
  • 阅读:350

官方能把request、showModal等内置api用Promise封装一下吗

分类:uni-app

如题,官方能把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

大家可以自己尝试一下哪一种更方便

2023-07-04 17:05 负责人:DCloud_UNI_GSQ 分享
已邀请:
DCloud_UNI_GSQ
  • q***@qq.com (作者)

    感谢,我去研究一下,原来原生有这个功能

    2023-07-04 21:28

  • 昭昭L

    还能这么用,才知道

    2023-07-04 22:04

  • Diligent_UI

    可以直接then,牛啊

    2023-07-05 08:59

Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

那你也可以把uni.showModel也封装一下啊,和uni,request封装是一样的

要回复问题请先登录注册