axios的响应处理

获取响应数据

在使用Axios发送请求后，可以通过.then()方法来处理成功的响应，并获取返回的数据。以下是一个示例：

代码语言：javascript复制

axios.get("https://api.example.com/data")
  .then(function (response) {
    console.log(response.data);
    // 在这里处理返回的数据
  })
  .catch(function (error) {
    console.log(error);
    // 在这里处理请求错误
  });

在上面的示例中，.then()方法中的response参数包含了返回的响应数据。您可以使用response.data来访问返回的数据，并在回调函数中进行进一步的处理。

处理错误

如果请求失败或返回的状态码不在200-299的范围内，Axios会自动将其视为错误。您可以使用.catch()方法来处理这些错误。以下是一个处理错误的示例：

代码语言：javascript复制

axios.get("https://api.example.com/data")
  .then(function (response) {
    console.log(response.data);
    // 在这里处理返回的数据
  })
  .catch(function (error) {
    console.log(error);
    // 在这里处理请求错误
  });

在上面的示例中，如果请求失败，Axios会将错误信息传递给.catch()方法中的error参数。您可以在回调函数中处理请求错误，并采取适当的操作。

获取响应头部信息

除了响应数据，您还可以获取响应的头部信息。Axios将响应头部作为response.headers提供。以下是一个示例：

代码语言：javascript复制

axios.get("https://api.example.com/data")
  .then(function (response) {
    console.log(response.headers);
    // 在这里处理响应头部信息
  })
  .catch(function (error) {
    console.log(error);
    // 在这里处理请求错误
  });

在上面的示例中，response.headers包含了响应的头部信息。您可以使用这些信息来进行进一步的操作，例如提取特定的头部字段值。

自定义响应处理函数

除了使用.then()和.catch()方法处理响应和错误，您还可以自定义响应处理函数。通过在请求配置中指定transformResponse选项，您可以提供一个函数来处理返回的数据。以下是一个示例：

代码语言：javascript复制

axios.get("https://api.example.com/data", {
  transformResponse: function (data) {
    // 自定义的响应处理逻辑
    return JSON.parse(data);
  }
})
  .then(function (response) {
    console.log(response.data);
    // 在这里处理返回的数据
  })
  .catch(function (error) {
    console.log(error);
    // 在这里处理请求错误
  });

在上面的示例中，我们通过transformResponse选项指定了一个自定义的响应处理函数。在这个函数中，我们可以对返回的数据进行任何自定义的处理，例如解析JSON数据。

axios

0 人点赞