了解 axios：簡單、強大的 http 客戶端

如果你正在尋找一種簡單、易於使用、功能強大的 HTTP 客戶端庫，那麼你不需要繼續找了！Axios 是一款基於 Promise 的 HTTP 客戶端，它可以在瀏覽器和 Node.js 中使用，而且使用它進行請求操作十分簡單且易於理解。

一、為什麼使用 Axios

使用 Axios 你可以很輕鬆地執行如下操作：

• 在瀏覽器和 Node.js 中同時使用
• 在請求中處理URL參數、請求體、HTTP Headers 等
• 模擬用戶登錄、自動攜帶Cookie 或其他憑證信息
• 支持請求的取消操作、設置請求超時時間、攔截請求和響應等高級功能
• 具有良好的文檔說明，上手容易

二、如何使用 Axios

使用 Axios，只需要按如下步驟進行即可：

1. 安裝 Axios:

可以使用 npm 或者 bower 進行安裝：

npm install axios

2. 引入 Axios:

可以使用 ES6 module 或 CommonJS 方式引入 Axios 模塊：

import axios from 'axios' // ES6 module
const axios = require('axios'); // CommonJS

3. 創建請求

使用 Axios 發送請求，首先需要創建一個 Axios 實例：

// 創建 Axios 實例
const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});

在實例中，我們定義了請求的 baseURL 和超時時間，也可以自定義請求頭部信息。

4. 進行請求

發送請求只需要用實例調用不同的方法：

// GET 請求
instance.get('/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

// POST 請求
instance.post('/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
    })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

在該方法中，我們使用 then 和 catch 方法來處理請求的返回結果和可能出現的錯誤，如果請求成功，響應結果會被包裝到 response 對象中，如果失敗，拋出錯誤會被包裝到 error 對象中。

5. 配置攔截器

可以使用 Axios 配置請求和響應指示器，以在發起請求或響應時切入特定程序：

// 添加請求攔截器
instance.interceptors.request.use(config => {
  // 在請求發送之前對請求做些處理
  return config;
}, error => {
  // 對請求錯誤做些處理
  return Promise.reject(error);
});

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

在該方法中，我們使用 use 方法添加請求和響應的攔截器，可以處理請求或響應的信息，例如添加或修改響應頭部。

三、Axios的具體使用場景

1. GET 請求

GET 請求是最常見的請求類型之一。以下示例表示如何使用 Axios 發送一個 GET 請求，將返回結果列印到控制台中：

// 發送 GET 請求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2. POST 請求

POST 請求通常用於向伺服器提交一些信息，在以下示例中，我們向伺服器提交一個新的用戶並將響應結果列印到控制台：

// 發送 POST 請求
axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@axios.com'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3. 並行請求

在某些情況下，我們需要同時執行多個請求。在以下示例中，我們使用 Axios.all 方法同時執行兩個請求，並在兩個請求都完成後，將響應結果列印到控制台中：

// 並行執行兩個請求
axios.all([
  axios.get('/user?ID=12345'),
  axios.get('/user?ID=67890')
])
.then(axios.spread(function (resp1, resp2) {
  // 兩個請求現在都執行完成
  console.log(resp1.data);
  console.log(resp2.data);
}));

4. 請求配置

請求配置對象是用來針對每個請求進行參數配置的。以下示例展示如何配置請求超時時間，並將結果列印到控制台中：

// 配置請求
axios.get('/user', {
  timeout: 1000
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

5. 自定義實例配置

我們可以創建自定義的 Axios 實例，以進行特定的請求操作。以下示例展示了如何使用自定義實例進行請求：

// 創建實例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Flag': 'foobar'}
});

// 請求操作
instance.get('/user')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

四、總結

Axios 是一個簡單、易於使用、功能強大的 HTTP 客戶端庫。使用 Axios，可以在瀏覽器和 Node.js 中進行請求操作，而不需要學習不同客戶端庫的特有語法和參數。Axios 提供了一些高級特性，如配置攔截器、支持請求的取消操作、設置請求超時時間和自定義請求頭部等。通過本文，你應該已經掌握了使用 Axios 的基礎知識，開始使用 Axios 吧！