axios请求拦截和相应拦截封装，请求函数封装

一、封装request文件

1.封装request文件，请求头和响应头做不同处理

2.封装不同请求方法，包括请求头部content-type。包括get post 或者文件流等等

import axios from 'axios';
import { Message } from 'element-ui';
import qs from 'qs';
const service = axios.create({
    baseURL: '/',
    // baseURL: process.env.BASE_URL,
    timeout: 120000,
});

// 前置拦截器，加入rToken的header参数
service.interceptors.request.use(
    config => {
        let sessionid = sessionStorage.getItem('sessionid');
        // 判断sessionStorage是否存在sessionid，如果存在的话，则每个http header都加上sessionid
        if (sessionid) {
            config.headers.sessionid = sessionid;
            //console.log(config);
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);

// 后置拦截器，拦截403和401
service.interceptors.response.use(
    response => {
        if (!!response.headers.sessionid && !sessionStorage.getItem('sessionId')) {
            sessionStorage.setItem('sessionid', response.headers.sessionid);
        }
        //console.log(response);
        const res = response.data;
        if (res.status && res.status !== 1) {//1 成功  2 失败
            if(res.status == 3) {//提示
                return res;
            }
            Message.closeAll();
            Message({
                showClose: true,
                message: res.msg || 'Error',
                type: 'error',
                customClass: 'zZindex',
            });
            // TODO
            if (res.status === 401) {
                sessionStorage.clear();
                //鉴权不成功返回登录页
                window.location.href = location.protocol + location.hostname + ':' + location.port + '/login';
                console.log('err---401');
            } else if (res.status === 403) {
                console.log('err---403');
            }
            return Promise.reject(new Error(res.msg || 'Error'));
        } else {
            return res;
        }
    },
    error => {
        Message.closeAll();
        Message({
            showClose: true,
            message: error.message || 'Error',
            type: 'error',
            customClass: 'zZindex',
        });
        return Promise.reject(error);
    }
);

const fetch = url => {
    return service({
        method: 'get',
        url: url,
    })
        .then(response => {
            return Promise.resolve(response);
        })
        .catch(error => {
            return Promise.reject(error.message);
        });
};
const fetchDelete = url => {
    return service({
        method: 'delete',
        url: url,
    })
        .then(response => {
            return Promise.resolve(response);
        })
        .catch(error => {
            return Promise.reject(error.message);
        });
};
const fetchPost = (url, params = {}, responseType) => {
    let data = null,
        typeObj = {};
    if (params.notStringify) {
        data = params.value;
    } else {
        data = qs.stringify(params);
    }

    if (responseType && responseType == 'blob') {
        typeObj = { responseType: 'blob' };
    }
    return service({
        method: 'post',
        url: url,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        data,
        ...typeObj,
    })
        .then(function (response) {
            return Promise.resolve(response);
        })
        .catch(error => {
            return Promise.reject(error.message);
        });
};
const fetchPostJson = (url, params = {}) => {
    return service({
        method: 'post',
        url: url,
        headers: {
            'Content-Type': 'application/json',
        },
        data: JSON.stringify(params),
    })
        .then(function (response) {
            return Promise.resolve(response);
        })
        .catch(error => {
            return Promise.reject(error.message);
        });
};
const fetchPut = (url, params = {}) => {
    return service({
        method: 'put',
        url: url,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        data: qs.stringify(params),
    })
        .then(function (response) {
            return Promise.resolve(response);
        })
        .catch(error => {
            return Promise.reject(error.message);
        });
};
const fetchPutJson = (url, params = {}) => {
    return service({
        method: 'put',
        url: url,
        headers: {
            'Content-Type': 'application/json',
        },
        data: JSON.stringify(params),
    })
        .then(function (response) {
            return Promise.resolve(response);
        })
        .catch(error => {
            return Promise.reject(error.message);
        });
};
const uploadFile = (url, params = {}) => {
    console.log(params);
    let data = new FormData();
    Object.keys(params).forEach(key => {
        if (Array.isArray(params[key])) {
            params[key].forEach(item => {
                data.append(key, item.raw);
            });
        } else {
            data.append(key, params[key]);
        }
    });
    return service({
        method: 'post',
        url: url,
        headers: {
            'Content-Type': 'multipart/form-data',
        },
        data: data,
    })
        .then(function (response) {
            return Promise.resolve(response);
        })
        .catch(error => {
            return Promise.reject(error.message);
        });
};
const exportFilePost = (url, params = {}) => {
    return service({
        method: 'post',
        url: url,
        responseType: 'blob',
        data: params,
    })
        .then(function (response) {
            return Promise.resolve(response);
        })
        .catch(error => {
            return Promise.reject(error.message);
        });
};
const exportFile = (url, params = {}) => {
    return service({
        method: 'get',
        url: url,
        responseType: 'blob',
        params: params,
    })
        .then(function (response) {
            return Promise.resolve(response);
        })
        .catch(error => {
            return Promise.reject(error.message);
        });
};
// 单个file 上传
// export const uploadFile = (url, params = {}) => {
//   let data = new FormData()
//   data.append('file', params.file)
//   return Vue.axios({
//     method: 'post',
//     url: url,
//     headers: {
//       'Content-Type': 'multipart/form-data'
//     },
//     data: data
//   })
//     .then(function(response) {
//       return Promise.resolve(response.data)
//     })
//     .catch(error => {
//       if (error.toString().indexOf('timeout') != -1) {
//           '请求超时'
//       } else {
//         return Promise.reject(error.message)
//       }
//     })
// }

/**
 *
 * @param {*} url  请求地址
 * @param {*} method  get, post, file
 * @param {*} params  Object
 */
export const request = ({ url, method, params, responseType }) => {
    let path = url;
    if (method === 'post') {
        return fetchPost(path, params, responseType)
            .then(res => {
                return Promise.resolve(res);
            })
            .catch(error => {
                return Promise.reject(error);
            });
    } else if (method === 'post-json') {
        return fetchPostJson(path, params)
            .then(res => {
                return Promise.resolve(res);
            })
            .catch(error => {
                return Promise.reject(error);
            });
    } else if (method === 'export') {
        return exportFile(path, params)
            .then(res => {
                return Promise.resolve(res);
            })
            .catch(error => {
                return Promise.reject(error);
            });
    } else if (method === 'exportpost') {
        return exportFilePost(path, params)
            .then(res => {
                return Promise.resolve(res);
            })
            .catch(error => {
                return Promise.reject(error);
            });
    } else if (method === 'put') {
        return fetchPut(path, params)
            .then(res => {
                return Promise.resolve(res);
            })
            .catch(error => {
                return Promise.reject(error);
            });
    } else if (method === 'put-json') {
        return fetchPutJson(path, params)
            .then(res => {
                return Promise.resolve(res);
            })
            .catch(error => {
                return Promise.reject(error);
            });
    } else if (method === 'get' || method === 'delete') {
        let query = '';
        let fullUrl = '';
        if (params) {
            let array = [];
            for (let key in params) {
                if (params[key] != null) {
                    array.push(encodeURIComponent(key) + '=' + encodeURIComponent(params[key]));
                }
            }
            query = array.join('&');
            fullUrl = path + '?';
        } else {
            fullUrl = path;
        }
        fullUrl = fullUrl + query;
        if (method === 'get') {
            return fetch(fullUrl)
                .then(res => {
                    return Promise.resolve(res);
                })
                .catch(error => {
                    return Promise.reject(error);
                });
        } else {
            return fetchDelete(fullUrl)
                .then(res => {
                    return Promise.resolve(res);
                })
                .catch(error => {
                    return Promise.reject(error);
                });
        }
    } else if (method === 'file') {
        return uploadFile(path, params)
            .then(res => {
                return Promise.resolve(res);
            })
            .catch(error => {
                return Promise.reject(error);
            });
    }
};
export const BASE_URL = service.defaults.baseURL;

二、具体接口api

在写具体接口api时候，直接定义不同method，即可对应不同request请求方法和请求头部content-type

import { request } from './request';

export const xxxx = params => {
    return request({
        url: prefix + '/xxx/yyy',
        method: 'post-json',
        params,
    });
};