深入了解Axios TypeScript：一種更好的HTTP客戶端解決方案

現代Web應用程序不再只是簡單地返回靜態頁面，它們還需要使用HTTP與Web服務交互。在人們構建Web應用程序時，構建健壯的API以與客戶端進行有效通信和處理HTTP請求和響應至關重要。

雖然JavaScript API 原生支持瀏覽器發送HTTP請求，但Axios作為一個基於Promise的http庫提供了一種更好的開發方式，它能夠處理網路請求及響應並支持攔截器，提供了一個類似於jQuery AJAX或Zepto AJAX的簡單基於GET和POST請求的API。同時，如果你正在使用TypeScript，那麼 Axios TypeScript在類型安全方面的優勢是無法比擬的。

一、為什麼使用Axios TypeScript？

如前所述，Axios TypeScript在類型安全方面的優勢是無法比擬的。它提供了額外的類型信息，以幫助你避免常見的錯誤，例如元素未定義、未定義的函數或屬性等。此外，Axios TypeScript 使用 TypeScript 加強了應用程序的類型安全性，並提供了諸如類型化相應數據和與服務端進行類型檢查等優勢。

除此之外，Axios TypeScript提供了一個易於使用的鏈式 API，易於閱讀，使你可以更輕鬆地執行諸如請求攔截、響應攔截、取消請求等操作。例如，可以使用 Axios TypeScript 將授權頭添加到在請求中發送的每個請求的頭中：

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

此外，Axios TypeScript還提供了超時調用、自動轉換響應數據、錯誤處理、CSRF支持等功能。

二、如何使用Axios TypeScript？

在使用Axios TypeScript之前，首先需要安裝。使用npm可以很容易地安裝它：

npm install axios

隨後，我們可以非常方便地初始化一個Axios實例，然後可以使用不同的配置選項進行調整。以下是創建 Axios 實例的示例代碼，它引入了一些常見配置選項：

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';

const defaultOptions: AxiosRequestConfig = {
  baseURL: 'https://api.example.com/api/',
  headers: { 'Content-Type': 'application/json' },
};

const instance: AxiosInstance = axios.create(defaultOptions);

export default instance;

上面的代碼中，我們首先通過向創建 Axios實例傳遞默認選項來設置與服務端通信，這裡指示 Axios 請求的基本URL。我們還提供了一個默認的HTTP頭部並將其標記為 ‘application/json’。

在與服務端進行通信時，可以使用Axios實例的 get,post,put 和 delete方法來創建請求。以下是使用Axios 實例的示例代碼：

import axios from './axios-config';

const requestWithAxios = () => {
  return axios
    .get('/endpoint?name=test')
    .then(response => {
      console.log(response.data);
    });
};

在上面的代碼片段中，我們通過向Axios實例get方法傳遞URL，帶有查詢字元串名稱為名稱的值為test， 以獲取伺服器數據。在請求成功時，我們會在控制台上看到響應列印出來的數據。

三、Axios TypeScript的攔截器

一個重要的功能常常是訪問請求和響應數據，在HTTP請求鏈中添加自定義邏輯，以便在請求，響應等過程中使用這些數據。攔截器為這些通用情況提供了一個清晰的解決方案，這樣您就可以輕鬆地注入邏輯。

Axios TypeScript提供兩個攔截器：請求攔截器和響應攔截器。以下是它們的工具代碼：

// 請求攔截器
axios.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // Do something before request is sent
    return config;
  },
  error => {
    // Do something with request error
    return Promise.reject(error);
  },
);

// 響應攔截器
axios.interceptors.response.use(
  response => {
    // Do something with response data
    return response;
  },
  error => {
    // Do something with response error
    return Promise.reject(error);
  },
);

Axios TypeScript攔截器返回AxiosPromise對象，該對象允許我們在攔截器中執行自定義邏輯，例如：取消請求、重試請求、添加通用授權標頭或處理全局錯誤。在請求和響應攔截器中，還可以對發送和接收respond數據進行修改。

這裡是一個重試請求的示例：

axios.interceptors.response.use(undefined, async err => {
  const error = err.response;
  const originalConfig = err.config;

  // 錯誤處理和重試邏輯 ...
  if (error.status === 401 && !originalConfig.__isRetryRequest) {
    originalConfig.__isRetryRequest = true;
    try {
      const rs = await axios.request(originalConfig);
      console.log('retry response');
      return rs;
    } catch (err) {
      console.log('retry error');
      return Promise.reject(err);
    }
  }
  return Promise.reject(error);
});

在上面的代碼片段中，我們首先獲取錯誤響應和原始配置，並根據響應狀態檢查是否應進行重試。如果我們已經嘗試了一次重試，則不重試。我們使用Axios 實例的 request方法再次發出一次HTTP請求，並在成功時列印響應。

四、Axios TypeScript的取消請求

取消請求對於提高 Web 應用程序的性能至關重要。它使我們可以取消不再需要的請求，以避免浪費帶寬和其他資源。在大多數Web應用程序中，用戶會頻繁地跳轉頁面或更改頁面數據，取消不需要的請求在這些用例中尤為重要，可以幫助減輕伺服器的負擔並提高網路速度。

Axios TypeScript提供了取消請求的功能，它提供了一個axios.CancelToken工廠，通過與需要取消的請求一起使用，我們可以請求取消請求。以下是 Axios TypeScript取消請求的示例：

import axios from './axios-config';

const cancelTokenSource = axios.CancelToken.source(); // <--

axios
  .get('/endpoint', {
    cancelToken: cancelTokenSource.token, //  {
    console.log(response.data);
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      console.log(thrown);
    }
  });

cancelTokenSource.cancel('Operation canceled by the user.'); // <--

在上面的代碼片段中，我們首先創建一個axios.CancelToken.source，然後我們將它傳遞給我們的get請求。在請求成功或失敗時，我們進行適當處理。最後，我們通過調用cancelTokenSource.cancel（’被用戶取消的操作’）方法來取消我們的請求。

五、結論

總之，Axios TypeScript是使用TypeScript構建Web應用程序時的一個極好的選擇。它提供了以類型安全方式執行HTTP請求和響應所需要的實用程序和工具，並且在其API設計和使用中看起來非常直觀易用。如果你還沒有使用過Axios TypeScript，我們鼓勵你在下一個項目中試試。