axios的封裝根據需求的不同而不同。這裡非常感謝評論裡一些很中肯的建議，我也對此進行了思考和針對不同需求的改善。主要有以下改變：

1.優化axios封裝，去掉之前的get和post

2.斷網情況處理

3.更加模組化的api管理

4.介面域名有多個的情況

5.api掛載到vue.prototype上省去引入的步驟

http.js中axios封裝的優化，先直接貼程式碼：

/**
 * axios封裝
 * 請求攔截、響應攔截、錯誤統一處理
 */
import axios from 'axios';
import router from '../router';
import store from 
 
'../store/index';
import { Toast } from 'vant';

/** 
 * 提示函式 
 * 禁止點選蒙層、顯示一秒後關閉
 */
const tip = msg => {    
    Toast({        
        message: msg,        
        duration: 1000,        
        forbidClick: true    
    });
}

/** 
 * 跳轉登入頁
 * 攜帶當前頁面路由，以期在登入頁面完成登入後返回當前頁面
 */
const toLogin = () => {
    router.replace({
        path: 
 
'/login',        
        query: {
            redirect: router.currentRoute.fullPath
        }
    });
}

/** 
 * 請求失敗後的錯誤統一處理 
 * @param {Number} status 請求失敗的狀態碼
 */
const errorHandle = (status, other) => {
    // 狀態碼判斷
    switch (status) {
        // 401: 未登入狀態，跳轉登入頁
        case 401:
            toLogin();
            
 
break;
        // 403 token過期
        // 清除token並跳轉登入頁
        case 403:
            tip('登入過期，請重新登入');
            localStorage.removeItem('token');
            store.commit('loginSuccess', null);
            setTimeout(() => {
                toLogin();
            }, 1000);
            break;
        // 404請求不存在
        case 404:
            tip('請求的資源不存在'); 
            break;
        default:
            console.log(other);   
        }}

// 建立axios例項
var instance = axios.create({    timeout: 1000 * 12});
// 設定post請求頭
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/** 
 * 請求攔截器 
 * 每次請求前，如果存在token則在請求頭中攜帶token 
 */ 
instance.interceptors.request.use(    
    config => {        
        // 登入流程控制中，根據本地是否存在token判斷使用者的登入情況        
        // 但是即使token存在，也有可能token是過期的，所以在每次的請求頭中攜帶token        
        // 後臺根據攜帶的token判斷使用者的登入情況，並返回給我們對應的狀態碼        
        // 而後我們可以在響應攔截器中，根據狀態碼進行一些統一的操作。        
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => Promise.error(error))

// 響應攔截器
instance.interceptors.response.use(    
    // 請求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
    // 請求失敗
    error => {
        const { response } = error;
        if (response) {
            // 請求已發出，但是不在2xx的範圍 
            errorHandle(response.status, response.data.message);
            return Promise.reject(response);
        } else {
            // 處理斷網的情況
            // eg:請求超時或斷網時，更新state的network狀態
            // network狀態在app.vue中控制著一個全域性的斷網提示元件的顯示隱藏
            // 關於斷網元件中的重新整理重新獲取資料，會在斷網元件中說明
            store.commit('changeNetwork', false);
        }
    });

export default instance;

這個axios和之前的大同小異，做了如下幾點改變：

1.去掉了之前get和post方法的封裝，通過建立一個axios例項然後export default方法匯出，這樣使用起來更靈活一些。

2.去掉了通過環境變數控制baseUrl的值。考慮到介面會有多個不同域名的情況，所以準備通過js變數來控制介面域名。這點具體在api裡會介紹。

3.增加了請求超時，即斷網狀態的處理。說下思路，當斷網時，通過更新vuex中network的狀態來控制斷網提示元件的顯示隱藏。斷網提示一般會有重新載入資料的操作，這步會在後面對應的地方介紹。

4.公用函式進行抽出，簡化程式碼，儘量保證單一職責原則。

下面說下api這塊，考慮到一下需求：

1.更加模組化

2.更方便多人開發，有效減少解決命名衝突

3.處理介面域名有多個情況

這裡這裡呢新建了一個api資料夾，裡面有一個index.js和一個base.js，以及多個根據模組劃分的介面js檔案。index.js是一個api的出口，base.js管理介面域名，其他js則用來管理各個模組的介面。

先放index.js程式碼：

/** 
 * api介面的統一出口
 */
// 文章模組介面
import article from '@/api/article';
// 其他模組的介面……

// 匯出介面
export default {    
    article,
    // ……
}

index.js是一個api介面的出口，這樣就可以把api介面根據功能劃分為多個模組，利於多人協作開發，比如一個人只負責一個模組的開發等，還能方便每個模組中介面的命名哦。

base.js:

/**
 * 介面域名的管理
 */
const base = {    
    sq: 'https://xxxx111111.com/api/v1',    
    bd: 'http://xxxxx22222.com/api'
}

export default base;

通過base.js來管理我們的介面域名，不管有多少個都可以通過這裡進行介面的定義。即使修改起來，也是很方便的。

最後就是介面模組的說明，例如上面的article.js:

/**
 * article模組介面列表
 */

import base from './base'; // 匯入介面域名列表
import axios from '@/utils/http'; // 匯入http中建立的axios例項
import qs from 'qs'; // 根據需求是否匯入qs模組

const article = {    
    // 新聞列表    
    articleList () {        
        return axios.get(`${base.sq}/topics`);    
    },    
    // 新聞詳情,演示    
    articleDetail (id, params) {        
        return axios.get(`${base.sq}/topic/${id}`, {            
            params: params        
        });    
    },
    // post提交    
    login (params) {        
        return axios.post(`${base.sq}/accesstoken`, qs.stringify(params));    
    }
    // 其他介面…………
}

export default article;

1.通過直接引入我們封裝好的axios例項，然後定義介面、呼叫axios例項並返回，可以更靈活的使用axios，比如你可以對post請求時提交的資料進行一個qs序列化的處理等。

2.請求的配置更靈活，你可以針對某個需求進行一個不同的配置。關於配置的優先順序，axios文件說的很清楚，這個順序是：在 lib/defaults.js 找到的庫的預設值，然後是例項的 defaults 屬性，最後是請求的 config 引數。後者將優先於前者。

3.restful風格的介面，也可以通過這種方式靈活的設定api介面地址。

最後，為了方便api的呼叫，我們需要將其掛載到vue的原型上。在main.js中：

import Vue from 'vue'
import App from './App'
import router from './router' // 匯入路由檔案
import store from './store' // 匯入vuex檔案
import api from './api' // 匯入api介面

Vue.prototype.$api = api; // 將api掛載到vue的原型上

然後我們可以在頁面中這樣呼叫介面，eg：

methods: {    
    onLoad(id) {      
        this.$api.article.articleDetail(id, {        
            api: 123      
        }).then(res=> {
            // 執行某些操作      
        })    
    }  
}

搜尋

複製