如何在JavaScript中使用Axios

冷不防 2022-11-27 04:28 411阅读 0赞

[Axios][] is an open source library that allows us to easily make HTTP requests. It’s effectively just `fetch` with extra superpowers!

[Axios][]是一个开放源代码库，使我们可以轻松地发出HTTP请求。 实际上，它是通过额外的超能力来`fetch` ！

Let’s see this in action by creating a new HTML5 project:

让我们通过创建一个新HTML5项目来了解这一点：

# Create directory with a name of your choosing
    $ mkdir axios-js && cd axios-js
    
    # Create files
    $ touch index.html app.js
    
    # Initialise a new npm project
    $ npm init -y
    
    # Install Axios
    $ npm i axios -S
    
    $ npm i parcel-bundler -D
    
    # Open this up in your editor
    $ code .

NOTE: Axios can also be added via a CDN like so: `<script src="https://unpkg.com/axios/dist/axios.min.js"></script>`

注意：也可以通过CDN添加Axios，如下所示： `<script src="https://unpkg.com/axios/dist/axios.min.js"></script>`

As you may be able to see from our `npm install` calls, we’ll be using [Parcel][] to bundle and serve our code. We can add an `npm` script for this by heading over to `package.json`:

从`npm install`调用中您可能会看到，我们将使用[Parcel][]捆绑并提供我们的代码。 我们可以通过转到`package.json`来为此添加一个`npm`脚本：

{
      "scripts": {
        "dev": "parcel index.html",
        "build": "parcel build index.html"
      }
    }

As we’ll be using `async` and `await` inside of our project, we’ll install Babel and the `@babel/polyfill` package:

因为我们将在项目中使用`async`并`await` ，所以我们将安装Babel和`@babel/polyfill`软件包：

$ npm i @babel/core @babel/polyfill

Start your project by running `npm run dev` in your terminal and navigate to `http://localhost:1234/`. We can then update `index.html` with our `app.js` and some minor semantics:

通过在终端中运行`npm run dev`来启动项目，并导航至`http://localhost:1234/` 。 然后，我们可以使用`app.js`和一些次要语义来更新`index.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;
        }
      </style>
    </head>
    <body>
    
      <div>
        <h1>Todos</h1>
        <ul>
    
        </ul>
      </div>
      <script src="app.js"></script>
    
    </body>
    </html>

## 得到 **(**GET**)** ##

Inside of `app.js`, let’s make a function that allows us to `GET` Todos from an API. We’ll be using the [JSON Placeholder API][] for our example.

在`app.js`内部，让我们创建一个函数，该函数使我们能够从API中`GET` Todos。 在我们的示例中，我们将使用[JSON Placeholder API][] 。

import axios from 'axios';
    
    const BASE_URL = 'https://jsonplaceholder.typicode.com';
    
    const getTodos = async () => {
      try {
        const res = await axios.get(`${BASE_URL}/todos`);
    
        const todos = res.data;
    
        console.log(`GET: Here's the list of todos`, todos);
    
        return todos;
      } catch (e) {
        console.error(e);
      }
    };

Axios almost makes it almost too simple to get data from a server, which is great news for us. Simply pass `axios.get` the `BASE_URL` and you’ll get a `response` object back.

Axios几乎使从服务器获取数据几乎变得太简单了，这对我们来说是个好消息。 只需传递`axios.get` `BASE_URL` ，您将获得一个`response`对象。

This includes information about our response including things like `headers`, `status`, `config` and most importantly, `data`.

这包括有关我们响应的信息，包括`headers` ， `status` ， `config` ，最重要的是`data` 。

We can extend our application to now add this data to the DOM:

我们可以扩展我们的应用程序，以现在将这些数据添加到DOM：

## 开机自检 **(**POST**)** ##

We can add Todos to our API by capturing some information about it inside of a `form` and `input`:

我们可以通过在`form`内部`input`一些关于Todos的信息并将其添加到我们的API中：

<div id="new-todos">
      <h1>New Todo</h1>
      <form>
        <label>
          Name
          <input type="text" id="new-todos__name" />
        </label>
        <label>
          userId
          <input type="text"  id="new-todos__userId" />
        </label>
        <button type="submit">Add</button>
      </form>
    </div>

