什么是Axios，有什么特点

发表于 2025-12-19 01:17:38

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于欣赏器和 Node.js 环境。它由 Matt Zabriskie 创建，旨在提供一个简单、机动且功能强盛的 HTTP 哀求库。Axios 支持全部今世欣赏器和 Node.js，可以用于发送 GET、POST、PUT、DELETE 等 HTTP 哀求，而且支持哀求和相应拦截、自动转换数据格式等功能。
Axios 的焦点概念

Promise 根本：Axios 基于 Promise，这意味着全部的哀求都是异步的，而且可以利用 .then 和 .catch 方法来处置惩罚乐成和失败的环境。
哀求设置：每次发送哀求时，可以通报一个设置对象，包罗 URL、方法、哀求头、哀求体等信息。
拦截器：Axios 支持哀求和相应拦截器，可以在哀求发送前或相应吸收后举行一些预处置惩罚或后处置惩罚操纵。
错误处置惩罚：Axios 提供了同一的错误处置惩罚机制，可以通过 .catch 方法捕捉哀求过程中发生的任何错误。
取消哀求：Axios 支持取消哀求，可以在哀求发送后随时取消。
并发哀求：Axios 提供了 axios.all 和 axios.spread 方法，可以同时发送多个哀求，并在全部哀求完成后处置惩罚结果。

Axios 的特点

跨平台：Axios 可以在欣赏器和 Node.js 环境中利用，提供了同一的 API。
基于 Promise：Axios 基于 Promise，使得异步操纵更加轻便和易读。
哀求和相应拦截：支持哀求和相应拦截器，可以在哀求发送前或相应吸收后举行一些预处置惩罚或后处置惩罚操纵。
自动转换数据格式：Axios 自动转换哀求和相应的数据格式，支持 JSON、URL 编码等情势。
取消哀求：支持取消哀求，可以在哀求发送后随时取消。
错误处置惩罚：提供了同一的错误处置惩罚机制，可以通过 .catch 方法捕捉哀求过程中发生的任何错误。
并发哀求：支持并发哀求，可以同时发送多个哀求，并在全部哀求完成后处置惩罚结果。
丰富的设置选项：提供了丰富的设置选项，可以自界说哀求的各个方面。

Axios 的作用

发送 HTTP 哀求：Axios 可以发送各种范例的 HTTP 哀求，如 GET、POST、PUT、DELETE 等。
处置惩罚相应：Axios 自动处置惩罚相应数据，可以轻松获取和处置惩罚相应结果。
哀求和相应拦截：通过拦截器，可以在哀求发送前或相应吸收后举行一些预处置惩罚或后处置惩罚操纵，如添加哀求头、处置惩罚相应数据等。
取消哀求：支持取消哀求，可以在哀求发送后随时取消，克制不须要的网络哀求。
错误处置惩罚：提供了同一的错误处置惩罚机制，可以通过 .catch 方法捕捉哀求过程中发生的任何错误。
并发哀求：支持并发哀求，可以同时发送多个哀求，并在全部哀求完成后处置惩罚结果。
跨平台：可以在欣赏器和 Node.js 环境中利用，提供了同一的 API。

示例分析

为了更好地明白 Axios 的工作原理和上风，我们通过几个具体的示例来分析。
安装 Axios

起首，确保你已经安装了 Axios。假如还没有安装，可以利用以下下令：

npm install axios

复制代码

根本用法

GET 哀求
2. const axios = require('axios');
4. axios.get('https://api.example.com/data')
5. .then(response => {
6. console.log(response.data);
7. })
8. .catch(error => {
9. console.error(error);
10. });
复制代码
POST 哀求
2. const axios = require('axios');
4. const data = {
5. name: 'John Doe',
6. age: 30
7. };
9. axios.post('https://api.example.com/users', data)
10. .then(response => {
11. console.log(response.data);
12. })
13. .catch(error => {
14. console.error(error);
15. });
复制代码
PUT 哀求
2. const axios = require('axios');
4. const data = {
5. name: 'Jane Doe',
6. age: 28
7. };
9. axios.put('https://api.example.com/users/1', data)
10. .then(response => {
11. console.log(response.data);
12. })
13. .catch(error => {
14. console.error(error);
15. });
复制代码
DELETE 哀求
2. const axios = require('axios');
4. axios.delete('https://api.example.com/users/1')
5. .then(response => {
6. console.log(response.data);
7. })
8. .catch(error => {
9. console.error(error);
10. });
复制代码

哀求和相应拦截

Axios 支持哀求和相应拦截器，可以在哀求发送前或相应吸收后举行一些预处置惩罚或后处置惩罚操纵。

