uniapp请求封装

原创
06/29 11:51
阅读数 1.3K

uniapp请求封装

更新时间:2020-06-29 20:54

一.需求场景

uniapp官方的网络请求api间接,但是在实际项目使用中需要使用的用户token,请求地址url和请求参数;同时,后端要求的是restful请求风格,需要对请求方法进行简单的封装.

二.解决方案

1.在项目中建立common文件夹

说明:这个文件夹的命名是参考官方demo程序创建的.

2.在common文件夹中创建封装请求库,tsRequest.js

3.封装代码,如下

/** CONFIG: 请求头默认配置 */
const CONFIG = {
    url: "",
    data: {},
    method: "GET",
    header: {
        "Content-Type": "application/json;charset=UTF-8"
    },
    dataType: "json"
}
/** option: 请求头变量配置 */
var option = {
    url: "",
    data: {},
    method: "",
    header: "",
    dataType: "json"
};

export default {
    /**
     * Title: get请求
     * Description: get请求,获取资源数据
     * Param: url:请求地址;data:请求参数
     * Return: 封装好的请求体
     */
    get(url, data, header, dataType) {
        option.url = url;
        option.data = data;
        // option.method = "GET";
        option.header = header;
        option.dataType = dataType;
        return this.request(option);
    },
    /**
     * Title: post请求
     * Description: post请求,新建资源数据
     * Param: url:请求地址;data:请求参数
     * Return: 封装好的请求体
     */
    post(url, data, header, dataType) {
        // debugger
        option.url = url;
        option.data = data;
        option.method = "POST";
        option.header = header;
        option.dataType = dataType;
        return this.request(option);
    },
    /**
     * Title: put请求
     * Description: put请求,更新资源数据
     * Param: url:请求地址;data:请求参数
     * Return: 封装好的请求体
     */
    put(url, data, header, dataType) {
        option.url = url;
        option.data = data;
        option.method = "PUT";
        option.header = header;
        option.dataType = dataType;
        return this.request(option);
    },
    /**
     * Title: delete请求
     * Description: delete请求,删除资源数据
     * Param: url:请求地址;data:请求参数
     * Return: 封装好的请求体
     */
    delete(url, data, header, dataType) {
        option.url = url;
        option.data = data;
        option.method = "DELETE";
        option.header = header;
        option.dataType = dataType;
        return this.request(option);
    },
    /**
     * Title: 基础网络请求
     * Description: 封装uniapp自带的网络请求
     * Param: option:封装好的option对象
     * Return: 返回请求到的数据
     */
    request(option) {
        option.header = option.header || CONFIG.header;
        option.url = option.url || CONFIG.url;
        option.data = option.data || CONFIG.url;
        option.method = option.method || CONFIG.method;
        option.dataType = option.dataType || CONFIG.dataType;
        
        return new Promise((resolve, reject) => {
            uni.request({
                header: option.header,
                url: option.url,
                data: option.data,
                method: option.method,
                dataType: option.dataType,
                success(res) {
                    // console.log("tsRequest-success:"+res.statusCode);
                    if(res.statusCode != 200){
                        uni.hideLoading();
                        if (res.statusCode == 401) {
                            uni.showToast({
                                title:"状态码:401",
                                icon:"none",
                                duration:3000
                            });
                        } else if(res.statusCode == 403){
                            uni.showToast({
                                title:"状态码:403",
                                icon:"none",
                                duration:3000
                            });
                        }else if(res.statusCode == 404){
                            uni.showToast({
                                title:"状态码:404",
                                icon:"none",
                                duration:3000
                            });
                        }else{
                            uni.showToast({
                                title:"状态码:"+res.statusCode,
                                icon:"none",
                                duration:3000
                            });
                        }
                    }else{
                        // console.log("2");
                        resolve(res);
                    }
                    
                },
                fail(err) {
                    uni.hideLoading();
                    // console.log("tsRequest-fail:"+JSON.stringify(err));
                    if(err.errMsg == "request:fail"){
                        uni.showToast({
                            title:"网络连接失败,请检查设备的网络通信是否正常",
                            icon:"none",
                            duration:4000
                        });
                    }else{
                        uni.showToast({
                            title:"网络请求失败,请联系管理员",
                            icon:"none"
                        });
                    }
                    reject(err);
                }
            });
        });
    },
}

说明:

1.常量CONFIG是整个系统默认的请求设置;

2.全局变量option是针对每个请求特定设置的参数,每次都会被设置;

3.实例中封装了get,post,put和delete四种请求方式,其他的请求方式请参考uniapp请求api,各有差异;链接:https://uniapp.dcloud.io/api/request/request

4.实例中对4xx状态码和无网络状态仅做了简单的提示,开发人员可以根据自己的实际情况做相应的处理;

4.调用示例

4.1将tsRequest.js挂载到Vue原型链上,修改main.js中的代码;

// 挂载封装好的网络请求request库
import tsRequest from "./common/tsRequest.js"
Vue.prototype.$http = tsRequest

4.2在相应的页面中调用网络请求,这里以获取图形验证码为示例;

async getCode() {
    uni.showLoading({
        title: "加载中"
    });
    this.codeStr = "";
    let url = this.$api.HOST + this.$api.CODE;
    let data = {};
    let that = this;
    await this.$http.get(url, data).then(
      function(res) {
        // console.log("login.vue_res:"+JSON.stringify(res));
        if (res.statusCode == 200) {
            uni.hideLoading();
            that.codeImg = res.data.data.code;
        }
        // console.log("login.vue:" + JSON.stringify(res));
    },
      function(err) {
        console.log("login.vue_err:" + JSON.stringify(err));
    });
}

说明:

1.封装返回的请求体是一个Promise对象;

2.let data变量必须是{}字面量对象,如果定义为null,则会在程序中报错;

3.let that对象最好定义,因为调用this.$http之后,this就被修改了;

以上就是对uniapp请求的简单封装,不足之处,还望见谅.

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部