axios封装与拦截器使用

一、axios封装：

1.先安装axios ；

npm install --save axios vue-axios

2. 新建一个http.js的文件；

// 基于axios封装，网络请求的函数
import axios from 'axios';
import store from '@/store';
import { Message } from 'element-ui'
import config from './config';

axios.defaults.timeout = 5000;  // 5s后超时
const oaServer = config.baseUrl;    //请求地址，例如：http://192.168.xx.xx:1001/test
// 记录和显示错误
function errorLog (err) {
    // 打印到控制台
    if (process.env.NODE_ENV === 'development') {
        console.log(err);
    }
    // 显示提示
    Message.error(err.message)
}
// http request 请求拦截器
axios.defaults.withCredentials = true;
// api每次调用request都会先走这个请求拦截器
axios.interceptors.request.use(
    // config配置对象（要请求后台的参数都在这个对象上）
    // 在请求前会触发一次，这个return交给axios源码内，根据配置项发起请求
    config => {
        //startLoading()
        if (config.data) {
            // 对象转换成 JSON 字符串
            if (config.data.isJson) {
                config.data = JSON.stringify(config.data.data);
            } 
        }
        let token = window.localStorage.getItem('token'); // 获取token本地存储的值
        if (token && token != 'undefined') {
            // 存在token，即除登陆注册外，把identitytoken添加点请求头中，每次请求携带token传给后端
            config.headers['identitytoken'] = token;
        }
        return config;
    },
    // 请求发起前有异常时进入
    err => {
        // 返回一个拒绝状态的Promis对象
        // 类似catch()里面的return
        // return 非Promise对象值，会作为失败的结果，返回给下一个Promise对象
        return Promise.reject(err);
    }
);

//http response 响应拦截器
axios.interceptors.response.use(
    response => {
        // 响应状态码为2xx、3xx时进入，形参response为成功的结果
        // 这里的response.data.code表示的是接口不会报错且返回正常，返回数据中的code字段为400、500
        if(response.data.code == '400' || response.data.code == '500'){
            return response;
        }
        // response.data.errCode:2后端定义的意外情况
        if (response.data.errCode == 2) {
            router.push({
                path: '/login',
                querry: { redirect: router.currentRoute.fullPath }, //附上当前 fullPath 用于登录完成后转跳回原来页面
            });
        }
        return response;
    },
    error => {
        // 响应状态码为4xx、5xx时进入，即接口报错，形参error为失败的结果
        // 如果后端用try+catch或者catch函数捕获，可以捕获到我们传递过去的这个error变量的值
        if(!error || !error.response){
            Message.error('网络连接失败！')
            Promise.reject(error);
            return error;
        }
        const {status} = error.response;    //解构赋值 状态码
		const {msg} = error.response.data;  //错误信息
        // 公共错误处理
        switch (status) {
            case 400: error.message = msg || '请求错误'; break;
            case 401: error.message = msg || '未授权，请登录'; break;
            case 403: error.message = msg || '拒绝访问'; break;
            case 404: error.message = msg || `请求地址出错: ${error.response.config.url}`; break;
            case 408: error.message = msg || '请求超时'; break;
            case 500: error.message = msg || '服务器内部错误'; break;
            case 501: error.message = msg || '服务未实现'; break;
            case 502: error.message = msg || '网关错误'; break;
            case 503: error.message = msg ||  '服务不可用'; break;
            case 504: error.message = msg ||  '网关超时'; break;
            case 505: error.message = msg ||  'HTTP版本不受支持'; break;
            default: break;
        }
        errorLog(error); // 记录和显示错误
        if (status === 401) {
            // 本次响应是token过期
            //清除token
            store.commit('logout');
            //重新登录
            window.location.href = '/login';
        }
        return Promise.reject(error);
    }
);

/**
 * 封装get方法
 * @param url
 * @param params：对象和参数会拼接在url?后面给后台（query查询字符串）
 * @returns {Promise}
 */

export function fetch(url, params = {}, server) {
    if (!!server) {
        url = server + url;
    } else {
        // 如果有其他路径可以在这里判断拼接
    }
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: params,
            })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err);
            });
    });
}

/**
 * 封装post请求
 * @param url
 * @param params
 * @returns {Promise}
 */

export function post(url, data = {}, server) {
    if (!!server) {
        url = server + url;
    } 
    return new Promise((resolve, reject) => {
        var params = { isJson: true, data: data };
        axios.post(url, params, { headers: { 'Content-Type': 'application/json' } }).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

/**
 * 封装post请求：表单提交
 * @param url
 * @param data
 * @returns {Promise}
 */

export function postForm(url, data = {}, server) {
    if (!!server) {
        url = server + url;
    } 
    return new Promise((resolve, reject) => {
        var params = { isJson: false, data: data };
        axios.post(url, params).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

/**
 * 封装patch请求：更新局部资源
 * @param url
 * @param data：会拼接欸在请求体（body参数）
 * @returns {Promise}
 */

export function patch(url, data = {}, server) {
    if (!!server) {
        url = server + url;
    } 
    return new Promise((resolve, reject) => {
        axios.patch(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url, data = {}, server) {
    if (!!server) {
        url = server + url;
    } 
    return new Promise((resolve, reject) => {
        axios.put(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

3.在接口文件中使用封装的axios；

import { post, postForm, fetch } from '@/js/http'

// 登录
export const login = params => { return post('/lemon/login', params) }
// 修改密码
export const savePassword = params => { return postForm('/lemon/save', params) }
// 获取列表
export const getList = params => { return fetch('/lemon/getList', params) }