介绍
Axios是一个开源库,允许您创建 HTTP 请求,提供包括 .get()、 .post() 和 .delete() 的方法。
在本文中,您将构建一个 JavaScript 应用程序,该应用程序使用 Axios 来向服务器执行GET、POST和DELETE请求,以更新一个 todo 项目列表。
前提条件
要完成本教程,您将需要:
- Node.js 的本地开发环境 遵循 如何安装 Node.js 并创建本地开发环境。
本教程已通过 Node v15.11.0, npm v7.6.1, axios v0.21.1 和 parcel-bundler v1.12.5 进行验证。
步骤1 - 设置项目
在本节中,您将创建一个新的项目目录,安装包依赖,并建立配置文件。
首先,创建一个新的项目目录:
1mkdir axios-js-example
然后,更改到新项目目录:
1cd axios-js-example
接下来,开始一个新的npm项目:
1npm init -y
然后安装 Axios:
1npm install [email protected]
<$>[注] 注: Axios 也可以通过 CDN 添加:
1<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
美元
Parcel是一个工具来包装和服务代码. 安装 parcel-bundler 作为 dev 依赖:
1npm install [email protected] --save-dev
在这一点上,你将有一个新的项目轴心和包裹包裹。
接下来,在代码编辑器中打开package.json,然后修改scripts以执行parcel为dev和build:
1[label package.json]
2{
3 // ...
4 "scripts": {
5 "test": "echo \"Error: no test specified\" && exit 1",
6 "dev": "parcel index.html",
7 "build": "parcel build index.html"
8 }
9 // ...
10}
然后,创建一个新的app.js文件,并添加以下代码行,以避免使用等待和async时出现‘regeneratorRuntime is not defined’错误:
1[label app.js]
2import 'regenerator-runtime/runtime';
3import axios from 'axios';
接下来,创建一个新的index.html文件,并添加以下代码行:
1[label index.html]
2<!DOCTYPE html>
3<html lang="en">
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Vanilla Axios</title>
9 <style>
10 body {
11 background-color: #673AB7;
12 color: white;
13 }
14 ul {
15 list-style: none;
16 margin: 0;
17 padding: 0;
18 }
19 li {
20 margin-bottom: .5em;
21 margin-top: .5em;
22 padding: 1em;
23 border: 1px solid white;
24 transition-property: background-color, color;
25 transition-duration: 500ms;
26 transition-timing-function: ease-in-out;
27 }
28 li:hover {
29 background-color: white;
30 color: black;
31 }
32 </style>
33</head>
34<body>
35 <div>
36 <h1>Todos</h1>
37 <ul>
38
39 </ul>
40 </div>
41 <script src="app.js"></script>
42</body>
43</html>
此代码将创建一个未排序的 Todo 项目列表. 目前,此列表将是空的,但它将在稍后填充。
现在,请验证您的项目是否一直在工作,打开终端并执行以下命令:
1npm run dev
然后在浏览器中导航到 http://localhost:1234/,你会看到一个屏幕,上面写着 Todos。
第2步:定义GET请求
在本节中,您将构建一个函数,用 Axios 执行到 [JSON Placeholder API] 的GET HTTP 请求(https://jsonplaceholder.typicode.com)。
在代码编辑器中打开app;js,然后添加以下代码行:
1[label app.js]
2// ...
3
4const BASE_URL = 'https://jsonplaceholder.typicode.com';
5
6const getTodoItems = async () => {
7 try {
8 const response = await axios.get(`${BASE_URL}/todos?_limit=5`);
9
10 const todoItems = response.data;
11
12 console.log(`GET: Here's the list of todos`, todoItems);
13
14 return todoItems;
15 } catch (errors) {
16 console.error(errors);
17 }
18};
注意axios.get如何通过由BASE_URL和todos字符串构建的路径。
此方法将提供一个响应对象返回,包括有关响应的信息,包括诸如标题,状态,配置,最重要的是数据。
接下来,添加代码来创建一个 todo 元素,并将 todo 元素附加到列表中:
1[label app.js]
2// ...
3
4const createTodoElement = item => {
5 const todoElement = document.createElement('li');
6
7 todoElement.appendChild(document.createTextNode(item.title));
8
9 return todoElement;
10};
11
12const updateTodoList = todoItems => {
13 const todoList = document.querySelector('ul');
14
15 if (Array.isArray(todoItems) && todoItems.length > 0) {
16 todoItems.map(todoItem => {
17 todoList.appendChild(createTodoElement(todoItem));
18 });
19 } else if (todoItems) {
20 todoList.appendChild(createTodoElement(todoItems));
21 }
22};
23
24const main = async () => {
25 updateTodoList(await getTodoItems());
26};
27
28main();
保存您的更改,并在浏览器中查看您的应用程序. 您将看到五个项目的列表。
步骤三:定义POST请求
在本节中,您将构建一个表格和输入,以获取新 Todo 项目的信息,用于添加到列表中,它将使用 Axios 执行一个POST HTTP 请求。
在代码编辑器中打开index.html,然后添加以下代码行:
1[label index.html]
2<!DOCTYPE html>
3<html lang="en">
4<head>
5 <!-- ... -->
6 <style>
7 /* ... */
8 #new-todos form {
9 margin-bottom: .5em;
10 margin-top: .5em;
11 padding: 1em;
12 border: 1px solid white;
13 }
14 </style>
15</head>
16<body>
17 <div id="new-todos">
18 <h1>New Todo</h1>
19 <form>
20 <label>
21 Name
22 <input type="text" id="new-todos__title" />
23 </label>
24 <button type="submit">Add</button>
25 </form>
26 </div>
27 <div>
28 <h1>Todos</h1>
29 <ul>
30
31 </ul>
32 </div>
33 <script src="app.js"></script>
34</body>
35</html>
接下来,在代码编辑器中打开app.js,然后添加以下代码行:
1[label app.js]
2// ...
3
4const form = document.querySelector('form');
5
6form.addEventListener('submit', async event => {
7 event.preventDefault();
8
9 const title = document.querySelector('#new-todos__title').value;
10
11 const todo = {
12 userId: 1,
13 title: title,
14 completed: false
15 };
16
17 const submitTodoItem = await addTodoItem(todo);
18 updateTodoList(submitTodoItem);
19});
此代码将从表单中取出值,并创建一个 todo 对象。
接下来,您需要在app.js中定义addTodoItem函数:
1[label app.js]
2// ...
3
4export const addTodoItem = async todo => {
5 try {
6 const response = await axios.post(`${BASE_URL}/todos`, todo);
7 const newTodoItem = response.data;
8
9 console.log(`Added a new Todo!`, newTodoItem);
10
11 return newTodoItem;
12 } catch (errors) {
13 console.error(errors);
14 }
15};
注意axios.post是如何通过一条路径和包含 todo 项的负载。
保存您的更改,并在浏览器中查看您的应用程序. 您将看到一份包含五个项目和一份表单的列表. 使用该表单添加一个新的 Todo 项目后,该列表将更新以显示六个项目。
第4步:定义删除请求
在本节中,您将创建一个点击事件对现有 todo 项目,以将其从列表中删除,它将使用 Axios 执行一个DELETE HTTP 请求。
接下来,您需要在app.js 中定义删除TodoItem函数:
1[label app.js]
2// ...
3
4export const deleteTodoItem = async id => {
5 try {
6 const response = await axios.delete(`${BASE_URL}/todos/${id}`);
7 console.log(`Deleted Todo ID: `, id);
8
9 return response.data;
10 } catch (errors) {
11 console.error(errors);
12 }
13};
注意axios.delete如何通过包含 todo 项目的id的路径:
接下来,创建一个删除TodoElement函数:
1[label app.js]
2// ...
3
4const removeTodoElement = async (event, element) => {
5 event.target.parentElement.removeChild(element);
6 const id = element.id;
7
8 await deleteTodoItem(id);
9};
此代码将从DOM中删除元素,然后用id调用deleteTodoItem。
现在,滚回创建TodoElement函数,你会添加两个新的代码行。当创建列表项目时,你还会添加一个点击事件来删除它。
1[label app.js]
2// ...
3
4const createTodoElement = item => {
5 const todoElement = document.createElement('li');
6
7 todoElement.id = item.id;
8 todoElement.appendChild(document.createTextNode(item.title));
9
10 todoElement.onclick = async event => await removeTodoElement(event, todoElement);
11
12 return todoElement;
13};
14
15// ...
保存您的變更並在瀏覽器中查看您的應用程式. 您將看到包含五個項目和一個表單的列表. 使用表單添加新 Todo 項目後,列表將更新以顯示六個項目。
结论
在本文中,您建立了一个JavaScript应用程序,该应用程序使用Axios来执行向服务器的GET,POST和DELETE请求,以更新一个Todo项目列表。
如果您想了解更多关于 Axios 的信息,请查看 与 Axios 响应和 与 Axios 视图上的指南。