對axios做一個簡單的封裝和實現(xiàn)的思路，主要實現(xiàn)：

• 統(tǒng)一捕獲接口報錯（攔截器）
• 基礎(chǔ)驗證 （auth）

import axios from 'axios'
// 最基本的全局配置
const instance = axios.create({
    baseURL: "https://movie.douban.com/j/",
    timeout: 2500
})

// Add a request interceptor， 發(fā)送請求之前
instance.interceptors.request.use( (config) => {
    //add auth
    return config;
},  (error) => {
    return Promise.reject(error);
});

// Add a response interceptor
instance.interceptors.response.use( (response) => {
    // 返回錯誤判斷(服務(wù)器端定義的err code)
    //保存auth token
    return response;
},  (error) => {
    // 可以在后面的請求中catch
    return Promise.reject(error);
});

下面是最基本的請求：

//可以參考定義post， put， delete
const requests = {
    get: url =>
        instance.get(url)
            .then(res => {
                console.log(res)
                return res.data
            })
}

上面是基本的網(wǎng)絡(luò)配置。

接下來就可以針對不用的模塊，去發(fā)送不同的請求：

const Movies = {
    all: () => requests.get('/new_search_subjects?tags=%E4%B8%AD%E5%9B%BD&start=0')
}
export default {
    Movies,
}

如上，可以將電影模塊所有相關(guān)的網(wǎng)絡(luò)請求都放在同一個對象里面。

const click_button = () => {
    agent.Movies.all().then()
        .catch()
        .finally()
}

在組件中就可以調(diào)用如下函數(shù)，進行數(shù)據(jù)處理，異常處理。finally可用作loading的取消等等。
注意：如果response有錯誤在interceptors被catch，那么后續(xù)的then將不會被調(diào)用。這個點可以用作對用戶的錯誤請求提示，而不必在每個請求后手動添加catch。

關(guān)于finally的使用：
npm install axios promise.prototype.finally --save先安裝依賴。
之后如下調(diào)用，即可使用finally。

import promiseFinally from 'promise.prototype.finally'

promiseFinally.shim();

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

各業(yè)務(wù)不同，因此只是簡寫大概，歡迎交流。

參考資料：
給axios做個挺靠譜的封裝(報錯,鑒權(quán),跳轉(zhuǎn),攔截,提示)
mobx組織實踐和http封裝組織
axios 配置finally

github：https://github.com/yunshuipiao