如何在 JavaScript 中使用 Axios

笔记首页 >> 教程系列 >> 如何在 JavaScript 中使用 Axios

介绍

Axios是一个开源库，允许您发出 HTTP 请求。它提供了一些方法，其中包括.get()，.post()，和.delete()。

在本文中，您将构建一个使用爱可信执行JavaScript的应用程序GET，POST以及DELETE请求到服务器进行更新的待办事项列表。

先决条件

要完成本教程，您需要：

Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。

本教程已通过 Node v15.11.0、npmv7.6.1、axiosv0.21.1 和parcel-bundlerv1.12.5 验证。

步骤 1 — 设置项目

在本节中，您将创建一个新的项目目录、安装包依赖项并建立配置文件。

首先，创建一个新的项目目录：

mkdir axios-js-example

然后，切换到新的项目目录：

cd axios-js-example

接下来，初始化一个新npm项目：

npm init -y

然后，安装 Axios：

npm install axios@0.21.1

注意： Axios 也可以通过 CDN 添加：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Parcel是一种捆绑和提供代码的工具。parcel-bundler作为开发依赖项安装：

npm install parcel-bundler@1.12.5 --save-dev

此时，您将拥有一个带有axios和的新项目parcel-bundler。

接下来，package.json在您的代码编辑器中打开。并修改为和"scripts"执行：parceldevbuild

包.json

{
  // ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }
  // ...
}

然后，创建一个新app.js文件。并添加以下代码行以避免regeneratorRuntime is not defined使用awaitand时出现“ ”错误async：

应用程序.js

import 'regenerator-runtime/runtime';
import axios from 'axios';

接下来，创建一个新index.html文件。并添加以下代码行：

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vanilla Axios</title>
  <style>
    body {
      background-color: #673AB7;
      color: white;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    li {
      margin-bottom: .5em;
      margin-top: .5em;
      padding: 1em;
      border: 1px solid white;
      transition-property: background-color, color;
      transition-duration: 500ms;
      transition-timing-function: ease-in-out;
    }
    li:hover {
      background-color: white;
      color: black;
    }
  </style>
</head>
<body>
  <div>
    <h1>Todos</h1>
    <ul>

    </ul>
  </div>
  <script src="app.js"></script>
</body>
</html>

此代码将创建一个未排序的待办事项列表。目前，此列表为空，但稍后会填充。

现在，验证您的项目目前是否正常运行。打开终端并运行以下命令：

npm run dev

然后http://localhost:1234/使用浏览器导航到。您将看到一个显示Todos.

第 2 步 – 定义`GET`请求

在本节中，您将构建一个函数来利用 Axios 向JSON Placeholder API执行GETHTTP 请求。

app;js在您的代码编辑器中打开。并添加以下代码行：

应用程序.js

// ...

const BASE_URL = 'https://jsonplaceholder.typicode.com';

const getTodoItems = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/todos?_limit=5`);

    const todoItems = response.data;

    console.log(`GET: Here's the list of todos`, todoItems);

    return todoItems;
  } catch (errors) {
    console.error(errors);
  }
};

请注意如何axios.get传递由BASE_URL和"todos"字符串构造的路径。甲_limit参数是将限制到响应5项。

此方法将response返回一个对象。这包括有关包括像响应信息headers，status，config，，最重要的data。

接下来，添加代码以创建一个 todo 元素并将 todo 元素附加到列表中：

应用程序.js

// ...

const createTodoElement = item => {
  const todoElement = document.createElement('li');

  todoElement.appendChild(document.createTextNode(item.title));

  return todoElement;
};

const updateTodoList = todoItems => {
  const todoList = document.querySelector('ul');

  if (Array.isArray(todoItems) && todoItems.length > 0) {
    todoItems.map(todoItem => {
      todoList.appendChild(createTodoElement(todoItem));
    });
  } else if (todoItems) {
    todoList.appendChild(createTodoElement(todoItems));
  }
};

const main = async () => {
  updateTodoList(await getTodoItems());
};

main();

