Axios 错误处理-JavaScript中文网-JavaScript教程资源分享门户

在进行前端开发时，我们不可避免地会遇到各种错误。使用 Axios 进行 HTTP 请求时，同样需要对可能出现的错误进行处理，以便提升用户体验和应用稳定性。本章将详细介绍如何有效地使用 Axios 处理错误。

错误类型

Axios 中存在两种主要类型的错误：

网络错误：这些错误通常发生在请求无法到达服务器或服务器响应超时时。
HTTP 错误：当服务器返回的状态码不在 2xx 范围内时，就会触发这种错误。

了解这两种错误的区别对于正确处理它们至关重要。

捕获错误

使用 .catch() 方法

.catch() 方法是处理 Axios 请求失败时最常用的方法。无论请求是否成功，你都可以通过 .then() 方法来处理成功的响应，而 .catch() 方法则专门用于捕获和处理错误。

axios.get('/user/12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.error('请求失败了:', error);
  });

使用 try-catch 结构

在更复杂的异步代码中，你可以使用 try-catch 结构来捕获 Axios 请求中的错误。这种方法可以让你更好地控制错误处理流程，并且可以与其他异步操作结合使用。

async function fetchUser() {
  try {
    const response = await axios.get('/user/12345');
    console.log(response);
  } catch (error) {
    console.error('请求失败了:', error);
  }
}

自定义错误处理

创建自定义错误处理器

为了提高代码的可维护性和可读性，你可以创建一个自定义的错误处理器函数。这个函数可以接收错误对象作为参数，并根据错误类型执行不同的操作。

// www.javascriptcn.com code example
function handleError(error) {
  if (error.response) {
    // 请求已发出，但服务器响应的状态码不在 2xx 范围内
    console.error('响应状态码:', error.response.status);
    console.error('响应数据:', error.response.data);
  } else if (error.request) {
    // 请求已发出，但没有收到响应
    console.error('请求失败:', error.request);
  } else {
    // 发生了一些其他类型的错误
    console.error('错误信息:', error.message);
  }
}

axios.get('/user/12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(handleError);

根据状态码处理错误

有时，你需要根据不同状态码来执行特定的错误处理逻辑。你可以通过检查 error.response.status 来实现这一点。

// www.javascriptcn.com code example
function handleHttpErrors(error) {
  if (error.response) {
    switch (error.response.status) {
      case 400:
        console.error('请求无效:', error.response.data);
        break;
      case 401:
        console.error('未授权:', error.response.data);
        break;
      case 403:
        console.error('禁止访问:', error.response.data);
        break;
      case 404:
        console.error('资源未找到:', error.response.data);
        break;
      default:
        console.error('未知错误:', error.response.data);
    }
  } else if (error.request) {
    console.error('请求失败:', error.request);
  } else {
    console.error('错误信息:', error.message);
  }
}

axios.get('/user/12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(handleHttpErrors);

全局错误处理

使用 axios.interceptors

为了简化全局错误处理，你可以利用 Axios 的拦截器功能。拦截器允许你在请求发送之前或响应接收到之后添加自定义逻辑，包括错误处理。

// www.javascriptcn.com code example
axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    console.error('请求失败:', error);
    return Promise.reject(error);
  }
);

axios.get('/user/12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.error('请求失败:', error);
  });

清理拦截器

当你不再需要某个拦截器时，可以通过调用 axios.interceptors.response.eject(id) 方法来删除它。

const myInterceptor = axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  return Promise.reject(error);
});

// 在适当的时候清理拦截器
axios.interceptors.response.eject(myInterceptor);

通过本章的学习，你应该能够更好地理解和应用 Axios 的错误处理机制，从而构建出更加健壮、稳定的前端应用。