axios 请求拦截及响应拦截

前端采用了axios来处理网络请求，为了避免在每次请求时都去判断各种各样的网络情况，比如连接超时、服务器内部错误、权限不足等等不一而足，我对axios进行了简单的封装，这里主要使用了axios中的拦截器功能。

// 请求拦截（配置发送请求的信息）
axios.interceptors.request.use(function (config){
 // 处理请求之前的配置
 return config;
 }, function (error){
 // 请求失败的处理
 return Promise.reject(error);
 });


// 响应拦截（配置请求回来的信息）
axios.interceptors.response.use(function (response){
 // 处理响应数据
 return response;
 }, function (error){
 // 处理响应失败
 return Promise.reject(error);
 });

封装后的网络请求工具js如下

import axios from 'axios'
import { Toast } from 'mint-ui'
//请求时的拦截
axios.interceptors.request.use(config => {
    return config;
}, err => {
    Toast('请求超时!' );
    return Promise.resolve(err);
})
//响应时的拦截
axios.interceptors.response.use(data => {
    // 返回响应时做一些处理
    if (data.status && data.status == 200 && data.data.status == 'error') {
        Toast(data.data.msg);
        return data;
    }
    return data;
},err => {
    // 当响应异常时做一些处理
    if (err && err.response) {
        switch (err.response.status) {
            case 400: err.message = '请求错误(400)'; break;
            case 401: err.message = '未授权，请重新登录(401)'; break;
            case 403: err.message = '拒绝访问(403)'; break;
            case 404: err.message = '请求出错(404)'; break;
            case 408: err.message = '请求超时(408)'; break;
            case 500: err.message = '服务器错误(500)'; break;
            case 501: err.message = '服务未实现(501)'; break;
            case 502: err.message = '网络错误(502)'; break;
            case 503: err.message = '服务不可用(503)'; break;
            case 504: err.message = '网络超时(504)'; break;
            case 505: err.message = 'HTTP版本不受支持(505)'; break;
            default: err.message = `连接出错(${err.response.status})!`;
        }
    } else {
        err.message = '连接服务器失败!'
    }
    Toast(err.message);
    return Promise.resolve(err);
})

//如果需要可以封装一些请求的方法
let base = '';

export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret = ''
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
}
export const uploadFileRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    });
}
export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret = ''
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
}
export const deleteRequest = (url) => {
    return axios({
        method: 'delete',
        url: `${base}${url}`
    });
}
export const get = (url,params) => {
    return axios({
        method: 'get',
        url: `${base}${url}?`,
        params: params,
        headers:{
            'Content-Type': 'application/x-www-form-urlencoded',
            'Access-Token': localStorage.getItem("AccessToken")
        }
    });
}