Axios是什么
Axios 是一个流行的 JavaScript 库，用于在 Web 浏览器和 Node.js 中发起 Http 请求和处理响应。
它提供了一种易于使用、灵活和强大的方式来与服务器进行数据通信。Axios 具有一些有用的特性，如自动转换 json 响应、请求/响应拦截、取消请求等等。
它也是 Vue.js 官方推荐的 Http 库之一。
如何安装
在 Vue 项目中使用 Axios，你需要先安装 Axios 库。
主要有三种安装方式：
1、可以使用 npm 或者 yarn 命令行工具安装 Axios
使用 npm 安装 Axios：
使用 yarn 安装 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：
3.2 在项目根目录下创建 bower.json 文件，指定依赖项：
{
"name": "my-project",
"dependencies": {
"axios": "^0.21.4"
}
}其中，"dependencies" 属性指定项目所依赖的库及其版本号，这里使用了 ^0.21.4，表示安装 0.21.x 系列的最新版本。
3.3 执行 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 / 公众号「 设计师工作日常 」，点赞关注。