保存您的更改并在浏览器中查看您的应用程序。您将看到一个包含五个项目的列表。

第 3 步 – 定义`POST`请求

在本节中，您将构建一个form和input来捕获要添加到列表中的新待办事项的信息。它将利用 Axios 执行POSTHTTP 请求。

index.html在您的代码编辑器中打开。并添加以下代码行：

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- ... -->
  <style>
    /* ... */
    #new-todos form {
      margin-bottom: .5em;
      margin-top: .5em;
      padding: 1em;
      border: 1px solid white;
    }
  </style>
</head>
<body>
  <div id="new-todos">
    <h1>New Todo</h1>
    <form>
      <label>
        Name
        <input type="text" id="new-todos__title" />
      </label>
      <button type="submit">Add</button>
    </form>
  </div>
  <div>
    <h1>Todos</h1>
    <ul>

    </ul>
  </div>
  <script src="app.js"></script>
</body>
</html>

接下来，app.js在您的代码编辑器中打开。并添加以下代码行：

应用程序.js

// ...

const form = document.querySelector('form');

form.addEventListener('submit', async event => {
  event.preventDefault();

  const title = document.querySelector('#new-todos__title').value;

  const todo = {
    userId: 1,
    title: title,
    completed: false
  };

  const submitTodoItem = await addTodoItem(todo);
  updateTodoList(submitTodoItem);
});

此代码将从表单中获取值并创建一个 todo 对象。

接下来，您需要在中定义addTodoItem函数app.js：

应用程序.js

// ...

export const addTodoItem = async todo => {
  try {
    const response = await axios.post(`${BASE_URL}/todos`, todo);
    const newTodoItem = response.data;

    console.log(`Added a new Todo!`, newTodoItem);

    return newTodoItem;
  } catch (errors) {
    console.error(errors);
  }
};

注意axios.post路径和包含待办事项的有效负载是如何传递的。

保存您的更改并在浏览器中查看您的应用程序。您将看到一个包含五个项目和一个表格的列表。使用表单添加新的待办事项后，列表将更新为显示六个项目。

第 4 步 – 定义`DELETE`请求

在本节中，您将在现有的待办事项上创建一个单击事件以将它们从列表中删除。它将利用 Axios 执行DELETEHTTP 请求。

接下来，您需要在中定义deleteTodoItem函数app.js：

应用程序.js

// ...

export const deleteTodoItem = async id => {
  try {
    const response = await axios.delete(`${BASE_URL}/todos/${id}`);
    console.log(`Deleted Todo ID: `, id);

    return response.data;
  } catch (errors) {
    console.error(errors);
  }
};

请注意如何axios.delete传递包含id待办事项项的路径：

接下来，创建一个removeTodoElement函数：

应用程序.js

// ...

const removeTodoElement = async (event, element) => {
  event.target.parentElement.removeChild(element);
  const id = element.id;

  await deleteTodoItem(id);
};

此代码将从 DOM 中删除元素，然后deleteTodoItem使用id.

现在，向上滚动到该createTodoElement功能。您将添加两行新代码。创建列表项元素时，您还将onclick向该元素添加一个事件以将其删除。它将获取该项目id并将其传递给removeTodoElement它将调用deleteTodoItem：

应用程序.js

// ...

const createTodoElement = item => {
  const todoElement = document.createElement('li');

  todoElement.id = item.id;
  todoElement.appendChild(document.createTextNode(item.title));

  todoElement.onclick = async event => await removeTodoElement(event, todoElement);

  return todoElement;
};

// ...

保存您的更改并在浏览器中查看您的应用程序。您将看到一个包含五个项目和一个表格的列表。使用表单添加新的待办事项后，列表将更新为显示六个项目。单击待办事项之一后，列表将显示五个项目。

结论

在这篇文章中，您构建了一个使用爱可信执行JavaScript的应用程序GET，POST以及DELETE请求到服务器进行更新的待办事项列表。

如果您想了解有关 Axios 的更多信息，请查看React with Axios和Vue with Axios 指南。

觉得文章有用？

点个广告表达一下你的爱意吧！