美文网首页
axios封装一个完整的http.js

axios封装一个完整的http.js

作者: 糖小羊儿 | 来源:发表于2021-03-12 11:49 被阅读0次

    调用方法

    • get
    //没有参数
    this.http.get('/user/login').then(res=>{})
    //有参数
    this.http.get('/user/login',{username:'xiaoming'}).then(res=>{})
    //配置传参
    this.http.get({
        url:'/user/login',
        data:{username:'xiaoming'},
        type:'',// responseType类型,比如 blob  或者 json(默认)
        timeout:'',//默认5000
    }).then(res=>{})
    
    • longGet 请求等待时间较长,比普通请求多了一个loading
    //没有参数
    this.http.longGet('/user/login').then(res=>{})
    //有参数
    this.http.longGet('/user/login',{username:'xiaoming'}).then(res=>{})
    //有提示信息
    this.http.longGet('/user/login',{username:'xiaoming'},'正在登录,请稍等').then(res=>{})
    //配置传参
    this.http.longGet({
        url:'/user/login',
        data:{username:'xiaoming'},
        type:'',// responseType类型,比如 blob  或者 json(默认)
        timeout:'',//默认5000
        message:'',//等待提示信息
    }).then(res=>{})
    

    post 和 longPost 同get 和longGet 用法类似

    http.js代码如下

    import Axios from "axios";
    import qs from "qs";
    import ElementUI from "element-ui";
    import "element-ui/lib/theme-chalk/index.css";
    
    let http = Axios.create({
        headers: {
            "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
    });
    http.defaults.baseURL = '';
    // 添加请求拦截器
    http.interceptors.request.use(
        function (config) {
            let token = localStorage.getItem("token");
            if (token) {
                config.headers.token = localStorage.getItem("token");
            }
            config.url = config.baseURL + config.url;
            config.data = qs.stringify(config.data);
            // 在发送请求之前做些什么
            return config;
        },
        function (error) {
            console.log(error);
            // 对请求错误做些什么
            // return Promise.reject(error)
        }
    );
    // 添加响应拦截器
    http.interceptors.response.use(
        function (response) {
            if (!response) {
                return false;
            }
            if (response.data && response.data.code) {
                if (response.data.code == 201) {
                    ElementUI.Message({
                        showClose: true,
                        message: response.data.message,
                        type: "error",
                        offset: 100,
                        duration: 2000,
                    });
                    return;
                } else if (response.data.code == 401) {
                    window.location.href = GLOBAL_CONFIG.baseLogin;
                    return;
                }
            }
            // 对响应数据做点什么
            if (response && response.data) {
                return response.data;
            }
            return false;
        },
        function (error) {
            // 对响应错误做点什么
            console.log("超时");
            return;
        }
    );
    
    function longRequestHttp(arg, method) {
        let nullPromise = new Promise((resolve, reject) => {
                resolve(false);
            }),
            argType = checkArgModeArg(arg),
            dataKey = method == 'get' ? 'params' : 'data';
        if (!argType) {
            return nullPromise;
        }
        if (argType == 1) { //第一种传参方式
            let options = {
                    lock: true,
                    text: arg[2] || "处理中,请稍等",
                    spinner: "el-icon-loading",
                    background: "rgba(255,255,255,0)",
                    customClass: "loadingMask",
                },
                loading = ElementUI.Loading.service(options)
            return http({
                url: arg[0] || '',
                [dataKey]: arg[1] || {},
                method: method,
                responseType: 'json',
                timeout: 600000,
            }).then((res) => {
                loading.close();
                return res;
            });
        } else if (argType == 2) { //第二种传参方式
            let options = {
                lock: true,
                text: arg[0].message || "处理中,请稍等",
                spinner: "el-icon-loading",
                background: "rgba(255,255,255,0)",
                customClass: "loadingMask",
            }
            let loading = ElementUI.Loading.service(options);
            return http({
                url: arg[0].url,
                [dataKey]: arg[0].data || {},
                method: method,
                responseType: arg[0].type || 'json',
                timeout: arg[0].timeout || 600000,
            }).then((res) => {
                loading.close();
                return res;
            });
        } else {
            return nullPromise;
        }
    }
    
    function requestHttp(arg, method) {
        let nullPromise = new Promise((resolve, reject) => {
                resolve(false);
            }),
            argType = checkArgModeArg(arg),
            dataKey = method == 'get' ? 'params' : 'data';
        if (!argType) {
            return nullPromise;
        }
        if (argType == 1) { //第一种传参方式
            return http({
                url: arg[0] || '',
                [dataKey]: arg[1] || {},
                method: method,
                responseType: 'json',
                timeout: 5000,
            });
        } else if (argType == 2) { //第二种传参方式
            return http({
                url: arg[0].url,
                [dataKey]: arg[0].data || {},
                method: method,
                responseType: arg[0].type || 'json',
                timeout: arg[0].timeout || 5000,
            });
        } else {
            return nullPromise;
        }
    }
    export default {
        /*
        get post 两种传参方式:url,data={} 或者 {url:'',data:{},type:'',timeout:0}
        longGet longPost 两种传参方式:url,data={},message='' 或者 {url:'',data:{},type:'',timeout:0,message:''}
        */
        get(...arg) {
            return requestHttp(arg, 'get');
        },
        post(...arg) {
            return requestHttp(arg, 'post');
        },
        longGet(...arg) {
            return longRequestHttp(arg, 'get');
        },
        longPost(...arg) {
            return longRequestHttp(arg, 'post');
        },
        //一个并发请求,一次可以请求多个 http请求
        moreHttp(option) {
            let arr = [],
                keys = [];
            for (let key in option) {
                keys.push(key);
                arr.push(option[key]);
            }
            return Axios.all(arr).then(
                Axios.spread(function () {
                    let result = {};
                    for (let i = 0; i < arguments.length; i++) {
                        let item = arguments[i];
                        if (item) {
                            if (item.data && item.data.data) {
                                result[keys[i]] = item.data.data;
                            } else {
                                result[keys[i]] = item;
                            }
                        }
                    }
                    return result;
                })
            );
        },
    };
    
    function checkArgModeArg(arg) {
        if (isEmptyObject(arg)) {
            return false;
        }
        if (arg.length == 1) {
            //如果只有一个参数:有两种可能,一种是字符串(url),一种是json
            if (isArrayOrObj(arg[0]) == 'object') {
                //参数为配置型
                return 2;
            }
        }
        return 1;
    }
    //判断json或者数组是否为空,如果为空返回true
    function isEmptyObject(obj) {
        if (!obj) {
            return true;
        }
    
        let type = isArrayOrObj(obj);
        if (!type) {
            return true;
        }
        if (type == "array") {
            let re = obj.length && obj.length > 0 ? false : true;
            return re;
        }
        for (let key in obj) {
            return false;
        }
        return true;
    }
    //判断一个变量是数组还是json
    function isArrayOrObj(arg) {
        if (typeof arg == "object") {
            //[object Array] [object Object]
            if (Object.prototype.toString.call(arg) == "[object Array]") {
                return "array";
            }
            if (Object.prototype.toString.call(arg) == "[object Object]") {
                return "object";
            }
        }
        return false;
    }
    

    相关文章

      网友评论

          本文标题:axios封装一个完整的http.js

          本文链接:https://www.haomeiwen.com/subject/rufzqltx.html