更新记录

1.0.1(2021-09-19) 下载此版本

封装的 request 使用方式,可动态率刷新token,支持请求和响应的拦截,


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.3.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

插件使用说明

  • 基于 Promise 对象实现更简单的 request 使用方式,支持请求和响应拦截
  • 下载后把 http 文件夹 copy 到项目根目录下

1. 配置

1.1 全局配置修改(修改http/baseApi.js中BaseApi和http/index.js中相关配置)

1.2 具体接口调用时修改(在http/index.js文件中具体业务接口中配置)

//设置token和content-type(区分json对象传输和formData传输)
http.interceptor.request = (config) => {
        config.header = {
            'content-type': json ? 'application/json' : 'application/x-www-form-urlencoded',
            "Authorization": uni.getStorageSync('token')
        }
    }
//设置请求结束后拦截器
    http.interceptor.response = async (response) => {
        //判断返回状态 执行相应操作
            if(response.data.code===401){//执行token过期的操作
                return response.data = await doRequest(response,url)
            }
        return response;
    }
//配置刷新token的接口
    var res=await postJson('/v1/miniprogram/oauth/wechat/refreshToken',{code:code})

1.3 封装具体的业务请求(在http/index.js文件中具体业务接口中配置)

function postJson(url, data) {
    return $http(url, 'POST', data)
}
function get(url, data) {
    return $http(url, 'GET', data)
}

function post(url, data) {
    return $http(url, 'POST', data, true)
}

function put(url, data) {
    return $http(url, 'PUT', data, true)
}

function del(url,data){
    return $http(url, 'DELETE', data, true)
}

2. 使用

2.1 全局使用(在main.js注册)

  import api from '@/http/'

    // 全局挂载后使用
    Vue.prototype.$api = api

<template>
    <view class="content">
        测试api
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        onLoad(option) {
            this.test()
        },
        methods: {
            // 方式一
            test(){
                            this.$api.get('/v1/miniprogram/device/'+'21040011515')
                            .then(res=>{
                                this.name = res.data.data.clazz_name
                            })
                        }

            //方式二
            async test(){
                            let res = await this.$api.get('/v1/miniprogram/device/'+'21040011515')
                        }
        }
    }
</script>

3. 接口数据加密、接口签名核验

在http/interface.js文件中的request(Object)方法中补充修改相应的代码

4. 接口请求/响应日志记录

在http/interface.js文件中的request(Object)方法中补充修改相应的代码

5. 业务相关接口编写

在http/index.js文件中的编写具体业务相关的接口

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问