更新记录

1.0.4（2022-11-16）

移除baseUrl 默认值

1.0.3（2022-11-11）

修改 ApiResult 泛型，默认 any

1.0.2（2022-11-08）

update

平台兼容性

lg-http

插件使用说明

• 基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截

1. 配置

1.1 全局配置修改（修改lg-http/index.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 具体接口调用时修改

//设置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 '@/lg-http/index'

    // 全局挂载后使用
    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);
                })
            },

            // 方式二
            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 '@/lg-http/index'

    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>