平台兼容性

插件使用说明

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

1. 配置

1.1 全局配置修改(修改vmeitime-http/interface.js中config和interceptor)

复制代码    config: {
        baseUrl: "https://api.com/api/",
        header: {
            'Content-Type':'application/json;charset=UTF-8',
            'Content-Type':'application/x-www-form-urlencoded'
        },    
        dataType: "json",  
        responseType: "text"
    },
    interceptor: {
        request: null,
        response: null
    }

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

复制代码//设置baseUrl
http.config.baseUrl = "http://localhost:8080/api/"
//设置请求前拦截器
http.interceptor.request = (config) => {
    //添加通用参数
    config.header = {
        "token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
}
//设置请求结束后拦截器
http.interceptor.response = (response) => {
    //判断返回状态 执行相应操作
    return response;
}

2. 使用

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

复制代码  import api from '@/common/vmeitime-http/'

    // 全局挂载后使用
    Vue.prototype.$api = api
复制代码
<template>
    <view class="content">

        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-textarea uni-common-mt">
                <textarea :value="res"></textarea>
            </view>
            <view class="uni-btn-v uni-common-mt">
                <button type="primary" @click="sendRequest" :loading="loading">发起请求</button>
                <button type="default" @click="sendRequest1" :loading="loading">发起请求(async/await)</button>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                res: ''
            }
        },
        onLoad(option) {
            //this.sendRequest();
            //this.sendRequest1();
        },
        methods: {
            // 方式一
            sendRequest: function() {
                this.loading = true
                this.$api.test({noncestr: Date.now()}).then((res)=>{
                    this.loading = false;
                    console.log('request success', res)
                    uni.showToast({
                        title: '请求成功',
                        icon: 'success',
                        mask: true
                    });
                    this.res = '请求结果 : ' + JSON.stringify(res);
                }).catch((err)=>{
                    this.loading = false;
                    console.log('request fail', err);
                })
            },

            //方式二  https://segmentfault.com/a/1190000013292562?utm_source=channel-newest
            async sendRequest1() {
                this.loading = true
                let res = await this.$api.test({noncestr: Date.now()});
                this.loading = false;
                this.res = '请求结果 : ' + JSON.stringify(res);
            }
        }
    }
</script>

2.2 局部使用(局部使用,不需要在 main.js 中注册)

复制代码
<template>
    <view class="content">

        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-textarea uni-common-mt">
                <textarea :value="res"></textarea>
            </view>
            <view class="uni-btn-v uni-common-mt">
                <button type="primary" @click="sendRequest" :loading="loading">发起请求</button>
                <button type="default" @click="sendRequest1" :loading="loading">发起请求(async/await)</button>
            </view>
        </view>

    </view>
</template>

<script>
    import api from '@/common/vmeitime-http/'

    export default {
        data() {
            return {
                loading: false,
                res: ''
            }
        },
        onLoad(option) {
            //this.sendRequest();
            //this.sendRequest1();
        },
        methods: {
            // 方式一
            sendRequest: function() {
                this.loading = true
                api.test({noncestr: Date.now()}).then((res)=>{
                    this.loading = false;
                    console.log('request success', res)
                    uni.showToast({
                        title: '请求成功',
                        icon: 'success',
                        mask: true
                    });
                    this.res = '请求结果 : ' + JSON.stringify(res);
                }).catch((err)=>{
                    this.loading = false;
                    console.log('request fail', err);
                })
            },

            //方式二
            async sendRequest1() {
                this.loading = true
                let res = await this.api.test({noncestr: Date.now()});
                this.loading = false;
                this.res = '请求结果 : ' + JSON.stringify(res);
            }
        }
    }
</script>

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

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

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

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

5. 业务相关接口编写

在vmeitime-http/index.js文件中的编写具体业务相关的接口,参考test()方法

隐私、权限声明

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

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

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

许可协议

MIT协议
177***@163.com

2023-07-08

vue3无法使用

101***@qq.com

2022-10-25

请问大佬请求都是异步的吗?如果要同步要怎么改呢

594***@qq.com

2022-08-03

options.complete = (response) => {} 这个在微信小程序里好像不生效?help!!!

199***@qq.com

2022-05-13

var data=uni.getStorageSync('user');

this.$api.me({ data }).then((res)

后台输入的数据就是个对象 array(1){ ["data"]=>string(15) "[object object]" }

199***@qq.com 2022-05-13

这玩意不能传数组吗?

simon187

2022-03-21

为什么用post或者put的时候传递到后台的参数取到都是空的呢?get方式没问题

极客帮

2021-07-23

问一下作者,既然有uni.request了,为什么还要自己开发一套?解决uni.request的什么问题?把uni.request封装一下不更简单吗?

107***@qq.com

2021-07-02

Token刷新在哪里加?全局拦截时时代码哪个位置?

我不是张三1

2021-04-16

怎么发起body请求

152***@qq.com

2021-02-24

request拦截器里获取app版本号(plus.runtime.getProperty),无法放入请求头。知道什么原因吗

赖赖不在

2021-02-23

提示:项目下缺少manifest.json的,把vmeitime-http文件夹单独拉出来,再打开。

2022-03-21

为什么用post或者put的时候传递到后台的参数取到都是空的呢?get方式没问题