Axios并发请求、错误处理和常用技巧

并发请求

axios.all() 用于并行发送多个请求，axios.spread() 用于拆解返回的多个响应。

示例：

axios.all([
  axios.get('/api/user'),
  axios.get('/api/posts')
]).then(axios.spread((userResponse, postsResponse) => {
  console.log(userResponse.data);
  console.log(postsResponse.data);
}));

错误处理

Axios 提供了强大的错误处理机制，可以在 .catch() 中捕获请求错误，并根据错误信息执行不同的处理逻辑。

常见的错误类型

• 网络错误：无法连接到服务器时触发。
• 状态码错误：例如 404、500 错误等。
• 示例：

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.log('Response error:', error.response);
    } else if (error.request) {
      console.log('Request error:', error.request);
    } else {
      console.log('General error:', error.message);
    }
  });

常用技巧

请求超时

在请求配置中设置 timeout 可以控制请求超时时间，避免请求卡住。

axios.get('/api/data', { timeout: 5000 })  // 超过5秒超时
  .then(response => console.log(response.data))
  .catch(error => console.log('Request timed out'));

跨域请求（CORS）

Axios 支持跨域请求，但需要后端服务器设置正确的 CORS 头。如果遇到 CORS 错误，可以通过代理或后端设置解决。

响应数据格式处理

可以在响应拦截器中统一处理响应数据，如统一提取核心数据或进行错误处理。

axios.interceptors.response.use(response => response.data);