如何使用 Axios 在 vanilla JavaScript 中發送 HTTP 請求
Axios 是一個開源庫，用於向瀏覽器和 Node.js 中的 REST 端點發出異步 HTTP 請求。它是一個基於 Promise 的 HTTP 客戶端，可以在純 JavaScript 以及 React、Angular 和 Vue.js 等現代 JavaScript 框架中使用。
在本教程中，我們將在 JavaScript 和 HTML5 項目中使用 Axios。讓我們創建一個新的 HTML5 項目：
# create and switch to new directory
$ mkdir axios-js && cd axios-js
# create files
$ touch index.html script.js
# open the project in VS Code
$ code .
安裝
將 Axios 添加到 HTML5 項目很容易。您可以使用 npm 包管理器或內容交付網絡 (CDN)。如果您更喜歡使用 npm 包管理器，請在終端中運行以下命令：
$ npm install axios --save
它將下載 node_modules 中的庫 文件夾，您可以將其添加到您的項目中：
<script src="./node_modules/axios/dist/axios.min.js"></script>
包含 Axios 的最簡單方法是使用外部 CDN：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
用戶界面
讓我們更新我們的 index.html 文件顯示用戶列表：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios in JavaScript</title>
</head>
<body>
<div>
<h1>Users</h1>
<ul></ul>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="script.js"></script>
</body>
</html>
為了運行項目，我們將使用 http-server - 一個簡單的、零配置的命令行 HTTP 服務器：
$ http-server -p 3000
現在你可以訪問 http://localhost:3000 來查看你的項目了。
GET 請求
讓我們在 script.js 中創建一個新函數 文件以使用 GET 請求獲取用戶列表。我們將在所有示例中使用 Reqres REST API。
腳本.js
const fetchUsers = () => {
axios.get('https://reqres.in/api/users')
.then(response => {
const users = response.data.data;
console.log(`GET list users`, users);
})
.catch(error => console.error(error));
};
fetchUsers();
如果你以前用過jQuery，了解axios.get() 功能很簡單。我們只是將端點的 URL 作為參數傳遞給此方法。該方法返回一個承諾，允許我們使用 then() 和 catch() 處理結果的方法。
當 promise 成功解決後，你會得到一個 response 反對回來。此對象包含有關響應的信息，例如 headers , data , config , status 甚至完成request 對象。
現在讓我們擴展我們的 script.js 文件並添加一個解析 users 的新函數 對象並將其添加到 DOM：
腳本.js
const createLi = (user) => {
const li = document.createElement('li');
// add user details to `li`
li.textContent = `${user.id}: ${user.first_name} ${user.last_name}`;
return li;
};
const appendToDOM = (users) => {
const ul = document.querySelector('ul');
//iterate over all users
users.map(user => {
ul.appendChild(createLi(user));
});
};
const fetchUsers = () => {
axios.get('https://reqres.in/api/users')
.then(response => {
const users = response.data.data;
console.log(`GET list users`, users);
// append to DOM
appendToDOM(users);
})
.catch(error => console.error(error));
};
fetchUsers();
POST 請求
我們可以使用 axios.post() 將新用戶添加到我們的 REST API 方法。只需添加一個新函數 createUsers() script.js 內部 ：
const createUser = (user) => {
axios.post('https://reqres.in/api/users', user)
.then(response => {
const addedUser = response.data;
console.log(`POST: user is added`, addedUser);
// append to DOM
appendToDOM([addedUser]);
})
.catch(error => console.error(error));
};
要創建新用戶，您需要添加 <form> index.html裡面 獲取用戶信息的文件：
<div id="create-user">
<h1>Create User</h1>
<form>
<input type="text" id="first_name" placeholder="Enter First Name">
<input type="text" id="last_name" placeholder="Enter Last Name">
<button type="submit">Add User</button>
</form>
</div>
現在為表單提交添加一個事件監聽器來創建一個新用戶：
const form = document.querySelector('form');
const formEvent = form.addEventListener('submit', event => {
event.preventDefault();
const first_name = document.querySelector('#first_name').value;
const last_name = document.querySelector('#last_name').value;
const user = { first_name, last_name };
createUser(user);
});
刪除請求
axios提供axios.delete() 方法來發出 DELETE 請求。讓我們將刪除功能添加到我們的用戶列表中。首先新建一個函數deleteUser() script.js 內部 ：
const deleteUser = (elem, id) => {
axios.delete(`https://reqres.in/api/users/${id}`)
.then(response => {
console.log(`DELETE: user is removed`, id);
// remove elem from DOM
elem.remove();
})
.catch(error => console.error(error));
};
現在更新 createLi() 附加 onclick 的方法 單擊時處理刪除用戶的事件：
const createLi = (user) => {
const li = document.createElement('li');
// add user details to `li`
li.textContent = `${user.id}: ${user.first_name} ${user.last_name}`;
// attach onclick event
li.onclick = e => deleteUser(li, user.id);
return li;
};
總結
Axios 是一個簡單易用的 HTTP 客戶端庫，它允許我們輕鬆地將異步 HTTP 請求發送到 REST 端點並執行 CRUD 操作。如果您想了解更多關於 Axios 的信息，請查看 Node.js 和 Node.js HTTP 客戶端庫中的 Axios 指南。
如果您有任何問題或反饋，請隨時給我發推文。
快樂編碼😍
