重新构想我们的代码：3步优化网络请求

我们的代码就像是一辆行驶在高速公路上的汽车。虽然它能够正常运行，但我们总是希望它能够跑得更快、更平稳。重构就像是对汽车进行改装，我们可以通过调整引擎、更换轮胎、优化空气动力学来提升汽车的性能。

在本文中，我们将探讨如何通过3个简单的步骤对代码进行重构，优化网络请求部分。

1. 统一设置超时时间

超时时间就像是一个安全阀，它可以防止网络请求无限期地等待。如果某个请求在超时时间内没有收到响应，就会被自动取消。在我们的项目中，我们可以通过修改loadData()函数来设置超时时间。

const loadData = async (url) => {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, 30000);

  try {
    const response = await fetch(url, {
      signal: controller.signal,
    });
    clearTimeout(timeoutId);
    return response.json();
  } catch (error) {
    clearTimeout(timeoutId);
    throw error;
  }
};

通过这种方式，我们可以在所有的网络请求中统一设置超时时间为30秒。这样，如果某个请求在30秒内没有收到响应，就会被自动取消。

2. 在所有请求头中添加指定参数

请求头就像是一封信的信封，它包含了一些关于请求的信息，比如请求的方法、请求的资源以及请求的格式。在我们的项目中，我们需要在所有的请求头中添加一个指定的参数。

const loadData = async (url) => {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, 30000);

  try {
    const response = await fetch(url, {
      signal: controller.signal,
      headers: {
        'X-Custom-Header': 'value'
      },
    });
    clearTimeout(timeoutId);
    return response.json();
  } catch (error) {
    clearTimeout(timeoutId);
    throw error;
  }
};

通过这种方式，我们可以确保所有的网络请求都包含这个指定的参数。这个参数可以是任何东西，比如用户ID、会话ID或者其他任何你需要的信息。

3. 提取公共代码

在对loadData()函数进行修改之后，我们发现代码变得重复了。为了解决这个问题，我们可以提取公共代码到一个单独的函数中。

const createRequest = (url, options) => {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, 30000);

  return fetch(url, {
    signal: controller.signal,
    ...options,
  })
    .then(response => {
      clearTimeout(timeoutId);
      return response.json();
    })
    .catch(error => {
      clearTimeout(timeoutId);
      throw error;
    });
};

const loadData = async (url) => {
  return createRequest(url, {
    headers: {
      'X-Custom-Header': 'value'
    },
  });
};

现在，loadData()函数只需要调用createRequest()函数即可。这样，代码变得更加简洁和可维护。

通过这3个简单的步骤，我们完成了对代码的重构，优化了网络请求部分。现在，我们的代码运行得更快、更稳定了。