axios如何获取响应的error信息-CFANZ编程社区

使用 Axios 获取响应的错误信息

在使用 Axios 进行 HTTP 请求时，处理错误响应是开发过程中一个重要的环节。Axios 提供了一套灵活的错误处理机制，可以帮助开发者捕获和处理各种类型的错误，包括网络错误、服务器错误以及客户端错误。本文将详细介绍如何使用 Axios 获取和处理响应的错误信息，并通过示例代码展示具体实现。

安装 Axios

在使用 Axios 之前，需要先安装它。可以使用 npm 或 yarn 来安装 Axios：

npm install axios
# 或者
yarn add axios

基本使用

在了解如何处理错误之前，我们先来看看如何使用 Axios 发送一个基本的 GET 请求：

const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('Response data:', response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

在这个示例中，我们发送了一个 GET 请求，并在 .then 方法中处理成功响应，在 .catch 方法中处理可能发生的错误。

捕获和处理错误

当请求失败时，Axios 会返回一个包含错误信息的对象。这个错误对象包含几个重要的属性，可以帮助我们诊断问题。

error.message: 包含错误消息的简短描述。
error.response: 如果服务器响应了请求，但是状态码超出了 2xx 范围，则会包含一个响应对象。
error.request: 如果请求已经发送但是没有收到响应，则包含有关请求的信息。
error.config: 包含 Axios 请求的配置信息。

下面是一个详细的示例，展示了如何处理这些不同类型的错误：

const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/posts/invalid-url')
  .then(response => {
    console.log('Response data:', response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器响应了一个状态码超出 2xx 范围的响应
      console.error('Error response data:', error.response.data);
      console.error('Error response status:', error.response.status);
      console.error('Error response headers:', error.response.headers);
    } else if (error.request) {
      // 请求已经发出，但没有收到响应
      console.error('Error request:', error.request);
    } else {
      // 发生在设置请求时的错误
      console.error('Error message:', error.message);
    }
    console.error('Error config:', error.config);
  });

自定义错误处理函数

为了在项目中更好地管理错误处理，我们可以编写一个自定义的错误处理函数。这可以帮助我们在多个请求中复用相同的错误处理逻辑。

const axios = require('axios');

const handleError = (error) => {
  if (error.response) {
    console.error('Error response data:', error.response.data);
    console.error('Error response status:', error.response.status);
    console.error('Error response headers:', error.response.headers);
  } else if (error.request) {
    console.error('Error request:', error.request);
  } else {
    console.error('Error message:', error.message);
  }
  console.error('Error config:', error.config);
};

// 示例请求
axios.get('https://jsonplaceholder.typicode.com/posts/invalid-url')
  .then(response => {
    console.log('Response data:', response.data);
  })
  .catch(handleError);

使用拦截器捕获错误

Axios 提供了请求和响应拦截器，可以在请求发送之前或响应返回之前对其进行处理。这使得我们能够在一个地方集中处理所有请求的错误。

const axios = require('axios');

// 添加请求拦截器
axios.interceptors.request.use(config => {
  console.log('Request sent at:', new Date().toISOString());
  return config;
}, error => {
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  return response;
}, error => {
  handleError(error);
  return Promise.reject(error);
});

// 示例请求
axios.get('https://jsonplaceholder.typicode.com/posts/invalid-url')
  .then(response => {
    console.log('Response data:', response.data);
  })
  .catch(error => {
    console.error('Caught by interceptor:', error);
  });

在 Vue 或 React 中使用

在前端框架中，如 Vue 或 React，我们通常会在组件中使用 Axios。这里展示如何在 Vue 中处理 Axios 错误。

首先，安装 Vue 和 Axios：

npm install vue axios

然后，在 Vue 组件中使用 Axios：

<template>
  <div>
    <h1>Post</h1>
    <pre v-if="error">{{ error }}</pre>
    <pre v-if="post">{{ post }}</pre>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      post: null,
      error: null,
    };
  },
  methods: {
    fetchPost() {
      axios.get('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => {
          this.post = response.data;
        })
        .catch(error => {
          if (error.response) {
            this.error = `Error: ${error.response.status} - ${error.response.data}`;
          } else if (error.request) {
            this.error = 'Error: No response received from server';
          } else {
            this.error = `Error: ${error.message}`;
          }
        });
    },
  },
  mounted() {
    this.fetchPost();
  },
};
</script>

在这个示例中，我们在 Vue 组件的 mounted 生命周期钩子中调用 fetchPost 方法，并在方法内部处理可能的错误。