使用axios的async/await，輕鬆發起網路請求

在現代web應用中，我們經常需要與後端進行數據交互；為了實現這一目的，我們通常會使用AJAX（Asynchronous JavaScript and XML）技術來向web伺服器發送請求。在AJAX技術中，我們通常會使用XMLHttpRequest進行請求的發送。

然而，如果我們要手寫AJAX，就會涉及到一些複雜的代碼；而這種代碼的書寫和維護都是非常複雜的。因此，我們通常使用某個web框架來處理這些請求。這裡，我們介紹的是使用axios得到這個web框架。axios是一個為node.js和瀏覽器提供的基於Promise的HTTP客戶端，可以輕鬆實現請求的發送和響應的處理。使用axios並且結合async/await的語法，可以使我們輕鬆、優雅地進行網路請求。下面讓我們來看看axios和async/await的具體運用。

一、安裝axios並引入

要使用axios，我們首先需要安裝它。我們可以使用npm安裝它。下面的代碼段展示了如何在我們的項目中安裝axios：

npm install axios

當我們安裝了axios之後，我們需要引入它，這樣，才能在我們的項目中使用這個庫。我們可以通過下面的語句將axios引入我們的項目：

import axios from 'axios';

二、使用async/await和axios發送數據請求

非同步操作的一個傳統方式是回調。回調是指將一個函數作為參數傳遞給另一個函數，在被調用函數完成之後，第一個函數被執行。這樣，我們就可以完成先發起非同步請求，然後在處理完成數據之後執行回調函數。下面是一個使用回調函數來完成非同步請求的代碼：

function getData(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(null, xhr.responseText);
    } else {
      callback(xhr.statusText);
    }
  };
  xhr.onerror = function() {
    callback(xhr.statusText);
  };
  xhr.send();
}

getData('/image.png', function(err, data) {
  if (err !== null) {
    console.log('Something went wrong: ', err);
  } else {
    console.log('Data received: ', data);
  }
});

而在具有Promise和async/await支持的框架中，我們可以使用Promise和async、await，而不是使用回調函數。下面是一個使用async/await和axios來完成非同步請求的代碼。

async function getData() {
  try {
    const response = await axios.get('/image.png');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

getData();

在上面的代碼中，我們首先使用async關鍵字標識函數為非同步函數。接下來，在函數體中，我們使用try…catch語句來捕捉異常。在try語句塊中，我們使用await關鍵字來等待非同步函數的完成，這裡的非同步函數是axios.get()方法，它將返回一個Promise對象。我們通過調用response.data來訪問返回的數據。如果請求成功，我們將在控制台上列印響應數據。如果發生了錯誤，我們將在控制台上列印錯誤消息。

三、使用async/await和axios發起POST請求

POST請求通常用於將一些參數發送到伺服器，並由伺服器進行處理。要發送一個POST請求，我們需要使用axios的post()方法。下面是一個例子：

async function postData() {
  try {
    const response = await axios.post('/form', {name: 'David', age: 25});
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

postData();

在上述代碼中，我們使用axios.post()方法來發送POST請求，它接收兩個參數：一個是請求的URL，另一個是請求參數對象。在請求成功後，響應數據將被列印到控制台中。如果在請求過程中發生了錯誤，錯誤將被列印到控制台中。

四、使用async/await和axios發起PUT請求

PUT請求通常用於更新伺服器上的數據。要發送一個PUT請求，我們需要使用axios的put()方法。下面是一個例子：

async function putData() {
  try {
    const response = await axios.put('/user/123', {name: 'David', age: 25});
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

putData();

在上述代碼中，我們使用axios.put()方法來發送PUT請求，它接收兩個參數：一個是請求的URL，另一個是請求參數對象。在請求成功後，響應數據將被列印到控制台中。如果在請求過程中發生了錯誤，錯誤將被列印到控制台中。

五、使用async/await和axios發起DELETE請求

DELETE請求通常用於從伺服器上刪除數據。要發送一個DELETE請求，我們需要使用axios的delete()方法。下面是一個例子：

async function deleteData() {
  try {
    const response = await axios.delete('/user/123');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

deleteData();

在上述代碼中，我們使用axios.delete()方法來發送DELETE請求，它接收一個參數：請求的URL。在請求成功後，響應數據將被列印到控制台中。如果在請求過程中發生了錯誤，錯誤將被列印到控制台中。

六、使用async/await和axios的其他應用

在axios中，還有許多其他的方法可以用來完成其他的請求，這些方法的使用方法與上述方法相似，只需要提供相應的請求參數。下面是一些例子：

// 發送一個多部分form-data格式的POST請求
async function postFormData() {
  const formData = new FormData();
  formData.append('name', 'David');
  formData.append('age', '25');

  try {
    const response = await axios.post('/form', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

postFormData();

// 發送一個HEAD請求
async function headData() {
  try {
    const response = await axios.head('/user/123');
    console.log(response.headers);
  } catch (error) {
    console.error(error);
  }
}

headData();

// 發送一個OPTIONS請求
async function optionsData() {
  try {
    const response = await axios.options('/user/123');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

optionsData();

在上述代碼中，我們使用axios的post()方法來發送一個多部分form-data格式的POST請求，並將參數作為FormData對象傳遞。我們還使用headers對象來設置請求頭信息。我們還使用axios的head()和options()方法來發送HEAD和OPTIONS請求，它們的用法與其他請求類似。

七、總結

本文介紹了如何使用axios和async/await語法來發送和處理HTTP請求。我們首先講述了如何在我們的項目中引入和安裝axios。接下來，我們具體說明了如何使用async/await和axios發送各種類型的請求，包括GET、POST、PUT和DELETE請求，以及其他類型的請求，如HEAD和OPTIONS請求。