Axios在vue项目中的安装使用以及基本的请求方法

Posted 2023-03-15

Axios是什么

Axios 是一个流行的 javascript 库，用于在 Web 浏览器和 Node.js 中发起 Http 请求和处理响应。

它提供了一种易于使用、灵活和强大的方式来与服务器进行数据通信。Axios 具有一些有用的特性，如自动转换 json 响应、请求/响应拦截、取消请求等等。

它也是 Vue.js 官方推荐的 Http 库之一。

如何安装

在 Vue 项目中使用 Axios，你需要先安装 Axios 库。

主要有三种安装方式：

1、可以使用 npm 或者 yarn 命令行工具安装 Axios

使用 npm 安装 Axios：

npm install axios

使用 yarn 安装 Axios：

yarn add axios

2、直接引用 Axios

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

3、通过 Bower 安装

如果想通过 Bower 安装 Axios ，需要先在本地安装 Bower。

3.1  使用 npm 全局安装 Bower：

npm install -g bower

3.2  在项目根目录下创建 bower.json 文件，指定依赖项：

  "name": "my-project",
  "dependencies": 
    "axios": "^0.21.4"
  

其中，"dependencies" 属性指定项目所依赖的库及其版本号，这里使用了 ^0.21.4，表示安装 0.21.x 系列的最新版本。

3.3  执行 bower install 命令，安装依赖项：

bower install

执行完成后，Axios 及其依赖项将被安装到 bower_components目录下。

3.4 在 html 文件中引用 axios：

<script src="bower_components/axios/dist/axios.min.js"></script>

注意：在使用 Bower 安装 Axios 时，需要手动在 Html 文件中引用 Axios，无法通过 import 或 require 语句在 JS 文件中直接引用。

使用 Axios

在组件中使用 Axios 通常有两种方式：

1、在组件内部直接引入 Axios 库并使用

这种方式需要在组件内容进行安装，即在组件的 <script> 标签内部引入 axios 库并安装，如下所示：

<template>
  <div>
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
import axios from axios;

