axios二次封装

request.js

// http.js
import axios from 'axios'
// 引入路由
import router from '../router/index'
// 引入vuex
import store from '../store/index';
// 引入提示组件
import { MessageBox, Message } from 'element-ui'
// 引入api
import apiList from './apiList'
// 引入QS
import Qs from 'qs'

/**
 * @param {String} httpUrl [baseUrl] 
**/
let httpUrl = ' dmin'//(测试环境)
// 配置请求
axios.defaults.baseURL = httpUrl // 配置请求地址
axios.defaults.withCredentials = false
axios.defaults.timeout = 30000; // 超时终止请求
// 请求拦截器
axios.interceptors.request.use(config => {
    console.log(config)

    // 每次发送请求之前判断vuex中是否存在token        
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
    // 请求消息头
    let Authorization = 'Authorization'
    // 获取token
    let token = store.state.token;    
    if(token){
        config.headers[Authorization] = token
    }else{
        config.headers[Authorization] = window.sessionStorage.getItem('token')
    }
    if(config.method == 'post'){
        config.data = Qs.stringify(config.data)
    }
    return config
},err => {
    return Promise.error(error);
})

// 根据不同的状态码，生成不同的提示信息
const showStatus = (status) => {
    let message = ""
    // 这一坨代码可以使用策略模式进行优化
    switch(status){
        case 400:
            message = "请求错误(400)"
            break
        case 401:
            message = "未授权，请重新登录(401)"
            break
        case 403:
            message = "拒绝访问(403)"
            break
        case 404:
            message = "请求出错(404)"
            break
        case 408:
            message = "请求超时(408)"
            break
        case 500:
            message = "服务器错误(500)"
            break
        case 501:
            message = "服务未实现(501)"
            break
        case 502:
            message = "网络错误(502)"
            break
        case 503:
            message = "服务不可用(503)"
            break
        case 504:
            message = "网络超时(504)"
            break
        case 505:
            message = "HTTP版本不受支持(505)"
            break
        default:
            message = `连接出错(${status})!`
    }
    return `${message}，请检查网络或联系管理员！`
}

// 响应拦截器
axios.interceptors.response.use(response => {
    if(response.data.code == 1001){
        MessageBox.confirm("登录令牌失效，请重新登录",'提示' + response.data.code,{
            confirmButtonText:'确定',
            showCancelButton:false,
            type:'warning',
            customClass:'warningTip',
            closeOnClickModal:false
        }).then(() => {
            router.push('/login')
        }).catch(() => {
        });
    }else if(response.data.code > 1001 || response.data.code < 1000){
        let msg = showStatus(response.data.code)
        Message.error(msg)
    }
    return Promise.resolve(response.data);
},error => {//这里对 error 预期结果是包含具体错误信息和状态码
    if(error && error.response && error.response.status){
        MessageBox.confirm(error.response.data.message,'提示' + error.response.data.code,{
            confirmButtonText:'确定',
            showCancelButton:false,
            type:'warning',
            customClass:'warningTip',
            closeOnClickModal:false
        }).then(() => {
        }).catch(() => {
        });
    }
    return Promise.reject(error)
})

/**
 * @param {Object} hrrpSever [保存请求的方法]
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
**/
// 以下是封装方法：
var httpSever = {};
for(let item in apiList){
    httpSever[item] = function(params){
        let {method,url} = apiList[item];
        let data = (method == 'get' || method == "delete") ? {params} : (method == 'post' || method == "put" || method == "patch") ? params : {}
        return new Promise((resolve, reject) => {
            axios[method](url,data).then(res => {
                if(res){
                    resolve(res);
                }
            }).catch(err => {
                reject(err);
            })
        })
    }
}
/**
 * 使用方法：
 * 组件引入httpSever然后httpSever打点调用方法名的形式使用
**/
export default httpSever

apiList.js

// 引入模块
import moduleA from './api/moduleA'
import moduleB from './api/moduleB'
const modules = {
	moduleA,
	moduleB
}
function parseUrl(){
	let res = {}
	for(let key in modules){
		let item = modules[key]
		for(let k in item){
            res[k] = item[k]
		}
	}
	return res
}
export default parseUrl()

./api/moduleA.js

/**
 * @param {string} key [发送请求的函数名称]
 * @param {Object} value [保存请求的方法和路径]
**/
let moduleA = {
    productList:{
        method:'post',
        url:"/ProductManage/list"
    },
    MerchantManageList:{
        method:'post',
        url:"/MerchantManage/list"
    },
    D:{
        method:'delete',
        url:"/d"
    }
}
export default moduleA;

使用方法：
组件引入httpSever然后httpSever打点调用方法名的形式使用

注意：该方法同时封装了get\delete\post\put\patch请求
有需要的可以使用