返回

axios错误的增强

前端


大家对于axios并不陌生了，axios库，是现代前端开发必不可少的工具，我们在使用axios的时候可能会遇到一些网络请求的错误，这时候axios通常会给我们返回一个统一格式的错误信息，那么我们能不能对axios的错误信息进行增强？

  • 我们可以根据不同错误的情况，返回不同的提示信息。

  • 我们可以根据不同错误的情况，进行不同的操作，比如重试、跳转等。

  • 我们可以将错误信息记录下来，以便以后分析。

如何增强axios错误信息

  1. 使用try...catch块捕获错误

    try {
  const response = await axios.get('https://example.com');
} catch (error) {
  // 这里捕获到了错误
}

  2. 使用axios.interceptors.response.use()来拦截错误

    axios.interceptors.response.use(
  function (response) {
    // 任何状态码都视为正常响应
    return response;
  },
  function (error) {
    // 任何状态码都视为错误
    return Promise.reject(error);
  }
);

  3. 使用axios.create()来创建一个自定义的axios实例

    const axiosInstance = axios.create({
  baseURL: 'https://example.com',
  timeout: 1000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  }
});

    然后，我们可以使用这个自定义的axios实例来发送请求：

    axiosInstance.get('/api/users')
  .then((response) => {
    // 请求成功
  })
  .catch((error) => {
    // 请求失败
  });

如何自定义错误信息

我们可以使用axios的response.data属性来获取错误信息，这个属性是一个对象，其中包含错误代码、错误消息和错误堆栈。

const errorMessage = error.response.data.message;

我们可以根据错误代码、错误消息和错误堆栈来自定义错误信息。

switch (error.response.data.code) {
  case 400:
    errorMessage = 'Bad Request';
    break;
  case 401:
    errorMessage = 'Unauthorized';
    break;
  case 403:
    errorMessage = 'Forbidden';
    break;
  case 404:
    errorMessage = 'Not Found';
    break;
  case 500:
    errorMessage = 'Internal Server Error';
    break;
}

我们也可以使用axios的response.headers属性来获取错误头信息，这个属性是一个对象，其中包含错误头字段和错误头值。

const errorHeader = error.response.headers['Content-Type'];

我们可以根据错误头信息来自定义错误信息。

if (errorHeader === 'application/json') {
  errorMessage = 'The server responded with a JSON error message.';
} else {
  errorMessage = 'The server responded with a non-JSON error message.';
}

如何处理错误

我们可以使用axios的response.status属性来获取错误状态码，这个属性是一个数字，表示错误的类型。

const errorStatus = error.response.status;

我们可以根据错误状态码来处理错误。

switch (errorStatus) {
  case 400:
    // 请求错误
    break;
  case 401:
    // 未授权
    break;
  case 403:
    // 禁止访问
    break;
  case 404:
    // 找不到
    break;
  case 500:
    // 服务器内部错误
    break;
}

我们也可以使用axios的response.statusText属性来获取错误状态文本，这个属性是一个字符串，表示错误的简短。

const errorStatusText = error.response.statusText;

我们可以根据错误状态文本来处理错误。

if (errorStatusText === 'Bad Request') {
  // 请求错误
} else if (errorStatusText === 'Unauthorized') {
  // 未授权
} else if (errorStatusText === 'Forbidden') {
  // 禁止访问
} else if (errorStatusText === 'Not Found') {
  // 找不到
} else if (errorStatusText === 'Internal Server Error') {
  // 服务器内部错误
}

如何记录错误

我们可以使用axios的response.config属性来获取请求配置，这个属性是一个对象，其中包含请求URL、请求方法、请求头和请求数据。

const errorConfig = error.response.config;

我们可以使用这个请求配置来记录错误。

console.error(`Error occurred while making request to ${errorConfig.url}.`);

我们也可以使用axios的response.data属性来获取错误数据，这个属性是一个对象，其中包含错误代码、错误消息和错误堆栈。

const errorData = error.response.data;

我们可以使用这个错误数据来记录错误。

console.error(`Error message: ${errorData.message}.`);