export default 
  methods: 
    getData() 
      axios.get(http://example.com/api/data)
        .then(response => 
          console.log(response.data);
        )
        .catch(error => 
          console.log(error);
        );
    
  

</script>

2、在 main.js 中引入 Axios 库，并挂载到 Vue 实例上

这种方式需要在项目的主入口文件(main.js)中引入 Axios 并挂载到实例上，就可以在所有组件中通过 this.$axios 来使用，如下所示：

// main.js

// 引入并挂载
import Vue from vue;
import axios from axios;

Vue.prototype.$axios = axios;

new Vue(
  el: #app,
  // ...
);

// 直接使用this.$axios调用
// 如get请求
this.$axios.get(http://example.com/api/data)
  .then(response => 
    console.log(response.data);
  )
  .catch(error => 
    console.log(error);
  );

Axios 的请求方法

Axios 支持以下 http 请求方法：

1、Get: 从服务器获取资源

在 Axios 中，使用 Get 请求有以下两种类型：

1.1 普通 Get 请求

直接在 url 后面添加参数，如：

this.$axios.get(/user?id=123)
  .then(function (response) 
    console.log(response);
  )
  .catch(function (error) 
    console.log(error);
  );

1.2 带参数的 Get 请求

使用 params 属性来传递参数，如：

this.$axios.get(/user, 
    params: 
        id: 123
    
)
  .then(function (response) 
    console.log(response);
  )
  .catch(function (error) 
    console.log(error);
  );

Axios 会自动将参数序列化成 url 参数格式（如 "?id=123" ），并拼接在 url 后面。如果有多个参数，可以在 params 对象中添加多个属性即可，如：

this.$axios.get(/user, 
    params: 
        id: 123,
        name: test,
        age: 18
    
)
  .then(function (response) 
    console.log(response);
  )
  .catch(function (error) 
    console.log(error);
  );

2、POST：向服务器提交数据

在 Axios 中，使用 Post 请求有以下几种类型：

2.1 普通的 Post 请求

发送普通的 post 请求，请求体为 json 数据：

this.$axios.post(/api/user, 
  name: Alice,
  age: 18
)
.then(response => 
  console.log(response.data)
)
.catch(error => 
  console.log(error)
)

2.2 使用 FormData 对象发送 Post 请求

使用 FormData 对象发送表单数据：

let formData = new FormData()
formData.append(name, Alice)
formData.append(age, 18)

this.$axios.post(/api/user, formData)
.then(response => 
  console.log(response.data)
)
.catch(error => 
  console.log(error)
)

2.3. 使用 FormData 对象上传文件

发送文件上传请求，需要将请求头设置为 multipart/form-data：

let formData = new FormData()
formData.append(avatar, file)

this.$axios.post(/api/upload, formData, 
  headers: 
    Content-Type: multipart/form-data
  
)
.then(response => 
  console.log(response.data)
)
.catch(error => 
  console.log(error)
)

2.4 发送 URLSearchParams 数据

URLSearchParams 是一个内置的对象，用于处理 url 中的查询参数。可以使用该对象来构建需要发送的数据，而不必手动构建字符串。

let params = new URLSearchParams();
params.append(name, John);
params.append(age, 25);

this.$axios.post(/api/user, params)
.then(function (response) 
  console.log(response);
)
.catch(function (error) 
  console.log(error);
);

3、PUT：在服务器上更新资源(客户端提供完整资源数据)

使用 Put 请求的类型一般有两种：

3.1 传统方式

传统方式下，Put 请求用于更新指定 uri 中已存在的资源。在发送 Put 请求时，需要指定要更新的资源 uri ，以及要更新的资源内容。

this.$axios.put(/api/users/1, 
  name: new name,
  age: 20
).then(response => 
  console.log(response.data);
).catch(error => 
  console.log(error);
);

上面的代码表示将 ID 为 1 的用户信息更新为 name: new name, age: 20 。需要注意的是，在传统方式下，Put 请求会用请求体中的数据完全替换指定 uri 中已存在的资源。

3.2 RESTful方式

RESTful 方式下，Put 请求用于更新指定 uri 中已存在的资源。但是，RESTful 风格下，Put 请求只允许更新指定资源的部分属性，而不是完全替换。

this.$axios.put(/api/users/1, 
  name: new name
).then(response => 
  console.log(response.data);
).catch(error => 
  console.log(error);
);

4、PATCH：在服务器上更新资源(客户端提供更改的属性)

使用patch请求时，一般可以使用以下两种类型：

4.1 普通的 Patch 请求

这种类型的请求是用来修改服务器上已存在的资源的。通常我们可以将待修改的资源数据通过请求传递给服务器。

this.$axios.patch(/api/users/1,  name: New Name )
  .then(response => 
    console.log(response.data);
  )
  .catch(error => 
    console.error(error);
  );

上面的代码中，我们向服务器发送一个 Patch 请求，修改了 ID 为 1 的用户，名称为 "New Name"。

4.2 无 ID 的 Patch 请求

有些情况下，我们需要对资源进行某些修改，但并不知道该资源的 ID 是什么。在这种情况下，我们可以向服务器发送一个没有 ID 的 Patch 请求，服务器会根据请求中提供的数据来确定需要修改哪个资源。

this.$axios.patch(/api/users,  oldName: Old Name, newName: New Name )
  .then(response => 
    console.log(response.data);
  )
  .catch(error => 
    console.error(error);
  );

上面的代码中，我们向服务器发送一个没有 ID 的 Patch 请求，包含旧的名称和新的名称，服务器会根据这些数据来确定修改哪个资源。

5、DELETE：从服务器删除资源

Delete 请求只有一种类型，用来删除资源。

this.$axios.delete(/api/user, 
  data: 
    userId: 123
  
)
  .then(response => 
    console.log(response.data)
  )
  .catch(error => 
    console.log(error)
  )

上面的代码中，向服务器中发送了 Delete 请求，请求 Url 为 "/api/user"，数据为 " userId: 123 "。如果请求成功，会打印出响应的数据，失败则打印错误信息。

6、HEAD：获取资源的元数据

Head 请求方法和 Get 方法类似，只是服务器在响应中不返回资源的内容，而是返回资源的元数据。

可以用于获取服务器响应头的信息，如获取资源的更新时间、资源类型等。

也可以用于获取资源的元数据，例如确认资源是否存在，或者检查资源是否已更改。

// 发送 HEAD 请求
this.$axios.head(/user/12345)
  .then(function (response) 
    console.log(response.headers);
  )
  .catch(function (error) 
    console.error(error);
  );

上面代码通过 this.$axios.head() 方法向 "/user/12345" 发送 Head 请求，并在打印出所有响应头的信息。

还可以使用 this.$axios.request() 方法来发送 Head 请求：

this.$axios.request(
  url: /user/12345,
  method: head
)
.then(function (response) 
  console.log(response.headers);
)
.catch(function (error) 
  console.error(error);
);

7、OPTIONS：获取服务器支持的请求方法和选项

在 Http 协议中，Options 请求方法通常被用于向服务器发出一个请求，以确定客户端可以执行哪些操作。

该请求方法不会真正获取资源，而是请求服务器提供关于该资源的哪些方法和选项的信息。

Options 请求方法通常用于跨域请求。

在 Axios 中，使用 Options 请求方法有两种类型，分别是简单请求和复杂请求：

7.1 简单请求

浏览器会自动发送一个 Options 请求，以获取服务端对 Cors 请求所支持的 Http 方法以及头信息（Access-Control-Allow-Methods 和 Access-Control-Allow-Headers）。如果服务端返回了适当的 Cors 头信息，则浏览器会根据请求方法和头信息来判断是否可以直接发送请求。

this.$axios.options(/api/data)
  .then(response => 
    console.log(response);
  )
  .catch(error => 
    console.log(error);
  );

7.2 复杂请求

对于复杂请求，浏览器会先发送一个 Options 请求，以获取服务端对 Cors 请求所支持的 Http 方法以及头信息（Access-Control-Allow-Methods 和 Access-Control-Allow-Headers）。如果服务端返回了适当的 Cors 头信息，并且浏览器根据请求方法和头信息判断可以发送请求，那么浏览器就会发送实际的请求。

this.$axios.options(/api/data, 
  headers: 
    Content-Type: application/json,
    Access-Control-Request-Method: PUT
  
)
  .then(response => 
    console.log(response);
  )
  .catch(error => 
    console.log(error);
  );

在上面代码中，我们通过 headers 选项设置了请求头信息，包括 Content-Type 和 Access-Control-Request-Method。

这些信息将被发送到服务器，以便服务器能够正确处理请求。

8、同时进行多个请求

在 Axios 中，可以使用并发请求（concurrent request）来同时发送多个请求。

当多个请求返回后，可以使用 Promise.all 方法将它们的响应数据统一处理。

this.$axios.all([
  axios.get(/api/posts/1),
  axios.get(/api/posts/2)
]).then(axios.spread((post1, post2) => 
  console.log(Post 1:, post1.data);
  console.log(Post 2:, post2.data);
)).catch(error => 
  console.log(error);
);

上面代码使用了 this.$axios.all 方法将多个请求同时发送，并使用 axios.spread 方法将它们的响应数据传递给一个函数进行处理。

如果任何一个请求返回错误，则会触发catch方法。

以上就是关于 Axios 在 Vue 项目中的一些基本安装及使用方式，希望对你有所帮助。

---

51cto / 公众号「 设计师工作日常 」，点赞关注。