Axios 面试题及答案

什么是 Axios？它有哪些主要特点和优势？

答案： Axios 是一个基于 Promise 的 JavaScript HTTP 客户端库，用于浏览器和 Node.js。它具有以下主要特点和优势：
- 支持浏览器和 Node.js 环境下的 HTTP 请求。
- 提供了简单易用的 API，可以处理异步请求。
- 支持 Promise API，可以更好地处理请求的结果。
- 自动转换请求和响应的数据为 JSON 格式。
- 提供了请求拦截器和响应拦截器，可以在请求发送和响应返回时进行拦截和处理。
- 支持取消请求，可以中断正在进行的请求。
- 提供了丰富的配置选项，可以灵活地配置请求的参数和行为。
- 在浏览器中可以利用 XMLHttpRequest 或 Fetch 进行请求，而在 Node.js 中可以利用 http 或 https 模块进行请求。
如何在 Axios 中设置请求的超时时间？

答案： 在 Axios 中可以通过配置 timeout 参数来设置请求的超时时间。timeout 参数表示请求在指定的毫秒数内没有完成，则会被取消。示例代码如下：
```
axios.get('/api/data', {
  timeout: 5000 // 设置超时时间为 5 秒
})
.then(response => {
  // 请求成功的处理逻辑
})
.catch(error => {
  // 请求失败的处理逻辑
});
```
```
Axios 的请求拦截器和响应拦截器有什么作用？如何使用它们？

答案： 请求拦截器和响应拦截器是 Axios 提供的两个重要功能，用于在请求发送和响应返回时进行拦截和处理。
- 请求拦截器（Request Interceptors）：在请求发送之前可以对请求进行拦截和修改，例如添加请求头、修改请求参数等。
```
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  config.headers['Authorization'] = 'Bearer token';
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});
```
- 响应拦截器（Response Interceptors）：在收到响应数据之后可以对响应进行拦截和处理，例如统一处理错误、转换响应数据等。
```
axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response.data;
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error);
});
```

如何处理 Axios 请求中的错误？有哪些常见的错误处理方式？

答案： 在 Axios 请求中，可以通过 .catch() 方法来处理错误。常见的错误处理方式包括：

直接在 .catch() 中进行错误处理，例如打印错误信息或进行相应的提示。

axios.get('/api/data')
  .then(response => {
    // 请求成功的处理逻辑
  })
  .catch(error => {
    // 请求失败的处理逻辑
    console.error('请求出错：', error);
  });

使用 try-catch 块捕获错误，进行详细的错误处理。

try {
  const response = await axios.get('/api/data');
  // 请求成功的处理逻辑
} catch (error) {
  // 请求失败的处理逻辑
  console.error('请求出错：', error);
}

利用 Axios 的全局错误拦截器进行统一的错误处理。

axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response.data;
}, error => {
  // 对响应错误做些什么
  console.error('请求出错：', error);
  // 继续抛出错误，以便后续处理
  return Promise.reject(error);
});

在 Axios 中如何发送并处理并发请求？

答案： 在 Axios 中可以使用 axios.all() 或 axios.spread() 方法发送并处理并发请求。

axios.all() 方法用于发送多个并发请求，返回一个 Promise，当所有请求都完成时才会触发。可以使用 .then() 处理结果。

axios.all([
  axios.get('/api/data1'),
  axios.get('/api/data2')
])
.then(axios.spread((response1, response2) => {
  // 处理多个请求的结果
  console.log('请求1的结果：', response1);
  console.log('请求2的结果：', response2);
}))
.catch(error => {
  // 请求失败的处理逻辑
  console.error('请求出错：', error);
});

axios.spread() 方法用于在多个请求的结果中进行拆分，将每个请求的结果作为参数传递给后续的处理函数。

axios.all([
  axios.get('/api/data1'),
  axios.get('/api/data2')
])
.then(axios.spread((response1, response2) => {
  // 处理多个请求的结果
  console.log('请求1的结果：', response1);
  console.log('请求2的结果：', response2);
}))
.catch(error => {
  // 请求失败的处理逻辑
  console.error('请求出错：', error);
});