如何有效处理Axios.js中的异常情况？

axios.js 异常处理

axios是一个基于Promise的HTTP客户端，用于浏览器和node.js中发出异步HTTP请求，在前端开发中，处理HTTP请求的异常是至关重要的，因为网络请求可能会因各种原因失败，如网络问题、服务器错误等，本文将详细介绍如何使用axios进行异常处理，并提供相关示例代码和表格。

一、异常处理

在使用axios进行HTTP请求时，常见的异常包括网络错误、超时错误以及服务器返回的错误状态码（如4xx和5xx），为了有效处理这些异常，我们可以使用try-catch语句、拦截器以及axios自带的isAxiosError方法。

1. try-catch语句

try-catch语句是处理异步操作中错误的常用方式，通过捕获错误对象，可以判断错误类型并进行相应处理。

try {
  const response = await axios.get('/api/data');
  // 处理响应数据
} catch (error) {
  if (error.response) {
    // 服务器响应了一个状态码，不在2xx范围
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // 请求已经发送，但没有收到响应
    console.log(error.request);
  } else {
    // 在设置请求时发生了一些错误
    console.log('Error', error.message);
  }
  console.log(error.config);
}

2. 拦截器

axios允许使用拦截器来处理请求或响应，通过配置request和response拦截器，可以统一处理所有请求和响应的逻辑。

const instance = axios.create();
instance.interceptors.request.use((config) => {
  // 在发送请求前做一些处理
  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});
instance.interceptors.response.use((response) => {
  // 对响应数据做一些处理
  return response;
}, (error) => {
  // 处理响应错误
  if (error.response) {
    // 服务器响应了一个状态码，不在2xx范围
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // 请求已经发送，但没有收到响应
    console.log(error.request);
  } else {
    // 在设置请求时发生了一些错误
    console.log('Error', error.message);
  }
  return Promise.reject(error);
});

3. axios.isAxiosError方法

axios提供了一个名为isAxiosError的方法，可以用来判断一个错误是否是由axios产生的，这对于区分不同类型的错误非常有用。

axios.get('/api/data')
  .then((response) => {
    // 处理响应数据
  })
  .catch((error) => {
    if (axios.isAxiosError(error)) {
      // 处理 AxiosError
      if (error.response) {
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else if (error.request) {
        console.log(error.request);
      } else {
        console.log('Error', error.message);
      }
    } else {
      // 处理其他类型的错误
      console.log('Error', error);
    }
  });

二、具体场景下的异常处理

场景一：用户登录验证

假设你正在开发一个用户登录功能，并且你想通过axios与后端进行通信来验证用户的凭证，如果登录失败（如用户名或密码错误），你需要从服务器的响应中获取具体的错误信息，并在前端显示。

function loginUser(credentials) {
  return axios.post('/login', credentials)
    .then((response) => {
      // 登录成功，处理响应数据
      return response.data;
    })
    .catch((error) => {
      if (error.response) {
        switch (error.response.status) {
          case 401:
            alert('用户名或密码错误');
            break;
          case 403:
            alert('账户被禁用');
            break;
          default:
            alert('登录失败');
        }
      } else {
        alert('网络错误，请检查你的连接');
      }
      throw error; // 重新抛出错误以便进一步处理
    });
}

场景二：在线订餐系统的错误处理

假设你正在开发一个在线订餐系统，其中客户可以通过Web界面选择餐品并下订单，你的前端应用使用axios与后端服务器进行通信，后端服务器负责处理订单、库存和支付等逻辑，具体需求与实现如下：

1、用户下订单：用户选择餐品并点击下订单按钮，前端发送一个POST请求到服务器。

2、处理可能的错误：服务器可能因多种原因拒绝请求，例如库存不足、促销代码无效、支付失败等。

function placeOrder(orderDetails) {
  return axios.post('/order', orderDetails)
    .then((response) => {
      // 订单成功处理
      alert('订单已成功提交');
      return response.data;
    })
    .catch((error) => {
      if (error.response) {
        switch (error.response.status) {
          case 400:
            alert('输入错误: ' + error.response.data.message);
            break;
          case 404:
            alert('餐品不存在: ' + error.response.data.message);
            break;
          case 500:
            alert('服务器错误，请稍后重试');
            break;
          default:
            alert('未知错误: ' + error.response.data.message);
        }
      } else {
        alert('网络错误，请检查你的连接');
      }
      throw error; // 重新抛出错误以便进一步处理
    });
}

三、相关问题与解答

问题1：如何在axios中统一处理所有请求的异常？

答案：可以通过配置axios实例的response拦截器来统一处理所有请求的异常，下面是一个示例代码：

const instance = axios.create();
instance.interceptors.response.use((response) => {
  return response;
}, (error) => {
  let errorMessage = '未知错误';
  if (error.response) {
    switch (error.response.status) {
      case 400:
        errorMessage = '错误请求';
        break;
      case 401:
        errorMessage = '未授权，请重新登录';
        break;
      case 403:
        errorMessage = '拒绝访问';
        break;
      case 404:
        errorMessage = '请求错误,未找到该资源';
        break;
      case 408:
        errorMessage = '请求超时';
        break;
      case 500:
        errorMessage = '服务器端出错';
        break;
      case 502:
        errorMessage = '网络错误';
        break;
      case 503:
        errorMessage = '服务不可用';
        break;
      case 504:
        errorMessage = '网络超时';
        break;
      case 505:
        errorMessage = 'http版本不支持该请求';
        break;
      default:
        errorMessage =连接错误${error.response.status};
    }
  } else if (error.request) {
    errorMessage = '请求发出但没有收到响应';
  } else {
    errorMessage = error.message || '错误';
  }
  console.log('统一错误处理: ', errorMessage);
  return Promise.reject(new Error(errorMessage));
});

这个拦截器会根据不同的HTTP状态码显示相应的错误信息，并将错误信息打印到控制台，这样，你就可以在一个地方集中处理所有的请求异常。

问题2：如何在axios中处理特定的HTTP状态码？

答案：可以在response拦截器中使用switch语句来处理特定的HTTP状态码，下面是一个示例代码：

instance.interceptors.response.use((response) => {
  return response;
}, (error) => {
  let errorMessage = '未知错误';
  if (error.response) {
    switch (error.response.status) {
      case 400:
        errorMessage = '错误请求';
        break;
      case 401:
        errorMessage = '未授权，请重新登录';
        break;
      case 403:
        errorMessage = '拒绝访问';
        break;
      case 404:
        errorMessage = '请求错误,未找到该资源';
        break;
      case 408:
        errorMessage = '请求超时';
        break;
      case 500:
        errorMessage = '服务器端出错';
        break;
      case 502:
        errorMessage = '网络错误';
        break;
      case 503:
        errorMessage = '服务不可用';
        break;
      case 504:
        errorMessage = '网络超时';
        break;
      case 505:
        errorMessage = 'http版本不支持该请求';
        break;
      default:
        errorMessage =连接错误${error.response.status};
    }
  } else if (error.request) {
    errorMessage = '请求发出但没有收到响应';
  } else {
    errorMessage = error.message || '错误';
  }
  console.log('统一错误处理: ', errorMessage);
  return Promise.reject(new Error(errorMessage));
});

以上就是关于“axios.js 异常处理”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!