axios请求的封装（包含断网处理，和服务器错误）

下面这块代码是我使用axios封装的多种请求方式，如需使用，直接将下面代码复制到项目中，命名为http.js文件

import axios from 'axios';


export default {    
    /**
     * POST请求
     * @param {string} url 接口地址
     * @param {object} request 请求参数
     * @param {Boolean} isUploadImg 是否上传图片,非必传参数，默认为false
     */
    post(url, request, isUploadImg) {
        const headers = {
            headers: {
                'Content-Type': isUploadImg ? 'multipart/form-data' : "application/json;charset=UTF-8",
                "Authorization":JSON.parse(localStorage.getItem('loginInfo')) ?  'JWT ' +  JSON.parse(localStorage.getItem('loginInfo')).jp_token : '',
            }
        }
        return new Promise((resolve, reject) => {
            axios.post(url , request, headers).then((response) => {
                resolve(response)
            }, (error) => {
                if(error.request.status == 500){
                    var img = new Image();
                    //临时判断网络是否通畅
                    img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
                    img.onload = function () {
                        //('提示','服务器报500了，请检查');
                    };
                    img.onerror = function () {
                        //'提示','断网了，请注意您的网络连接';
                    };
                }else{
                    reject(error)
                }
            });
        });
    },
    /**
     * GET请求
     * @param {string} url 接口地址
     * @param {object} request 请求参数
     */
    get(url, request) {
        const headers = {
            headers: {
                "content-type": "application/json;charset=UTF-8",
                "Authorization": JSON.parse(localStorage.getItem('loginInfo')) ?  'JWT ' +  JSON.parse(localStorage.getItem('loginInfo')).jp_token : '',
            }
        }
        return new Promise((resolve, reject) => {
            axios.get(url, headers, {
                params: request
            }).then((response) => {
                resolve(response)
            }, (error) => {
                if(error.request.status == 500){
                    var img = new Image();
                    //临时判断网络是否通畅
                    img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
                    img.onload = function () {
                        //('提示','服务器报500了，请检查');
                    };
                    img.onerror = function () {
                        //'提示','断网了，请注意您的网络连接';
                    };
                }else{
                    reject(error)
                }
            });
        });
    },
    /**
     * DELETE 请求
     * @param {string} url 接口地址
     * @param {object} request 请求参数
     */
    delete(url, request) {
        const headers = {
            headers: {
                "content-type": "application/json;charset=UTF-8",
                "Authorization": JSON.parse(localStorage.getItem('loginInfo')) ?  'JWT ' +  JSON.parse(localStorage.getItem('loginInfo')).jp_token : '',
            }
        }
        return new Promise((resolve, reject) => {
            axios.delete(url, headers, { params: request}).then((response) => {
                resolve(response)
            }, (error) => {
                if(error.request.status == 500){
                    var img = new Image();
                    //临时判断网络是否通畅
                    img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
                    img.onload = function () {
                        //('提示','服务器报500了，请检查');
                    };
                    img.onerror = function () {
                        //'提示','断网了，请注意您的网络连接';
                    };
                }else{
                    reject(error)
                }
            });
        });
    },
    /**
     * PUT请求
     * @param {string} url 接口地址
     * @param {object} request 请求参数
     * @param {Boolean} isUploadImg 是否上传图片,非必传参数，默认为false
     */
    put(url, request, isUploadImg) {
        const headers = {
            headers: {
                "content-type":  isUploadImg ? 'multipart/form-data' : "application/json;charset=UTF-8",
                "Authorization":JSON.parse(localStorage.getItem('loginInfo')) ?  'JWT ' +  JSON.parse(localStorage.getItem('loginInfo')).jp_token : '',
            }
        }
        return new Promise((resolve, reject) => {
            axios.put(url , request, headers).then((response) => {
                resolve(response)
            }, (error) => {
                if(error.request.status == 500){
                    var img = new Image();
                    //临时判断网络是否通畅
                    img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
                    img.onload = function () {
                        //('提示','服务器报500了，请检查');
                    };
                    img.onerror = function () {
                        //'提示','断网了，请注意您的网络连接';
                    };
                }else{
                    reject(error)
                }
            });
        });
    },
    

    install(Vue) {
        Object.defineProperty(Vue.prototype, '$http', {
            value: {
                post: this.post,
                get: this.get,
                delete: this.delete,
                put: this.put
            }
        })
    }
}

注册

如果使用的是vue项目，可以将接口调用定义在vue原型上，在main.js中引入，避免页面重复引用。

import http from "./utils/http.js";
Vue.prototype.$http = http;

使用

this.$http.post(接口地址，请求参数).then(res => {
    //成功回调               
}).catch(err => {
    //失败回调
})

有不完善的地方，欢迎大家提出意见，大家一起完善