We can then add the Todo by listening for the `submit` event:

然后，我们可以通过侦听加入藤`submit`事件：

const form = document.querySelector('form');
    
    const formEvent = form.addEventListener('submit', async event => {
      event.preventDefault();
    
      const title = document.querySelector('#new-todos__title').value;
      const userId = document.querySelector('#new-todos__userId').value;
    
      const todo = {
        title,
        userId
      };
    
      const addedTodo = await addTodo(todo);
      addTodosToDOM(addedTodo);
    });

We’ll need to create the `addTodo` function inside of `app.js`. The major difference between this and the `get` example is that we’re adding the `todo` payload.

我们需要在`app.js`内创建`addTodo`函数。 此示例与`get`示例之间的主要区别在于，我们添加了`todo`有效负载。

export const addTodo = async todo => {
      try {
        const res = await axios.post(`${BASE_URL}/todos`, todo);
        const addedTodo = res.data;
    
        console.log(`Added a new Todo!`, addedTodo);
    
        return addedTodo;
      } catch (e) {
        console.error(e);
      }
    };

## 删除 **(**DELETE**)** ##

What good is a Todo list if we can’t delete items? Let’s add that functionality. We can create a `deleteTodo` function inside of `app.js`:

如果我们不能删除项目，待办事项清单有什么用？ 让我们添加该功能。 我们可以在`app.js`内创建一个`deleteTodo`函数：

export const deleteTodo = async id => {
      try {
        const res = await axios.delete(`${BASE_URL}/todos/${id}`);
        console.log(`Deleted Todo ID: `, id);
    
        return res.data;
      } catch (e) {
        console.error(e);
      }
    };

Within our `createLi` function we can attach an `onclick` event which handles the removal of our Todo when it’s clicked. The `DELETE` method requires an `id` to be passed as a parameter, so we can also add an `id` to each element at this stage.

在我们的`createLi`函数中，我们可以附加一个`onclick`事件，该事件处理单击Todo时的删除。 `DELETE`方法要求将`id`作为参数传递，因此我们也可以在此阶段向每个元素添加`id` 。

const createLi = item => {
      const li = document.createElement('li');
    
      li.id = item.id;
      li.appendChild(document.createTextNode(item.title));
    
      // Remove LI on click
      li.onclick = async e => await removeTodo(e, li);
    
      return li;
    };

Inside of `removeLi` we can remove the Todo from the DOM and then call `deleteTodo` with the ID:

在`removeLi`内部，我们可以从DOM中删除Todo，然后使用ID调用`deleteTodo` ：

const removeTodo = async (e, li) => {
      e.target.parentElement.removeChild(li);
      const id = li.id;
    
      await deleteTodo(id);
    };

## 摘要 **(**Summary**)** ##

This article looked at a few of the key ways to interact with an API using Axios using a very simple Todo application. If you’d like to learn more about Axios, check out the guides on [React + Axios][React _ Axios] and [Vue + Axios][Vue _ Axios].

本文介绍了使用一个非常简单的 Todo应用程序使用Axios与API进行交互的几种关键方法。 如果您想了解有关Axios的更多信息，请查看[React + Axios][React _ Axios]和[Vue + Axios][Vue _ Axios]上的指南。

> 翻译自: [https://www.digitalocean.com/community/tutorials/js-axios-vanilla-js][https_www.digitalocean.com_community_tutorials_js-axios-vanilla-js]

[Axios]: https://github.com/axios/axios
[Parcel]: https://www.digitalocean.com/community/tutorials/tooling-parcel
[JSON Placeholder API]: https://jsonplaceholder.typicode.com
[React _ Axios]: https://www.digitalocean.com/community/tutorials/react-axios-react
[Vue _ Axios]: https://www.digitalocean.com/community/tutorials/vuejs-rest-api-axios
[https_www.digitalocean.com_community_tutorials_js-axios-vanilla-js]: https://www.digitalocean.com/community/tutorials/js-axios-vanilla-js