Vue的Axios 的使用(axios简介、axios与vue钩子结合使用、实验)全解_axios在vue中的使用

作者：小惠珠哦 | 2024-07-24 06:17:25

踩

axios在vue中的使用

文章目录

知识点

知识点

什么是 Axios
Axios 基本用法
Axios 与 Vue 的钩子函数的结合使用

Axios 简介

什么是 Axios

Axios 是一个基于 Promise 语法的、用于浏览器和 Node.js 的 HTTP 库。简单的理解就是对 Ajax 的封装，且具有易用、简洁、高效等特点。

Axios 的特点

它本身具备以下作用：

可以从浏览器中创建 XMLHttpRequest。
能从 Node.js 创建 HTTP 请求。
支持 Promise API。
能够拦截请求和响应。
可以转换请求和响应数据。
也可取消请求。
可以自动转换 JSON 数据。
在客户端支持防止 CSRF/XSRF 攻击。
Axios 的安装方式

Axios 的安装与其他框架或插件类似，也是分为以下两种：

npm 安装

npm install axios
1

使用

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

Axios 基本用法

使用以下命令获取 axios 文件：

wget https://labfile.oss.aliyuncs.com/courses/10532/axios.min.js
1

首先，打开我们的线上环境，创建一个名为 demo1.html 的文件，并引入 axios.js。代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 Axios 的 CDN -->
    <script src="axios.min.js"></script>
  </head>
  <body></body>
</html>
1
2
3
4
5
6
7
8
9
10
11

然后，创建一个名为 test.json 的文件，作为接下来使用 Axios 请求的数据文件，并写入以下数据：

{
  "msg": "Hello Axios!"
}
1
2
3

最后，在 demo1.html 中使用 Axios 发送一个简单的 Ajax 请求，用于获取 test.json 中的数据，并输出在控制台：

<script type="text/javascript">
  axios.get("./test.json").then((res) => {
    console.log(res);
  });
</script>
1
2
3
4
5

在这里插入图片描述

我们会发现，通过 Axios 获取到的数据实际上就是一个 Ajax 对象，真正需要我们请求的数据是该 Ajax 对象的 data 属性值。
上面这个例子只是 Axios 众多使用方式中的一种，它主要是用于执行 get 请求。
下面我们看几个它比较常用的使用方式。

执行 get 数据请求。

axios.get('url',{
  params:{
    id:'接口配置参数（相当于url?id=xxxx）'，
  },
}).then(function(res){
  console.log(res); // 处理成功的函数 相当于 success
}).catch(function(error){
  console.log(error) // 错误处理 相当于 error
})
1
2
3
4
5
6
7
8
9

执行 post 数据请求并发送数据给后端。

axios
  .post(
    "url",
    { data: {} },
    {
      headers: "xxxx", // 头部配置
    }
  )
  .then(function (res) {
    console.log(res); // 处理成功的函数 相当于 success
  })
  .catch(function (error) {
    console.log(error); // 错误处理 相当于 error
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

通用方式（适用于任何请求方式）。

//-------------------get-----------------------//
axios({
  method: "get",
  url: "xxx",
  cache: false,
  params: {
    id: 123,
  },
  headers: "xxx",
});
//-------------------post-----------------------//
axios({
  method: "post",
  url: "xxx",
  data: {
    firstName: "Tom",
    lastName: "Sun",
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其中需要注意的是，get 和 post 请求中向后端传递参数的配置项名字不同：get 请求的需要使用 params，post 请求用于发送数据的为 data。

关于 Axios 的基本使用方式就为大家演示到这里，作为一个独立的强大的 HTTP 库，它的功能远不止这些，大家可以通过 Axios 的官网学习。后续的实验中，我们也会结合实际案例，为大家展示它的更多功能，这里就不再一一展开讲解。

接下来，让我们一起看看它是如何与 Vue 的钩子函数结合使用的。

Axios 与 Vue 的钩子函数的结合使用

假设有这样一个需求：”当页面加载后我们就要展示一组数据到页面中“。
这个需求对于我们前端开发者来说稀松平常，因为对于大部分网页，我们需要保证的第一个需求基本上就是——这个页面加载后有数据展示。
那么，如果当前页面在使用 Vue 框架之后应该如何实现呢？
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小惠珠哦/article/detail/873306