const axios = require('axios');
// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
console.log('Request Interceptor:', config);
return config;
}, error => {
// 对请求错误做些什么
console.error('Request Error:', error);
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做些什么
console.log('Response Interceptor:', response);
return response;
}, error => {
// 对响应错误做些什么
console.error('Response Error:', error);
return Promise.reject(error);
});
// 发送请求
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

复制代码

取消哀求

Axios 支持取消哀求，可以在哀求发送后随时取消。

const axios = require('axios');
const CancelToken = axios.CancelToken;
let cancel;
axios.get('https://api.example.com/data', {
cancelToken: new CancelToken(c => {
cancel = c;
})
})
.then(response => {
console.log(response.data);
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
console.error('Error:', thrown);
}
});
// 取消请求
cancel('Operation canceled by the user.');

复制代码

并发哀求

Axios 支持并发哀求，可以同时发送多个哀求，并在全部哀求完成后处置惩罚结果。

const axios = require('axios');
const url1 = 'https://api.example.com/data1';
const url2 = 'https://api.example.com/data2';
axios.all([
axios.get(url1),
axios.get(url2)
])
.then(axios.spread((response1, response2) => {
console.log('Response 1:', response1.data);
console.log('Response 2:', response2.data);
}))
.catch(error => {
console.error('Error:', error);
});

复制代码

设置默认值

Axios 允许设置默认设置，以便在每次哀求时自动应用这些设置。

const axios = require('axios');
// 设置默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_ACCESS_TOKEN';
axios.defaults.headers.post['Content-Type'] = 'application/json';
// 发送请求
axios.get('/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

复制代码

实现细节

GET 哀求

根本 GET 哀求
2. const axios = require('axios');
4. axios.get('https://api.example.com/data')
5. .then(response => {
6. console.log(response.data);
7. })
8. .catch(error => {
9. console.error(error);
10. });
复制代码
带参数的 GET 哀求
2. const axios = require('axios');
4. const params = {
5. param1: 'value1',
6. param2: 'value2'
7. };
9. axios.get('https://api.example.com/data', { params })
10. .then(response => {
11. console.log(response.data);
12. })
13. .catch(error => {
14. console.error(error);
15. });
复制代码

POST 哀求

根本 POST 哀求
2. const axios = require('axios');
4. const data = {
5. name: 'John Doe',
6. age: 30
7. };
9. axios.post('https://api.example.com/users', data)
10. .then(response => {
11. console.log(response.data);
12. })
13. .catch(error => {
14. console.error(error);
15. });
复制代码
带哀求头的 POST 哀求
2. const axios = require('axios');
4. const data = {
5. name: 'John Doe',
6. age: 30
7. };
9. const config = {
10. headers: {
11. 'Content-Type': 'application/json',
12. 'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
13. }
14. };
16. axios.post('https://api.example.com/users', data, config)
17. .then(response => {
18. console.log(response.data);
19. })
20. .catch(error => {
21. console.error(error);
22. });
复制代码

PUT 哀求

根本 PUT 哀求
2. const axios = require('axios');
4. const data = {
5. name: 'Jane Doe',
6. age: 28
7. };
9. axios.put('https://api.example.com/users/1', data)
10. .then(response => {
11. console.log(response.data);
12. })
13. .catch(error => {
14. console.error(error);
15. });
复制代码
带哀求头的 PUT 哀求
2. const axios = require('axios');
4. const data = {
5. name: 'Jane Doe',
6. age: 28
7. };
9. const config = {
10. headers: {
11. 'Content-Type': 'application/json',
12. 'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
13. }
14. };
16. axios.put('https://api.example.com/users/1', data, config)
17. .then(response => {
18. console.log(response.data);
19. })
20. .catch(error => {
21. console.error(error);
22. });
复制代码

DELETE 哀求

根本 DELETE 哀求
2. const axios = require('axios');
4. axios.delete('https://api.example.com/users/1')
5. .then(response => {
6. console.log(response.data);
7. })
8. .catch(error => {
9. console.error(error);
10. });
复制代码
带哀求头的 DELETE 哀求
2. const axios = require('axios');
4. const config = {
5. headers: {
6. 'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
7. }
8. };
10. axios.delete('https://api.example.com/users/1', config)
11. .then(response => {
12. console.log(response.data);
13. })
14. .catch(error => {
15. console.error(error);
16. });
复制代码

总结

Axios 是一个强盛且机动的 HTTP 客户端，基于 Promise，支持欣赏器和 Node.js 环境。通过利用 Axios，可以简化 HTTP 哀求的处置惩罚，进步代码的可读性和可维护性。Axios 的哀求和相应拦截器、取消哀求、并发哀求等特性使得它在处置惩罚复杂的网络哀求时更加得心应手。盼望本文的先容和示例可以大概资助你更好地明白和应用 Axios。

什么是Axios，有什么特点

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

星球的眼睛