Axios的優點：為什麼它是當前最受歡迎的HTTP請求庫

從2014年Axios隨着Vue.js的發布而出現以來，Axios已經成為了以 Node.js 為平台的一個廣泛應用的輕量級的 HTTP 請求客戶端。雖然還有其他的HTTP請求庫，但是Axios由於其簡單性、跨平台性以及對Promise的支持而變得特別受歡迎。

一、簡單性

Axios的簡單性體現在如下的幾個方面。

1、簡單的API

Axios提供了簡單易懂的API，這使得我們可以在JavaScript代碼中非常容易地發起HTTP請求。

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})

在這個簡單的例子中，Axios攔截器的全局配置可以做任何事情，如添加請求頭，添加請求參數，控制錯誤信息等等。

2、內置CSRF保護

跨網站請求偽造防範（CSRF）攻擊是指攻擊者冒充用戶提交 request，以達到把攻擊者自己的請求提交到目標網站的目的。Axios在請求中內置了CSRF保護，這意味着我們無需手動添加CSRF tokens到所有的請求。Axios會自動識別所有的請求，並將XHR請求轉換為AJAX，並自動添加CSRF tokens。

3、請求取消

當我們發出一個請求並想要取消它時，Axios使得它非常簡單。我們只需要傳遞一個配置對象中的cancelToken，就能夠取消請求操作。

// 創建一個取消的令牌。
const CancelToken = axios.CancelToken;
let cancel;

// 向服務器發送請求。
axios.get(`/user/12345`, {
  cancelToken: new CancelToken(function executor(c) {
    // 「executor」函數接收一個取消函數作為參數
    cancel = c;
  })
})
.catch(function (error) {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    // 處理響應
  }
});

// 取消請求
cancel();

4、統一異常處理

Axios提供了一個方便的方法，在所有的請求中集中處理所有的異常。這樣，當HTTP錯誤發生時，我們只需要在一個地方處理即可。

axios.interceptors.response.use((response) => {
    return response
}, (error) => {
    //global error handling
    console.log(error.response.data.error)
    return Promise.reject(error)
})

二、跨平台性

Axios的另一個主要優點是跨平台性。Axios在瀏覽器中運行良好，同時在 Node.js 服務器上也同樣適用。這使得我們可以輕鬆地在客戶端和服務器端使用同一個HTTP請求庫。

三、Promise和async/await的支持

Promise和async/await是JavaScript中重要的異步編程技術，可以讓代碼更加清晰和易於理解，並且使用Promise可以更好的處理HTTP請求和響應。

// Promise寫法
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// async/await寫法
async function fetchUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

四、性能和速度

Axios在性能和速度上都有比較好的表現。其中主要體現在以下兩個方面。

1、自動json化請求數據和響應數據

Axios自動地將請求和響應的數據 JSON 化，而不是像許多其他的HTTP請求庫一樣需要手動序列化請求數據和解析響應數據。

2、並發處理請求

在許多情況下，我們需要同時發起多個HTTP請求。Axios的並發處理請求可以大大提高程序的性能。Axios使用的底層庫(默認是XMLHttpRequest或者是fetch)在瀏覽器中支持並行請求，並且 Axios中的攔截器可以重新配置請求和響應。

五、擴展性

Axios的最後一個優點是其擴展性。Axios有一個模塊化的設計，可以非常方便地擴展其功能，以滿足我們的自定義需求。Axios還使用攔截器以及插件來實現功能擴展。

1、攔截器

攔截器使得我們可以在請求被發出之前或之後來對請求和響應進行修改。在請求過程中，我們可以通過添加請求攔截器、響應攔截器和錯誤攔截器來自定義攔截器處理流程，以實現統一的請求和響應處理。

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

// 添加響應攔截器
axios.interceptors.response.use((response) => {
  // 處理響應數據
  return response
}, (error) => {
  // 處理響應錯誤
  return Promise.reject(error)
})

2、插件

Axios是基於JavaScript Promise完成的，這意味着我們可以很方便地為Axios添加功能。我們可以為Axios創建自己的插件，以添加新的請求方法，創建全局實例，添加請求攔截器等等。

// 創建一個插件
const axiosInstance = axios.create();
const plugin = (instance) => {
  instance.interceptors.request.use((config) => {
    //攔截請求
    return config;
  }, (error) => {
    //處理請求錯誤
    return Promise.reject(error);
  });
};

// 使用插件
axiosInstance.plugin(plugin);

結論

Axios是一個強大、簡單、可靠並且廣泛應用的 HTTP 庫。它能夠在瀏覽器和服務器環境下運行，並提供了許多強大的功能、以及擴展和配置選項，這使得它成為了當前最受歡迎的HTTP請求庫。