再次封装uni.request

再次封装uni.request

看别人的uniapp代码时发现的，觉得蛮好用，自己试着用了下。。还行。。下面是代码：

//common/lib/request.js
//接口返回固定有code,msg，data, 其中code=0为成功

export default {
    //全局配置
    common: { 
        baseUrl: 'http://localhost:5049/api', 
        header: {
            'Content-type' : 'application/json;chatset=UTF-8'
        },
        data: {},
        method: 'GET',
        dataType: 'json'
    },
    //请求 返回 promise
    request(options = {}) {
        //组织参数
        options.url = this.common.baseUrl + options.url
        options.header = options.header || this.common.header
        options.data = options.data || this.common.data
        options.method = options.method || this.common.method
        options.dataType = options.dataType || this.common.dataType
        console.log('进入request.js');
        console.log('url:'+options.url);
        console.log('data:'+JSON.stringify(options.data)); 
        console.log('method:'+options.method);
        //请求之前
        uni.showLoading({
            mask:true 
        }) 
        //请求中
        return new Promise((res, rej) => {
            uni.request({
                ...options,
                success: (result) => {
                    //console.log('访问远程接口返回：'); 
                    //注意直接写console.log(result)是输出不了任何东西的
                    //console.log(JSON.stringify(result));  
                    if (result.statusCode !== 200) {
                        uni.showToast({
                            title:    '服务器失败'+result.statusCode,
                            mask: true,
                            icon: 'none'
                        })
                        return rej()
                    }
                    if (result.data.code!=0) {
                        uni.showToast({
                            title: result.data.msg || '服务器失败',
                            mask: true,
                            icon: 'none'
                        })
                        return;
                    }
                    let data = result.data.data
                     
                    res(data)
                },
                fail: (error) => {
                    console.log('接口访问失败');
                     uni.showToast({
                        title: error.errMsg || '请求失败',
                        icon: 'none'
                    })
                    return rej()
                },
                complete: () => {
                    uni.hideLoading()
                }
            })
        })
    },
    //get请求
    get(url, data = {}, options = {}) {
        options.url = url
        options.data = data
        options.method = 'GET'
        return this.request(options)
    },
    //post请求
    post(url, data = {}, options = {}) {
        options.url = url
        options.data = data
        options.method = 'POST'
        return this.request(options)
    },
    //put请求
    put(url, data = {}, options = {}) {
        options.url = url
        options.data = data
        options.method = 'PUT'
        return this.request(options)
    },
    //delete请求
    delete(url,data={},options={}){
        options.url = url;
        options.data = data;
        options.method='DELETE';
        return this.request(options);
    }
}

使用：

//vue.js中的script
<script>
    import $http from '@/common/lib/request.js'
    export default {
        data() {
            return {
                jifen:20,
                baseList: []
            }
        },
        onLoad() {
                this.GetData();
        },
        methods: {
            //读取接口数据
            GetData(){
                var u = uni.getStorageSync('userinfo');
                $http.get('/qiandao/'+u.Id).then(res=>{
                    this.jifen = res.jifen;
                    this.baseList = res.rili;
                })
            },
            //签到
            QianDao(){
                var u = uni.getStorageSync('userinfo');
                $http.post('/qiandao/'+u.Id).then(res=>{
                    uni.showModal({
                        content:res.msg,
                        showCancel:false
                    })
                })
            }
        }
    }
</script>