Axios 是一个流行的 JavaScript 库，用于发送 HTTP 请求。它是一个基于 promise 的 HTTP 客户端，用于 JavaScript 或与其他 Javascript 库（如 Vue.js 或 React.js）配合使用。由于其 同构 特性，Axios 可以使用相同的代码库同时在客户端和服务器端运行。此外，它还是一个强大的工具，可与 async 结合使用以构建用户友好的 API。最重要的是，Axios 具有自动中止请求的能力，否则这将是一项艰巨的任务。
Axios 是如何工作的？
Axios 使用默认的 promise 设置，在浏览器和 Node.js 中使用相同的代码并行运行。利用基于 promise 的 HTTP 特性，Axios 可以执行 CRUD 操作并向 REST 端点发送 HTTP 请求。在本教程中，我们将 引导您完成在 Vue.js 中使用 Axios 配置 REST API 的步骤。
让我们开始吧！
前提条件
要完成本教程，您必须具备以下条件：
- 已安装 Node.js 并在您的 Ubuntu 系统上进行了配置。
- 如果您使用的是 Centos 系统，可以按照此指南在 Centos 8 上安装 Node.js.
- 基础知识：JavaScript.
步骤 1：安装 Axios
在安装 Axios 之前，更新系统存储库以避免错误或安装失败非常重要：
|
1 |
sudo apt-get update |
接下来，使用 npm 软件包安装 Axios：
|
1 |
npm install axios --save |
或者，您可以使用 yarn 包管理器安装 Axios：
|
1 |
yarn add axios |
之后，创建一个 Vue.js 项目并在其中导入 Axios：
|
1 |
import axios from ‘axios’; |
在下一步中，我们将使用 axios.get() 方法来拉取请求。
步骤 2：使用 GET 请求拉取数据
在这里，我们将使用 GET 请求来拉取数据。看看我们如何使用 axios.get() 方法直接从方法中获取数据：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // 组件创建时拉取帖子。 created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // JSON 响应会自动解析。 this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
您将看到 async 或 await 版本：
上述代码将从 JSONPlaceholder 并以无序列表的形式分发数据。遇到的任何类型的错误都将显示在另一个无序列表中。
步骤 3：使用 POST 请求推送数据
与 axios.get() 方法相反，我们现在将使用 axios.post() 方法来发送 POST 请求。看看如何应用 axios.post() 方法来拉取数据：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // 调用时将 Posts 推送到服务器。 postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
您将看到 async 或 await 版本：
上述代码将创建一个输入字段，用于将内容提交到 JSONPlaceholder。遇到的任何类型的错误都将显示在不同的无序列表中。
步骤 4：设置通用基础实例
在这一步中，我们将使用 axios.create() 方法。设置通用基础实例的目的在于在所有实例之间共享一个基础 URL。
如果您的所有调用都使用通用的服务器或请求头（例如 ），那么通用基础实例就会派上用场：Authorization 请求头：
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
最后，您已准备好在组件中使用 HTTP ：
配置完成后，我们的 http-demo.js 就建立好了。现在，Axios 会同时连接到 JSONPlaceholder 和 Authorization 请求头，同时使用相同的代码库。最棒的是，Axios 会检索 posts，识别错误，并将它们显示在无序列表中。
结论
在本教程中，我们学习了使用 Axios 推送和拉取数据的基本知识。此外，我们创建了一个通用的基础实例来共享一个通用的 URL。然而，这不应该是你学习 Axios 的终点。我们鼓励你练习其他 Axios 方法来发送 POST, PUT, PATCH 和 DELETE 请求。深入阅读 Axios 文档 以探索该主题并尝试自己构建项目。
要进一步了解关于 Axios 和 Vue.js 的主题，请查看来自 我们博客:
祝您编程愉快！
评论
暂无评论。发表第一条评论吧。