Axios 是一个基于 Promise 的 JavaScript 库，用于发送 HTTP 请求。它支持浏览器和 Node.js 环境，在与后端 API 通信时非常常见。Axios 使得发送 HTTP 请求和处理响应变得更加简单且灵活。
Axios 的特点：
- 基于 Promise：它返回一个 Promise，方便进行链式调用和异步处理。
- 请求和响应拦截器：可以在请求发送前和响应到达后进行处理，适用于身份验证、错误处理等。
- 自动转换 JSON：自动将响应体中的 JSON 字符串解析为 JavaScript 对象。
- 支持取消请求：可以在需要时取消一个 HTTP 请求。
- 支持并发请求：可以同时发送多个请求，并处理它们的结果。
- 简化配置：通过配置选项简化请求，支持跨浏览器、跨平台。
安装 Axios
首先，您需要在项目中安装 Axios（如果还没有安装的话）。可以使用以下命令：
npm install axios
Axios 基本用法
1. 发送 GET 请求
GET 请求用于从服务器获取数据。
const axios = require('axios');
// 发送 GET 请求
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
console.log('数据:', response.data);
})
.catch(error => {
console.error('错误:', error);
});
在这个例子中，axios.get() 方法发送一个 GET 请求到指定的 URL，成功响应后会打印出数据，失败则打印错误信息。
2. 发送 POST 请求
POST 请求用于向服务器提交数据，通常用于表单提交。
const axios = require('axios');
// 发送 POST 请求
axios.post('https://jsonplaceholder.typicode.com/users', {
name: 'John Doe',
email: 'john.doe@example.com'
})
.then(response => {
console.log('提交成功:', response.data);
})
.catch(error => {
console.error('提交失败:', error);
});
在这个例子中，axios.post() 方法发送一个 POST 请求到指定的 URL，并将数据作为请求体提交。
3. 请求拦截器
请求拦截器允许我们在请求发送之前修改请求。比如，添加认证头等。
const axios = require('axios');
// 添加请求拦截器
axios.interceptors.request.use(config => {
console.log('请求发送之前的配置:', config);
// 可以修改请求头
config.headers['Authorization'] = 'Bearer YOUR_ACCESS_TOKEN';
return config;
}, error => {
return Promise.reject(error);
});
// 发起请求
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
console.log('获取数据:', response.data);
})
.catch(error => {
console.error('错误:', error);
});
这个例子展示了如何在请求发送之前，利用拦截器修改请求配置（如添加认证信息）。
4. 响应拦截器
响应拦截器允许我们在收到响应数据之前修改或处理数据。
const axios = require('axios');
// 添加响应拦截器
axios.interceptors.response.use(response => {
console.log('响应数据接收之前:', response.data);
return response;
}, error => {
return Promise.reject(error);
});
// 发起请求
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
console.log('获取到的数据:', response.data);
})
.catch(error => {
console.error('响应出错:', error);
});
这个例子展示了如何在接收到响应数据后，利用拦截器处理数据或进行错误处理。
5. 并发请求
如果需要同时发出多个请求并等待它们的结果，可以使用 axios.all。
const axios = require('axios');
// 使用 axios.all 来发送并发请求
axios.all([
axios.get('https://jsonplaceholder.typicode.com/users'),
axios.get('https://jsonplaceholder.typicode.com/posts')
])
.then(axios.spread((usersResponse, postsResponse) => {
console.log('用户数据:', usersResponse.data);
console.log('帖子数据:', postsResponse.data);
}))
.catch(error => {
console.error('请求失败:', error);
});
这里使用 axios.all() 发起多个并发请求，axios.spread() 用来处理多个请求的响应。
6. 取消请求
你可以通过 CancelToken 来取消正在进行的请求。
const axios = require('axios');
const CancelToken = axios.CancelToken;
let cancel;
// 发起请求
axios.get('https://jsonplaceholder.typicode.com/users', {
cancelToken: new CancelToken(function executor(c) {
cancel = c; // 保存取消函数
})
})
.then(response => {
console.log('获取数据:', response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('请求被取消:', error.message);
} else {
console.error('请求出错:', error);
}
});
// 取消请求
setTimeout(() => {
cancel('请求已取消');
}, 1000);
在这个示例中，通过 CancelToken 取消请求。在发送请求后，我们可以通过 cancel() 来中止请求。
7. 配置选项
Axios 提供了丰富的配置选项来定制请求。例如，可以设置请求超时、响应格式、请求头等。
const axios = require('axios');
// 配置请求
axios({
method: 'get',
url: 'https://jsonplaceholder.typicode.com/users',
headers: {
'Content-Type': 'application/json'
},
timeout: 5000 // 设置请求超时为 5 秒
})
.then(response => {
console.log('获取数据:', response.data);
})
.catch(error => {
console.error('请求失败:', error);
});
在这个例子中，axios() 可以传递一个配置对象来设置请求的不同参数。
总结
Axios 是一个功能强大且易于使用的 HTTP 客户端，能够帮助开发者发送异步请求并处理响应。它支持许多特性，如请求和响应拦截器、并发请求、取消请求等，适用于前端和 Node.js 环境。使用 Axios 可以更简洁地进行 API 调用和数据交互。
去创作