介绍

开发不易，能给插件一个好评**吗，拜托了！

封装uni-app的request方法，使用方法更简单、方便。
特点：

• 支持 callback 回调函数或者 Promise
• 支持全局、局部的请求和响应拦截器
• 支持添加配置文件
• 支持根据接口自定义处理
• 支持所有 method 方法
• 支持 params 参数属性
• 支持文件上传和下载

推荐更新到最新版本

兼容性问题、设置**超时时间，**请查看官方文档官方文档: https://uniapp.dcloud.io/api/request/request?id=request

下载地址

推荐先下载示例项目
github: https://github.com/2460392754/uniapp-tools/tree/master/request
dcloud: https://ext.dcloud.net.cn/plugin?id=468

更新日志

https://ext.dcloud.net.cn/plugin?id=468&update_log

1.兼容性测试

✅微信小程序
✅h5
✅android
❓其他平台(没测试)
❗跨域会直接进入fail或catch

2.目录结构

示例项目的目录结构

hBuilderX\plugins\request
├── pages
│   └── index
│       └── index.vue       页面
├── plugins
│   └── request
│       └── js
│           ├── index.js    配置文件
│           └── request.js  插件
├── xhr
│   └── index.xhr.js        接口
├── App.vue
├── jsconfig.json
├── main.js
├── manifest.json
├── pages.json
├── README.md
└── tsconfig.json

3.运行流程图

4.配置文件

setConfig的参数列表

语雀内容

文件内容

// plugins/request/js/index.js
import request from './request';
// 设置全局配置
request.prototype.setConfig({
    url: 'https://easy-mock.com/mock/',  // 基地址
    // contentType: 'json',
    // header: {
    //     uid: 'xxxx'
    // }
});
// 全局拦截器
request.prototype.addGlobalInterce({
    // 请求拦截器 (例如配置token)
    // return false或者不return值, 都不会发送请求
    request (config) {
        console.log('📖 is global request interceptors', config)
        return config;
        // return false;
    },
    // 响应拦截器 (例如根据状态码拦截数据)
    // return false或者不return值 则都不会返回值
    // return Promise.reject('xxxxx')，主动抛出错误
    response (res) {
        let firstCodeNum = String(res.statusCode).substr(0, 1);
        console.log('📫 is global response interceptors', res)
        // 2xx
        if (firstCodeNum === '2') {
            // do something
            // res.data.data.text = 'addGlobalInterce response'
            return res;
        }
        // 3xx
        if (firstCodeNum === '3') {
            // do something
            return res;
        }
        // 4xx or 5xx
        if (firstCodeNum === '4' || firstCodeNum === '5') {
            // do something
            console.log('is 4xx or 5xx')
            return Promise.reject('nooooo')
        }
        // 停止发送请求 request.stop()
        if (JSON.stringify(res) === '{"errMsg":"request:fail abort"}') {
            // do something
            // return Promise.reject('xxxxxxxxx');
            return false;
        }
        // return Promise.reject(res)
        return res;
    }
});
export default request

5.实例的参数列表

语雀内容

6.如何使用

把插件2次封装后挂载到全局则无法使用局部拦截器，可以自由取舍
**
1.直接引入到vue文件中

// pages/index/index.vue
<template>
    <div></div>
</template>
<script>
import request from '../../plugins/request/js/index'
export default {
    methods: {
        // promise
        getMockDataMethodGet () {
            const instance = new request();
            const r = instance.get({
                url: "/5cda87e31d38be0d2dd91a44/example/get",
                data: { text: 'method type is get' },
                contentType: 'form',
            })  
                .then(res => {
                    console.log('👍👍👍👍👍 then', res)
                })
                .catch(err => {
                    console.log('⛔⛔⛔⛔⛔ catch', err)
                })
                .finally(() => {
                    console.log('😐😐😐😐😐 finally')
                })
        },
    },
    created () {
        this.getMockDataMethodGet();
    }
}
</script>

2.到业务接口文件中单独处理，也可以添加局部拦截器，根据业务需要自定义拦截（推荐）

// xhr/index.xhr.js
import request from '../plugins/request/js/index'
export default {
    // get请求 ,callback
    getMockDataMethodGet ({ success, fail, complete } = {}, canRunState = true) {
        const instance = new request();
        // 局部请求拦截器
        instance.addInterceptors.request(config => {
            console.log('📑 request config: ', config)
            return config;
            // return false;
        })
        // 局部响应拦截器
        instance.addInterceptors.response(res => {
            console.log(`📧 response result`, res)
            // return res.data
            return res;
            // return false;
        })
        const r = instance.get({
            url: "/5cda87e31d38be0d2dd91a44/example/get",
            data: { text: 'method type is get' },
            contentType: 'form',
            success: res => {
                console.log('👍 getMockDataGet success: ', res)
                success && success(res)
            },
            fail: err => {
                console.log(`⛔ getMockDataGet fail: `, err)
                fail && fail(err)
            },
            complete: res => {
                console.log(`😐 getMockDataGet complete: `, res)
                complete && complete(res)
            }
        });
        // 停止发生请求
        !canRunState && instance.stop(r)
    },
}

上传和下载除了url会进行合并，其他数据都不会合并，也没有做数据名称适配，设置参数和官方的一样，但也会走拦截器
上传

return new request().upload({
    url: "https://www.easy-mock.com/mock/5cda87e31d38be0d2dd91a44/example/upload",
    name: 'file',
    filePath: 'data:image/png;base64,xxxxxxxxxx',
    formData: { text: 'is mock upload file' },
});

下载

return new request().download({
    url: 'https://dummyimage.com/120x60',
})

最后

出现bug了？
遇到无法解决的问题？
直接加我q或者发邮件也行

email: 2460392754@qq.com
qq: 2460392754

欢迎交流或探讨问题！