如何使用 Axios 调用 RESTful API 接口-JavaScript中文网-JavaScript教程资源分享门户

Axios 是一个基于 Promise 的 HTTP 请求客户端，它能够帮助我们在浏览器和 Node.js 中发起 HTTP 请求，并提供了许多强大的功能，例如拦截请求和响应、转换请求和响应数据、取消请求、自动转换 JSON 数据等等。在前端开发中，我们经常需要使用 Axios 来调用 RESTful API 接口，本篇文章就是为了帮助新手更好地学习和使用 Axios。

安装和引入

在使用 Axios 之前，我们需要先安装它。可以使用 npm 或者 Yarn 来进行安装：

npm install axios --save

或者

yarn add axios

安装完成之后，在我们的代码中引入 Axios：

import axios from 'axios';

发送 GET 请求

使用 Axios 发送 GET 请求非常简单，只需要调用 Axios 实例的 get 方法，并传入要请求的 URL 即可。例如：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上述代码将会发送一个 GET 请求到 URL https://jsonplaceholder.typicode.com/posts，并在控制台中输出响应数据。

利用 async/await 方式发送 GET 请求

使用 async/await 语法可以更加方便地进行异步处理和请求。例如：

-- -------------------- ---- -------
----- -------- ---------- -
  --- -
    ----- -------- - ----- --------------------------------------------------------
    ---------------------------
  - ----- ------- -
    -------------------
  -
-

-----------

发送 POST 请求

如果要发送 POST 请求，则需要在调用 axios.post 方法时传入请求数据，例如：

-- -------------------- ---- -------
----- ---- - -
  ------ ------
  ----- ------
  ------- -
--

-------------------------------------------------------- -----
  -------------- -- -
    ---------------------------
  --
  ------------ -- -
    -------------------
  ---

上述代码将会发送一个 POST 请求到 URL https://jsonplaceholder.typicode.com/posts，并传入请求数据 data，并在控制台中输出响应数据。

利用 async/await 方式发送 POST 请求

同样地，我们也可以使用 async/await 语法发送 POST 请求，例如：

-- -------------------- ---- -------
----- -------- ------------ -
  ----- ---- - -
    ------ ------
    ----- ------
    ------- -
  --

  --- -
    ----- -------- - ----- -------------------------------------------------------- ------
    ---------------------------
  - ----- ------- -
    -------------------
  -
-

-------------

发送 PUT 请求

要发送 PUT 请求，与发送 POST 请求类似，需要在调用 axios.put 方法时传入请求数据，例如：

-- -------------------- ---- -------
----- ---- - -
  ------ ------
  ----- ------
  ------- -
--

--------------------------------------------------------- -----
  -------------- -- -
    ---------------------------
  --
  ------------ -- -
    -------------------
  ---

上述代码将会发送一个 PUT 请求到 URL https://jsonplaceholder.typicode.com/posts/1，并传入请求数据 data，并在控制台中输出响应数据。

利用 async/await 方式发送 PUT 请求

同样地，我们也可以使用 async/await 语法发送 PUT 请求，例如：

-- -------------------- ---- -------
----- -------- ------------ -
  ----- ---- - -
    ------ ------
    ----- ------
    ------- -
  --

  --- -
    ----- -------- - ----- --------------------------------------------------------- ------
    ---------------------------
  - ----- ------- -
    -------------------
  -
-

-------------

发送 DELETE 请求

要发送 DELETE 请求，只需要调用 axios.delete 方法并传入要删除资源的 URL 即可，例如：

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上述代码将会发送一个 DELETE 请求到 URL https://jsonplaceholder.typicode.com/posts/1，并在控制台中输出响应数据。

利用 async/await 方式发送 DELETE 请求

同样地，我们也可以使用 async/await 语法发送 DELETE 请求，例如：

-- -------------------- ---- -------
----- -------- ------------ -
  --- -
    ----- -------- - ----- -------------------------------------------------------------
    ---------------------------
  - ----- ------- -
    -------------------
  -
-

-------------

Conclusion

Axios 是一个非常强大的 HTTP 请求客户端，它提供了许多有用的功能，使我们能够更加方便地进行 HTTP 请求。在以上的示例中，我们学习了如何使用 Axios 调用 RESTful API 接口，并演示了不同 HTTP 方法的使用。希望本文能够帮助读者掌握 Axios 的基础用法，并能够在实践中灵活运用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67830d51935627c90027e627

如何使用 Axios 调用 RESTful API 接口