全能開發工程師必備：AxiosConfig詳解

在前端開發中，經常需要向後端服務器發送請求。Axios作為一個常用的JavaScript HTTP客戶端，可以幫助我們在瀏覽器和Node.js中更輕鬆地發送異步HTTP請求。

Axios的config參數是一個十分重要的對象，它決定了每個請求的細節。本文將從多個方面詳細介紹Axios的config參數。

一、基本使用

import axios from 'axios';

axios({
  url: '/user',
  method: 'post',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  }
}).then((response) => {
  console.log(response);
}).catch((error) => {
  console.log(error);
});

以上就是最基本的Axios請求示例。url參數是必需的，表示請求的URL地址。method參數是可選的，默認為『GET』，表示HTTP請求方法。data參數是請求的數據，如果是get請求，請使用params參數。

另外，Axios除了.then()和.catch()方法之外，還有.catch()和.finally()方法。catch()方法用來捕獲錯誤，如果請求發生錯誤，它將會執行。finally()方法無論請求成功或失敗，都會執行。

二、請求攔截器和響應攔截器

HttpClient的攔截器允許我們在發送請求之前和響應之後對數據進行修改。Axios使用攔截器來執行這一操作。

請求攔截器是在請求被發送之前執行的。我們可以使用請求攔截器來對請求進行一些修改或添加請求頭信息。

響應攔截器是在響應被處理之前執行的。我們可以檢查響應是否成功，以及對響應進行一些修改。

axios.interceptors.request.use((config) => {
  // 在發送請求之前做些什麼
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
  return config;
}, (error) => {
  // 對請求錯誤做些什麼
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
  // 對響應數據做點什麼
  return response;
}, (error) => {
  // 對響應錯誤做點什麼
  return Promise.reject(error);
});

三、響應數據類型

Axios通過responseType配置來指定響應數據類型。下面是可用的響應類型：

• arraybuffer 響應為一個ArrayBuffer
• blob 響應為一個Blob對象
• document 響應為一個Document對象
• json 響應為一個JavaScript對象
• text 響應為一個字符串
• stream 響應為一個Stream對象（瀏覽器端）

axios({
  method: 'get',
  url: '/user/12345',
  responseType: 'stream'
})
  .then((response) => {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'));
  });

四、取消請求

有時候我們需要取消請求，例如用戶在輸入搜索關鍵字時，當輸入的關鍵字改變，之前發送的搜索請求就不再需要了。

Axios提供了一個CancelToken API，用於取消請求。我們需要引入cancelToken，並將其傳遞給請求的config參數。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios({
  method: 'get',
  url: '/user/12345',
  cancelToken: source.token
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯誤
  }
});

// 取消請求
source.cancel('Operation canceled by the user.');

五、多個並發請求

在某些情況下，我們需要同時發送多個請求。Axios提供了一個.all()方法，用於同時發送多個請求，並按請求完成的順序返回結果數組。

另外，我們也可以使用.spread()方法將所有請求的結果拆分為單個參數。

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // 處理結果
  }));

以上就是Axios的config參數的詳細介紹。只有深入理解Axios的config參數，我們才能寫出更好的HTTP請求代碼。