实现axios请求日志
介绍
在前端开发中，我们经常使用axios库来发起HTTP请求。但是，在实际开发中，我们通常希望能够记录请求的日志，以便于调试和问题定位。本文将教你如何实现axios请求日志功能。
整体流程
下面是实现axios请求日志的整体流程：
erDiagram
participant "请求发起" as A
participant "添加请求拦截器" as B
participant "发送请求" as C
participant "添加响应拦截器" as D
participant "处理响应" as E
participant "记录日志" as F
A --> B
B --> C
C --> D
D --> E
E --> F
实现步骤
1. 安装axios
首先，确保你的项目已经安装了axios库。如果没有安装，可以使用以下命令进行安装：
npm install axios
2. 创建请求拦截器
在开始发送请求之前，我们需要创建一个请求拦截器来记录日志。请求拦截器可以在每次请求被发送之前执行一些操作。
// 创建请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前执行的操作
console.log('请求已发送', config);
return config;
},
error => {
// 请求错误时执行的操作
console.log('请求发送失败', error);
return Promise.reject(error);
}
);
在上面的代码中，我们通过axios.interceptors.request.use方法创建了一个请求拦截器。该方法接受两个参数，第一个参数是一个函数，用于在请求发送之前执行操作；第二个参数是一个函数，用于处理请求错误。
3. 创建响应拦截器
同样地，我们需要创建一个响应拦截器来记录日志。响应拦截器可以在每次收到响应之后执行一些操作。
// 创建响应拦截器
axios.interceptors.response.use(
response => {
// 在收到响应之后执行的操作
console.log('收到响应', response);
return response;
},
error => {
// 响应错误时执行的操作
console.log('响应错误', error);
return Promise.reject(error);
}
);
在上面的代码中，我们通过axios.interceptors.response.use方法创建了一个响应拦截器。该方法接受两个参数，第一个参数是一个函数，用于在收到响应之后执行操作；第二个参数是一个函数，用于处理响应错误。
4. 发送请求
现在，我们已经创建了请求和响应拦截器，可以开始发送请求了。使用axios发送请求的方法与之前相同。
// 发送GET请求
axios.get('/api/data')
.then(response => {
// 处理响应
console.log('请求成功', response);
})
.catch(error => {
// 处理错误
console.log('请求失败', error);
});
// 发送POST请求
axios.post('/api/data', { data: 'example' })
.then(response => {
// 处理响应
console.log('请求成功', response);
})
.catch(error => {
// 处理错误
console.log('请求失败', error);
});
在上面的代码中，我们分别使用axios.get和axios.post方法发送了GET和POST请求，并在then和catch方法中处理响应和错误。
5. 记录日志
最后一步是记录日志。你可以根据实际需求选择合适的方式记录日志，比如使用console.log打印到控制台，或者发送到服务器保存。
// 记录日志
function logRequest(request) {
// 将请求信息记录到日志中
console.log('请求日志', request);
}
function logResponse(response) {
// 将响应信息记录到日志中
console.log('响应日志', response);
}
// 创建请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前执行的操作
logRequest(config);
return config;
