从源码阅读的角度看：简易版 axios 的 response 处理

在上一篇文章中，我们完成了对 axios 中 request 部分的处理。在本文中，我们将继续深入源码，探索 response 部分的实现细节。

处理 HTTP 状态码

当服务器返回响应时，它会包含一个 HTTP 状态码，表示请求处理的状态。在 axios 中，对 HTTP 状态码的处理主要集中在 dispatchRequest 函数中。

function dispatchRequest(config) {
  return Promise.resolve(config).then(transformResponse).then(processResponse).then(transportResponse);
}

processResponse 函数负责处理 HTTP 状态码。它会检查状态码是否在 200 到 299 之间，如果不在，则抛出一个错误。

function processResponse(response) {
  const { status } = response;
  if (status >= 200 && status < 300) {
    return response;
  } else {
    throw new Error(`请求失败，状态码：${status}`);
  }
}

数据转换

在处理完 HTTP 状态码后，axios 需要将响应数据转换为 JavaScript 对象。这一步由 transformResponse 函数完成。

function transformResponse(response) {
  const { data } = response;
  return transform(data);
}

transform 函数是一个用户可配置的函数，可以根据需要对数据进行转换。例如，你可以将 JSON 数据转换为对象，或将文本数据转换为 HTML。

异常处理

在 axios 中，异常处理主要集中在 catch 函数中。它会捕获 dispatchRequest 函数中抛出的所有错误，并将其传递给用户定义的错误处理函数。

dispatchRequest(config).catch(onCanceled);

onCanceled 函数是一个用户可配置的函数，用于处理请求被取消的情况。如果请求没有被取消，则会抛出一个错误。

function onCanceled(error) {
  if (error && error.message) {
    throw error;
  }
}

通过深入了解 axios 中 response 部分的实现细节，我们不仅可以更好地掌握 axios 的工作原理，还可以根据实际需求定制自己的 HTTP 请求处理逻辑。