Axios 如何通过请求/响应拦截器处理接口异常？

2023-02-15 13:33:21

利用 Axios 拦截器轻松处理接口异常

在前端开发中，接口异常处理是一个常见的痛点。当后端接口返回异常时，前端需要及时捕获并处理这些异常，以避免影响用户体验。传统的接口异常处理方法通常是使用 try-catch 语句，但这种方法不够灵活，且容易遗漏异常。

本文将介绍一种更强大的接口异常处理方法：Axios 拦截器 。Axios 是一款轻量级的 HTTP 库，它提供了丰富的功能和易于使用的 API。通过使用 Axios 拦截器，我们可以轻松地拦截请求和响应，并在接口异常发生时提供更友好的错误提示。

什么是 Axios 拦截器？

Axios 拦截器是一种强大的功能，它允许我们在请求或响应被 then 或 catch 处理之前拦截它们。我们可以使用拦截器来处理接口异常、添加请求头、修改请求参数，甚至在请求发生错误时抛出异常。

如何使用 Axios 拦截器处理接口异常？

1. 请求拦截器

请求拦截器允许我们在发送请求之前对其进行拦截。我们可以使用请求拦截器来添加请求头、修改请求参数，或者在请求发生错误时抛出异常。

代码示例：

// 请求拦截器
axios.interceptors.request.use(config => {
  // 添加请求头
  config.headers['Content-Type'] = 'application/json';

  // 修改请求参数
  config.params = {
    ...config.params,
    token: localStorage.getItem('token'),
  };

  return config;
}, error => {
  // 请求发生错误时抛出异常
  return Promise.reject(error);
});

2. 响应拦截器

响应拦截器允许我们在收到响应之前对其进行拦截。我们可以使用响应拦截器来处理接口异常，并提供更友好的错误提示。

代码示例：

// 响应拦截器
axios.interceptors.response.use(response => {
  // 处理接口异常
  if (response.data.code !== 0) {
    return Promise.reject(response.data.message);
  }

  // 返回响应数据
  return response.data;
}, error => {
  // 响应发生错误时抛出异常
  return Promise.reject(error);
});

如何使用 axios.create() 创建自定义的 Axios 实例？

我们可以使用 axios.create() 方法创建自定义的 Axios 实例。我们可以为这个实例配置不同的 baseURL、超时时间和其他选项。

代码示例：

// 创建自定义的 Axios 实例
const instance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000,
});

// 使用自定义的 Axios 实例发送请求
instance.get('/users').then(response => {
  console.log(response.data);
});

结语

通过使用 Axios 拦截器，我们可以轻松处理接口异常，并提供更友好的错误提示。此外，我们还可以使用 axios.create() 方法创建自定义的 Axios 实例，以满足不同的需求。

常见问题解答

1. Axios 拦截器有哪些优点？