Axios 获取所有请求的状态
在前端开发中，我们经常需要使用 Ajax 请求来与后端进行数据交互。而 Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js 环境中发起 HTTP 请求。在实际开发中，我们经常需要了解所有请求的状态，以便根据不同的情况来处理数据或进行相应的操作。
Axios 简介
Axios 是一个流行的第三方库，可以在浏览器和 Node.js 中使用。它的主要特点包括：
- 支持 Promise API
- 可以拦截请求和响应
- 可以转换请求和响应数据
- 自动转换 JSON 数据
- 提供了取消请求的方法
Axios 是一个功能强大且易于使用的库，可以帮助我们更方便地处理 HTTP 请求。
获取所有请求的状态
在使用 Axios 进行 HTTP 请求时，我们可以在请求和响应的拦截器中获取请求的状态。通过拦截器，我们可以在请求发送之前和响应返回之后对数据进行处理。
下面是一个简单的示例，演示了如何使用 Axios 获取所有请求的状态：
// 引入 Axios
import axios from 'axios';
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log('Request sent');
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log('Response received');
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// 发起一个 GET 请求
axios.get('
.then(function (response) {
console.log('GET request success');
})
.catch(function (error) {
console.error('GET request failed');
});
在上面的代码中，我们使用 Axios 添加了一个请求拦截器和一个响应拦截器。在请求拦截器中，我们输出了“Request sent”表示请求已发送，在响应拦截器中，我们输出了“Response received”表示响应已接收。然后我们发起了一个 GET 请求，并根据请求的状态做出相应的处理。
Axios 请求状态的处理
在实际项目中，我们通常需要根据请求的状态进行相应的处理，例如根据请求是否成功来展示不同的 UI 提示，或者根据不同的错误状态来展示不同的错误信息。通过使用 Axios 的拦截器，我们可以方便地获取所有请求的状态，并根据需要进行处理。
下面是一个更完整的示例，演示了如何根据请求的状态来展示不同的提示信息：
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log('Response received');
// 请求成功后返回响应数据
return response;
}, function (error) {
// 对响应错误做点什么
if (error.response) {
// 请求已发出，但服务器响应的状态码不在 2xx 范围内
console.error('Status:', error.response.status);
console.error('Data:', error.response.data);
} else if (error.request) {
// 请求已发出，但没有收到响应
console.error('Request error:', error.request);
} else {
// 在设置请求时触发错误
console.error('Error:', error.message);
}
return Promise.reject(error);
});
// 发起一个 POST 请求
axios.post(' {
title: 'foo',
body: 'bar',
userId: 1
})
.then(function (response) {
console.log('POST request success');
})
.catch(function (error) {
console.error('POST request failed');
});
在上面的代码中，我们在响应拦截器中判断了请求的状态，并根据不同的情况输出了相应的信息。如果请求成功，则输出“Response received”，如果请求失败，则输出相应的错误信息。通过这种方式，我们可以更好地处理请求
