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 檔案中引入

寫給自己的随筆，有問題歡迎指出(Θ▽Θ)