ajax、axios與fetch調(diào)用后臺(tái)api

Ajax、Axios和Fetch都是用來發(fā)送請求并與后臺(tái)API進(jìn)行通信的工具。

Ajax是一種使用JavaScript和XMLHttpRequest對(duì)象來實(shí)現(xiàn)異步通信的技術(shù)。它可以發(fā)送各種類型的請求（GET、POST等），并可以接收后臺(tái)返回的數(shù)據(jù)。Ajax的優(yōu)點(diǎn)是在頁面不刷新的情況下，可以部分更新頁面內(nèi)容，提升用戶體驗(yàn)。但是Ajax使用原生的XMLHttpRequest對(duì)象編寫代碼較為繁瑣。

Axios是一個(gè)基于Promise的HTTP客戶端，可以在瀏覽器和Node.js環(huán)境中發(fā)送HTTP請求。它對(duì)XMLHttpRequest對(duì)象進(jìn)行了封裝，提供了更簡潔、易用的API，并且支持請求和響應(yīng)的攔截、請求的取消等功能。Axios使用起來更加簡單和直觀，是當(dāng)前最流行的發(fā)送HTTP請求的工具之一。

Fetch是Web API提供的一種新的發(fā)送網(wǎng)絡(luò)請求的方法，它可以在瀏覽器環(huán)境中使用。Fetch提供了一組簡單和一致的API，支持Promise，可以發(fā)送各種類型的請求（GET、POST等），并且可以使用Headers對(duì)象設(shè)置請求頭信息。Fetch的優(yōu)點(diǎn)是語法簡單，功能強(qiáng)大，但是兼容性較差，在低版本瀏覽器中需要通過polyfill來支持。

使用Ajax、Axios和Fetch調(diào)用后臺(tái)API的基本步驟如下：

1. 創(chuàng)建一個(gè)請求對(duì)象，設(shè)置請求的URL、請求方法和其他參數(shù)（如請求體、請求頭等）。
2. 發(fā)送請求，等待服務(wù)器響應(yīng)。
3. 處理服務(wù)器返回的數(shù)據(jù)，可以進(jìn)行相應(yīng)的業(yè)務(wù)邏輯處理或頁面更新。
4. 錯(cuò)誤處理，處理請求過程中可能出現(xiàn)的錯(cuò)誤或異常情況。

下面是使用Axios發(fā)送GET請求的示例代碼：

axios.get('/api/user')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

下面是使用Fetch發(fā)送GET請求的示例代碼：

fetch('/api/user')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.log(error);
  });

需要注意的是，F(xiàn)etch返回的是一個(gè)Promise對(duì)象，需要通過response.json()方法將響應(yīng)數(shù)據(jù)轉(zhuǎn)換成JSON格式。而Axios默認(rèn)會(huì)將響應(yīng)數(shù)據(jù)轉(zhuǎn)換成JSON格式。