Axios Then詳解

一、基礎使用

axios是目前最為流行的一款http請求庫，也成為了前端中常用的請求工具之一。Axios Then是axios中處理Promise的一種方式，它可以簡化代碼、規範代碼語法。

首先我們需要安裝axios：

npm install axios

然後我們可以使用axios來發起一個GET請求：

axios.get('/user').then(res => {
    console.log(res);
});

這個請求中，我們使用了.then()方法用來處理返回的Promise。當請求返回成功時，我們就可以在這個方法中處理伺服器返回的數據了。如果請求返回失敗了，我們還可以使用.catch()方法來處理返回的錯誤：

axios.get('/user').then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
});

這個例子中，我們使用.catch()方法來處理請求錯誤。在.catch()中，我們可以將請求錯誤的信息輸出到控制台上，方便我們進行調試。

二、Axios Then的用法

除了基礎使用中的.then()和.catch()外，Axios Then還提供了其他方法來幫助我們處理Promise。下面是一些常用的方法：

1. .finally()

如果我們需要在請求結束後執行一些代碼，無論請求是成功還是失敗，我們就可以使用.finally()方法。這個方法會在請求結束後，不論請求成功還是失敗，都會執行指定的代碼：

axios.get('/user').then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
}).finally(() => {
    console.log('請求結束');
});

2. .all()

如果我們需要並發多個請求，等到所有請求結束後再進行處理，我們就可以使用.all()方法。這個方法接收一個Promise數組作為參數，等到所有Promise都成功時，它會將所有Promise的結果放在一個數組中返回；如果有一個Promise失敗了，它就會返回失敗的那個Promise的錯誤信息：

axios.all([
    axios.get('/user'),
    axios.get('/post')
]).then(axios.spread((user, post) => {
    console.log(user);
    console.log(post);
})).catch(err => {
    console.log(err);
});

需要注意的是，在.then()方法中，我們使用了axios.spread()方法來將請求的結果拆分為不同的變數，方便我們進行處理。

3. .spread()

如果我們不希望在.then()方法中使用axios.spread()方法來拆分請求結果，我們也可以直接使用.spread()方法來處理Promise。這個方法會將請求結果拆分為不同的變數，方便我們進行處理：

axios.all([
    axios.get('/user'),
    axios.get('/post')
]).spread((user, post) => {
    console.log(user);
    console.log(post);
}).catch(err => {
    console.log(err);
});

三、Axios Interceptors的用法

Axios Interceptors是axios中的攔截器，它可以幫助我們在請求前或請求後進行處理。Axios Interceptors分為兩類，分別是請求攔截器和響應攔截器：

1. 請求攔截器

請求攔截器可以用來在請求發送前進行一些處理，比如給請求添加一些header信息：

axios.interceptors.request.use(config => {
    config.headers.token = 'xxxx';
    return config;
});

這個例子中，我們使用了axios.interceptors.request.use()方法來添加一個請求攔截器。在這個請求攔截器中，我們給請求添加了一個名為token的header信息，這樣在發送請求時，就會自動帶上這個header信息。

2. 響應攔截器

響應攔截器可以用來在請求結束後進行一些處理，比如判斷請求是否成功等：

axios.interceptors.response.use(res => {
    if (res.status === 200) {
        return res.data;
    } else {
        return Promise.reject(res);
    }
});

這個例子中，我們使用了axios.interceptors.response.use()方法來添加一個響應攔截器。在這個響應攔截器中，我們判斷了請求的狀態碼，如果是200，就返回請求的數據；否則，就返回失敗的Promise，這樣我們就可以在.catch()方法中進行處理了。

小結

本文主要介紹了axios的.then()方法和Axios Then的用法，以及Axios Interceptors的用法，讓我們可以更方便、更規範地處理Promise。希望這篇文章對大家有所幫助。