使用 Axios 在 JavaScript 中創建異步 HTTP 請求
簡介
Axios 是一個基於 Promised 的 JavaScript 庫，用於發送 HTTP 請求。您可以將其視為 JavaScript 原生 fetch() 的替代品 功能。
我們將使用 Promises、async/await 等功能 ，以及本教程中的其他現代 JavaScript 設計模式。如果您想加快速度或刷新記憶，請先閱讀以下文章，然後再繼續：
- 本文使用 ES2015 中引入的箭頭符號來定義函數。您可以在 JavaScript 中的箭頭函數文章中閱讀更多相關信息。
- Axios 是一個基於 Promised 的庫。如果您需要了解有關 Promises 的更多信息，可以閱讀我們的 Promises in Node.js 指南。
- 為了改善我們對 Promises 的體驗，我們將使用 Node.js
async/await句法。您可以閱讀我們的 ES7 中的 Node.js Async Await 文章來掌握此功能！
在本教程中，我們將製作 GET , POST , PUT , 和 DELETE 使用 Axios 對 REST API 的請求。讓我們進一步了解這個庫。
什麼是 Axios？
Axios 是一個現代的、基於 Promise 的 HTTP 客戶端庫。這意味著 Axios 用於發送 HTTP 請求並處理其響應，所有這些都使用 JavaScript 的 Promise。 Axios 在瀏覽器中同時支持 Node.js 和 JavaScript。
Axios 也是免費和開源的。您可以訪問其 GitHub 存儲庫以查看其代碼和文檔。
它通過保護用戶免受跨站點請求偽造（CSRF）等攻擊來內置一些網絡安全性。
由於其特性和易用性，它已成為 JavaScript 開發人員在進行 HTTP 調用時使用的流行選擇。讓我們從設置 Axios 開始吧。
設置 Axios
我們先新建一個文件夾，用默認設置初始化 NPM：
$ mkdir axios-tutorial
$ cd axios-tutorial
$ npm init -y
接下來，我們就可以使用 NPM 來安裝庫了：
$ npm i --save axios
注意 ：如果您在項目中使用 TypeScript（例如使用 Angular 應用程序），Axios 庫與它的類型定義捆綁在一起。您不必採取額外的步驟來安裝類型！
如果你在瀏覽器上，你也可以使用 CDN 來導入腳本。
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
本教程使用 Node.js 和 CommonJS 來加載我們的庫。 CommonJS 是一個加載模塊的標準，特別是它指定了 require() 關鍵字這樣做。無論平台如何，示例都應該可以正常工作，無需任何更改。
現在我們已經在我們的開發環境中設置了 Axios，讓我們直接開始發出 HTTP 請求。
使用 Axios 編寫異步請求
在 Node.js 中，網絡請求等輸入和輸出活動是異步完成的。由於 Axios 使用 Promises 發出網絡請求，因此在使用此庫時不能選擇回調。我們使用 Promises 或 async/await 與 Axios 交互 關鍵字是使用 Promises 的另一種語法。
導入 Axios
如果您使用的是 CommonJS，Node.js 中有兩種方法可以導入庫。
您可以像這樣在代碼中導入模塊：
const axios = require('axios')
但是，許多 IDE 和代碼編輯器在像這樣導入時可以提供更好的自動完成功能：
const axios = require('axios').default;
這在使用 CommonJS 導入模塊時有效。我們建議您使用第二種方法作為自動補全，並且在您的 IDE 中查看代碼文檔可以使開發過程更輕鬆。
導入庫後，我們就可以開始發出 HTTP 請求了。
發送 GET 請求
讓我們使用 Axios 發送我們的第一個請求！這將是一個 GET 請求，通常用於檢索數據。
我們將向外部 API 發出 HTTP 請求，該 API 向我們發送博客文章列表。收到數據後，我們會將其內容記錄到控制台。如果我們遇到錯誤，我們也會記錄下來。
讓我們看看如何使用默認的 Promise 語法來製作一個。在一個名為 getRequestPromise.js 的新文件中 ，添加如下代碼：
const axios = require('axios').default;
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(resp => {
console.log(resp.data);
})
.catch(err => {
// Handle Error Here
console.error(err);
});
製作 GET 請求時，我們將資源的 URL 作為參數傳遞到 axios.get() 方法。
如果您使用 node getRequestPromise.js 運行此代碼 ，您將看到以下輸出：
[ { userId: 1,
id: 1,
title:
'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
body:
'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum
est autem sunt rem eveniet architecto' },
{ userId: 1,
id: 2,
title: 'qui est esse',
body:
'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro ve
l nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla' },
...
現在讓我們看看如何使用 async/await 重寫相同的代碼 關鍵詞。在一個新文件 getRequestAsyncAwait.js ，添加如下代碼：
const axios = require('axios');
const sendGetRequest = async () => {
try {
const resp = await axios.get('https://jsonplaceholder.typicode.com/posts');
console.log(resp.data);
} catch (err) {
// Handle Error Here
console.error(err);
}
};
sendGetRequest();
使用 async/await 語法，我們需要包裝 axios.get() async 中的函數調用 功能。我們用 try...catch 封裝方法調用 塊，以便我們可以捕獲任何錯誤，類似於 catch() 我們在 Promise 版本中使用的方法。接收 HTTP 數據的變量必須使用 await 關鍵字以確保在繼續之前接收到異步數據。從現在開始，我們將只使用 async/await 我們示例中的語法。
運行此代碼將在控制台打印與原始 Promise 示例相同的輸出。
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
HTTP 請求的 Axios 響應（resp 示例中的對象）將包含有關 HTTP 響應的以下信息：
data- 服務器提供的響應正文。如果服務器的響應是 JSON，Axios 會自動將數據解析成 JavaScript 對象。status- 響應中的 HTTP 狀態代碼，例如200,400,404.statusText- 來自服務器響應的 HTTP 狀態消息，例如OK,Bad Request,Not Found.headers- 響應附帶的 HTTP 標頭。config- 為請求提供給 Axios API 的配置。request- 生成響應的本機請求。在 Node.js 中，這將是一個ClientRequest目的。在瀏覽器中，這將是一個XMLHTTPRequest對象。
現在我們已經了解瞭如何製作 GET 用axios請求，我們看看如何製作一個POST 請求。
發送 POST 請求
我們發送 POST 在 REST API 中創建新資源的請求。在這種情況下，我們將製作一個 POST 向 Axios 請求為用戶撰寫新的博文。
創建一個名為 postRequest.js 的新文件 並輸入以下代碼：
const axios = require('axios').default;
const newPost = {
userId: 1,
title: 'A new post',
body: 'This is the body of the new post'
};
const sendPostRequest = async () => {
try {
const resp = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
console.log(resp.data);
} catch (err) {
// Handle Error Here
console.error(err);
}
};
sendPostRequest();
發送 POST 使用 axios.post() 您必須首先提供 URL，然後在第二個參數中提供請求數據。在這種情況下，我們發送 newPost 中的數據 變量，它將作為 JSON 發送到我們的 API。
使用 node postRequest.js 運行它 產生以下成功結果：
{ userId: 1,
title: 'A new post',
body: 'This is the body of the new post',
id: 101 }
讓我們繼續看看我們如何發送 PUT 請求。
發送 PUT 請求
PUT 請求用於替換端點處的數據。您可以使用 axios.put() 發送 PUT 的方法 以類似於我們發送 POST 的方式請求 請求。
要查看它的實際效果，讓我們創建一個 PUT 請求更新第一篇博文的屬性。創建一個名為 putRequest.js 的新文件 代碼如下：
const axios = require('axios').default;
const updatedPost = {
id: 1,
userId: 1,
title: 'A new title',
body: 'Update this post'
};
const sendPutRequest = async () => {
try {
const resp = await axios.put('https://jsonplaceholder.typicode.com/posts/1', updatedPost);
console.log(resp.data);
} catch (err) {
// Handle Error Here
console.error(err);
}
};
sendPutRequest();
就像 POST ，我們提供 URL 和我們要上傳的數據。使用 node putRequest.js 運行它 給我們：
{ id: 1, userId: 1, title: 'A new title', body: 'Update this post' }
現在我們已經介紹了兩種上傳數據的方法，讓我們看看如何刪除數據。
發送刪除請求
您可以發送 HTTP DELETE 使用 axios.delete() 請求 從 RESTful API 中刪除數據的方法。
讓我們通過發送 DELETE 來刪除博客文章 向 Axios 請求。在一個名為 deleteRequest.js 的新文件中 ，輸入以下內容：
const axios = require('axios').default;
const sendDeleteRequest = async () => {
try {
const resp = await axios.delete('https://jsonplaceholder.typicode.com/posts/1')
console.log(resp.data);
} catch (err) {
// Handle Error Here
console.error(err);
}
};
sendDeleteRequest();
axios.delete() 函數只需要我們要移除的資源的 URL。用 node putRequest.js 執行這個程序 在終端中顯示：
{}
這意味著沒有返回任何數據，這在刪除資源時很好。但是，由於 Axios 沒有拋出任何錯誤，我們可以肯定它被正確處理了。
讓我們看看另一種使用配置發送 Axios 請求的方式，
配置請求
作為指定發出請求的函數的替代方法，我們可以提供一個 JavaScript 對象來配置 Axios 如何發送請求。例如，如果我想發送 PUT 不使用 axios.put() 的請求 ，我們可以像這樣配置Axios：
const axios = require('axios').default;
const sendRequest = async () => {
try {
const resp = await axios({
method: 'PUT',
url: 'https://jsonplaceholder.typicode.com/posts/1',
data: {
id: 1,
userId: 1,
title: 'A new title',
body: 'Update this post'
}
});
console.log(resp.data);
} catch (err) {
// Handle Error Here
console.error(err);
}
}
sendRequest();
在這種情況下，我們使用 axios 直接作為函數。我們向它傳遞一個 JavaScript 函數，其中包含 method 中使用的 HTTP 方法 , url 中的 API 端點 以及 data 中請求中的任何數據 屬性。
最終結果是一樣的，所以如果它更吸引你，你可以使用這種方式提出請求。
現在我們有了發送請求的句柄，讓我們通過設置自定義標頭來修改它們。
設置自定義標題
對於某些 API，原始請求需要在要處理的標頭中包含其他數據。一個常見的示例是設置對 HTTP 請求進行身份驗證的標頭。
如果我們使用 JWT 進行身份驗證和授權，我們必須將其添加到我們的請求中，這樣它就不會被 API 服務器拒絕。
讓我們看看如何將自定義標頭添加到 axios.get() 方法調用：
const axios = require('axios').default;
const sendGetRequest = async () => {
try {
const resp = await axios.get('https://jsonplaceholder.typicode.com/posts', {
headers: {
'authorization': 'Bearer YOUR_JWT_TOKEN_HERE'
}
});
console.log(resp.data);
} catch (err) {
// Handle Error Here
console.error(err);
}
};
sendGetRequest();
正如您在此代碼示例中看到的，我們可以使用 headers 傳遞配置 屬性為請求設置自定義標頭。 headers property 是一個帶有字符串鍵和值的 JavaScript 對象。
您可以將此屬性添加到其他 Axios 方法中，例如 axios.post() , axios.put() , axios.delete() . headers 屬性應在之後輸入 data axios.post() 中的對象 和 axios.put() .
接下來，讓我們看看如何使用 Axios API 配置設置自定義 header：
const axios = require('axios').default;
axios({
method: 'GET',
url: 'https://jsonplaceholder.typicode.com/posts',
headers: {
'authorization': 'Bearer YOUR_JWT_TOKEN_HERE'
}
}).then(resp => {
console.log(resp.data);
}).catch(err => {
// Handle Error Here
console.error(err);
});
在這種情況下，標頭只是 JavaScript 對象的另一個屬性！
結論
在本文中，您學習瞭如何在 Node.js 和瀏覽器 JavaScript 中使用 Axios 創建異步 HTTP 請求。您使用 Axios 方法發出請求 - axios.get() , axios.post() , axios.put() 和 axios.delete() .您還使用 Axios API 通過配置帶有請求詳細信息的 JavaScript 對象來發送 HTTP 請求。最後，您在請求中添加了自定義標頭。
我們希望現在您對如何在您的下一個應用程序中使用 Axios 有一個很好的了解！你接下來要建造什麼？
本文的源代碼在 GitHub 上。
