axios的二次封装

在utils文件夹下新建一个request.js文件

import axios from "axios";

// "请求" 拦截器
axios.interceptors.request.use(config => {
    // 设置token
    // ...
    return config
}, error => {
    return Promise.reject(error)
})

// "响应" 拦截器
axios.interceptors.response.use(response => {
    // 获取token并把token放在缓存中
    // ...
    return response;
}, err => {
    // 异常处理，请求的错误判断,根据不同的错误码不同消息提醒
    if (err && err.response) {
        switch (err.response.status) {
            case 400:
                err.message = '错误请求'
                break;
            case 401:
                err.message = '未授权，请重新登录'
                // 设置路由跳转
                // ...
                break;
            case 403:
                err.message = '登录过期，请重新登录'
                // 清除token
                // localStorage.removeItem('token');
                // 设置路由跳转
                // ...
                break;
            case 404:
                // 设置路由跳转
                // ...
                err.message = '请求错误,未找到该资源'
                break;
            case 405:
                err.message = '请求方法未允许'
                break;
            case 408:
                err.message = '请求超时'
                break;
            case 500:
                err.message = '服务器端出错'
                break;
            case 501:
                err.message = '网络未实现'
                break;
            case 502:
                err.message = '网络错误'
                break;
            case 503:
                err.message = '服务不可用'
                break;
            case 504:
                err.message = '网络超时'
                break;
            case 505:
                err.message = 'http版本不支持该请求'
                break;
            default:
                err.message = `连接错误${err.response.status}`
        }
    } else {
        err.message = "连接到服务器失败"
    }
    err.response.data.msg=err.message
    return Promise.resolve(err.response)
})

export default {
    get:function (url,headers,params={}) {
        return new Promise((resolve) => {
            axios({
                url: url,
                method: "get",
                params:params,
                headers: headers,
            }).then(resp => {
                resolve(resp.data)
            }).catch(err => {
                alert(err)
            })
        })
    },

    post:function (url,headers,data={}) {
        //设置token值
        headers.token=sessionStorage.getItem('token')
        return new Promise((resolve) => {
            axios({
                url: url,
                method: "post",
                data:data,
                timeout:10000,
                headers: headers,
            }).then(resp => {
                resolve(resp.data)
            }).catch(err => {
                alert(err)
            })
        })
    },

    //判断是对象还是数组
    isArrayFn:function(value)
    {
        if (typeof Array.isArray === "function") {
            return Array.isArray(value);
        } else {
            return Object.prototype.toString.call(value) === "[object Array]";
        }
    }
}

调用方法：

<script>
	import axios from "../utils/request"
	export default {
        name: "ServicePage",
        mounted(){
                let url="请求接口"  
                let headers={
                    //请求头
                }
                let params={
               		//请求参数
           	    }
           	    axios.get(url,headers).then((data)=>{
			        if (data.success) {
			          // 成功时返回的数据
			          console.log(data.result)
			        } else {
			          // 错误信息
			          console.log(data.msg)
			        }
		      	})  
		}        
	}
</script>