Axios 请求在 Vue 项目中的封装（Vue + ElementUI + Axios）

一、版本说明 

"vue": "^2.5.2",
"axios": "^0.18.1",
"element-ui": "^2.5.4"
           

二、 封装 Axios  

import axios from 'axios';
import Vue from 'vue';
import router from './router';

import {
  showFullScreenLoading,
  tryHideFullScreenLoading,
} from './api/servicesHelp'

//未登录标志
let errFlag = false;

export const service = axios.create({
    baseURL: "http://xx.xx.xx.xx:xxxx/",   // 请求地址
    timeout: 1000 * 10,                    // 请求时间限制
    withCredentials: true,
    headers: {
        'Cache-Control': 'no-cache',        // 清除缓存
        'Pragma': 'no-cache'
    }
})

// request拦截器
service.interceptors.request.use(config => {
    // 设置请求头 Accept
    config.headers.Accept = "application/json, text/plain, */*";
    // 请求时，打开加载效果
    if (config.showLoading) {
       showFullScreenLoading()
    } 
    return config
}, error => {
    return Promise.reject(error)
})

// response拦截器
service.interceptors.response.use(response => {
    // 请求成功响应时，即请求结束，关闭加载效果
    if (response.config.showLoading) {
        tryHideFullScreenLoading()
    }
    
    // 初始化未登录标志 -- 可选
    if (response.data.status == 200 && response.config.url.indexOf('/user/customer/login') != '-1') {
        errFlag = false;
    }

    // 限制提示框弹出一次 -- 可选
    if (response.data.status == 401 && !errFlag) {
        errFlag = true;
        localStorage.removeItem("user");
        Vue.prototype.$alert(response.data.info, '警告', {
            confirmButtonText: '请重新登录',
            callback: action => {
                window.whetherLoginFlag = false; // 初始化登录标志，根据实际情况修改
                router.push('/'); // 登录路由地址
            }
        });
        
        return
    }
    return response;
}, error => {
    // 请求返回错误码时，关闭加载效果
    tryHideFullScreenLoading()
    // console.log(error)
    if (error && error.response) {
        switch (error.response.status) {
                case 400: error.message = '请求错误(400)'; break;
                case 401: error.message = '未授权,请登录(401)'; break;
                case 403: error.message = '拒绝访问(403)'; break;
                case 404: error.message = `请求地址出错: ${error.response.config.url}`; break;
                case 405: error.message = '请求方法未允许(405)'; break;
                case 408: error.message = '请求超时(408)'; break;
                case 500: error.message = '服务器内部错误(500)'; break;
                case 501: error.message = '服务未实现(501)'; break;
                case 502: error.message = '网络错误(502)'; break;
                case 503: error.message = '服务不可用(503)'; break;
                case 504: error.message = '网络超时(504)'; break;
                case 505: error.message = 'HTTP版本不受支持(505)'; break;
                default: error.message = `连接错误: ${error.message}`; 
            }
    } else {
        error.message = '连接到服务器失败，请联系管理员'
    }

    if (!errFlag){
        errFlag = true;
        // 用户未登录时，跳转到登录页
         Vue.prototype.$alert(error.message, '警告', {
                confirmButtonText: '确定',
                callback: action => {
                     // 用户未登录时，跳转到登录页 ，根据实际情况修改
                    if(localStorage.getItem("user") == null) {
                        router.push('/');
                    }
                    
                }
         }); 
        return;
    }
    
    return Promise.reject(error)
}
)
           

2.1、 'servicesHelp.js' 文件中的内容，参考这里

三、请求接口时的使用方法（如 get、post）

3.1、单个组件引入使用

3.2、全局引入使用

main.js 文件中引入

写给自己的随笔，有问题欢迎指出(Θ▽Θ)