reactaxios封装

Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。以下是如何封装 Axios 请求的示例：

首先，安装 Axios:

bash复制代码
npm install axios

接下来，我们可以创建一个新文件（例如 http.js），封装我们的 Axios 请求：

import axios from 'axios';

const http = axios.create({
  baseURL: 'https://api.yourdomain.com',  // 你的API地址
  timeout: 10000,  // 请求超时时间
});

// 请求拦截器
http.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么：例如添加token
    // config.headers['Authorization'] = '你的token';
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
http.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    const res = response.data;
    // 根据你的业务处理回调
    if (res.code !== 200) {
      // 处理错误
      // ...
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    // 对响应错误做点什么
    console.log('err'   error);  // for debug
    return Promise.reject(error);
  }
);

export default http;

在上述代码中，如果出现错误，将通过以下路径来处理：

1. 请求错误： 如果请求发送过程中产生了错误，比如网络断开、请求超时或者任何其它 Axios 不能处理的错误，那么它会走到 http.interceptors.request.use() 的错误处理函数中，此处的 error 参数就是具体的错误信息。

   error => {
     // 对请求错误做些什么
     return Promise.reject(error);
   }
   

2. 响应错误： 如果服务器返回了一个状态码不在 2xx 范围内，即代表请求已经发送成功，但是服务器处理过程中出现错误，或者正常处理完请求，但是返回的结果我们主动判断为错误（例如根据业务逻辑，code 不等于200视为错误），那么这个错误会被捕获到 http.interceptors.response.use() 中的错误处理函数。

   error => {
     // 对响应错误做点什么
     console.log('err'   error);  // for debug
     return Promise.reject(error);
   }
   

3. 使用 API 的地方处理错误： 在你调用封装的 http 方法(如 http.get())后，还需要在外部处理可能抛出的异常。因为，当拦截器中使用 Promise.reject(error) 后，这个错误会被抛出，需要在调用 API 的地方捕获并处理。否则，未处理的错误可能会导致你的应用崩溃或者导致不可预期的行为。

   async fetchData() {
     try {
       const response = await http.get('/some-api-endpoint');
       this.data = response.data;
     } catch (error) {
       console.error(error);
     }
   },
   

• 不同阶段出现错误，会走到的处理路径。 在响应拦截器中处理错误有以下几个原因：

1. 统一错误处理： 在响应拦截器中处理错误，可以提供一个集中和统一处理错误的地方。这意味着你不需要在每个 API 请求的 .catch() 块中重复相同的错误处理代码。
2. 标准化响应并过滤错误： 服务器可能以各种不同的格式和代码返回错误。你可能想要创建一个统一的接口来表示错误，或者当特定类型的错误发生时抛出。拦截器使你可以实现这些目标。
3. 日志记录： 在拦截器中处理错误还可以用于记录错误信息，帮助开发人员进行调试。
4. 重试机制： 在某些情况下，如果请求失败，你可能会想要自动重试。拦截器是实现此逻辑的理想位置。

API 请求点处理错误的场景：

1. 特定错误信息： 你可能有一个全局的错误处理器来处理大多数错误，比如显示一个通用的 "出错了，请重试" 的消息。但对于某些特定的 API 请求，可能需要显示更具体的错误信息。例如，如果用户尝试登录但提供了无效的凭据，你可能希望显示 "用户名或密码错误" 的消息，而不仅仅是一个通用的错误消息。

   async login(username, password) {
     try {
       const response = await http.post('/login', {username, password});
       // handle successful response
     } catch (error) {
       if (error.response && error.response.status === 401) {
         // display specific error message for invalid credentials
         console.error("Invalid username or password");
       } else {
         // throw the error to be caught by a global handler
         throw error;
       }
     }
   },
   

2. 错误回退策略： 对于某些请求，如果它们失败，你可能希望执行一个回退策略，而不是只显示一个错误消息。举例来说，如果获取最新的用户数据失败，你可能想要从缓存中加载旧的数据。

   async getUserData(userId) {
     try {
       const response = await http.get(`/users/${userId}`);
       return response.data;
     } catch (error) {
       // load data from cache if API request fails
       const cachedData = loadFromCache(userId);
       if (cachedData) {
         return cachedData;
       } else {
         throw error;
       }
     }
   },
   

3. 请求特定的错误处理： 在某些情况下，比如文件上传，可能需要根据错误类型进行特定的操作，例如如果报错信息是文件大小超过限制，那么可能需要提示用户修改文件后重新上传，这种特殊处理就需要在请求点进行。

这篇好文章是转载于：学新通技术网