# 解决 React 中的请求竞态条件问题

在编写 React 项目时，我们经常会遇到这样的情况：有两个网络请求选项，例如选项 A 和选项 B。默认情况下，我们请求并显示选项 A 的数据，但是如果用户点击了选项 B，我们就会请求并显示选项 B 的数据。然而，由于网络延迟，如果用户快速地点击了选项 B，然后又点击了选项 A，结果列表可能会错误地显示选项 B 的数据。这是因为选项 B 的请求比选项 A 的请求更早完成。

这实际上是一个并发问题，被称为"竞态条件"。多个过程同时尝试访问和更改同一资源（在这个案例中，这个资源就是你的数据列表），导致结果依赖于它们执行的精确顺序。

这篇博客文章将介绍如何解决这个问题。

## 使用请求取消技术

一种解决方案是在每次发出新请求时取消之前的请求。这种技术通常被称为"请求取消"或"请求防抖"。

例如，如果你正在使用 Axios 进行网络请求，Axios 支持取消请求。下面是一个简单的示例：

Language
Copy code
```jsx
import axios from 'axios';

class MyComponent extends React.Component {
  signal = axios.CancelToken.source();

  fetchData = async (url) => {
    try {
      const response = await axios.get(url, { cancelToken: this.signal.token });
      this.setState({ data: response.data });
    } catch (err) {
      if (axios.isCancel(err)) {
        console.log('Previous request cancelled', err.message);
      } else {
        console.log('Something went wrong', err.message);
      }
    }
  };

  handleOptionA = () => {
    this.signal.cancel('Operation A started');  // Cancel previous request
    this.signal = axios.CancelToken.source();  // Create new cancel token
    this.fetchData('/api/optionA');
  };

  handleOptionB = () => {
    this.signal.cancel('Operation B started');  // Cancel previous request
    this.signal = axios.CancelToken.source();  // Create new cancel token
    this.fetchData('/api/optionB');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleOptionA}>Option A</button>
        <button onClick={this.handleOptionB}>Option B</button>
        {/* your data list here */}
      </div>
    );
  }
}
```

这段代码将在启动新请求之前取消任何现有的请求，从而确保应用程序只会显示最新请求的数据，避免了我们在开头描述的问题。

## 使用 Unique ID 技术

如果你使用的是 Fetch API 或其他不支持取消操作的库，可能需要引入额外的逻辑来处理这种情况。

我们可以在发出请求时保存一个 unique ID，并在接收到响应时检查它是否仍然是最新的 ID。如果不是，那么就可以忽略这个响应。这是一个简单的例子：

Language
Copy code
```jsx


class MyComponent extends React.Component {
  counter = 0;

  state = {
    data: []
  };

  fetchData = async (url, currentCounter) => {
    const response = await fetch(url);
    const data = await response.json();

    // Ignore response if another request has been made in the meantime
    if (this.counter === currentCounter) {
      this.setState({ data });
    }
  };

  handleOptionA = () => {
    this.counter++;
    this.fetchData('/api/optionA', this.counter);
  };

  handleOptionB = () => {
    this.counter++;
    this.fetchData('/api/optionB', this.counter);
  };

  render() {
    return (
      <div>
        <button onClick={this.handleOptionA}>Option A</button>
        <button onClick={this.handleOptionB}>Option B</button>
        {/* your data list here */}
      </div>
    );
  }
}
```

在这个例子中，`this.counter`是用于跟踪请求的 unique ID。在每次点击选项 A 或 B 时，都会增加这个计数器，并将当前的值传递给`fetchData`方法。然后，在处理响应时，将当前的计数器值与在发出请求时的值进行比较。如果它们不同，就意味着在等待响应的过程中发出了一个新的请求，所以就忽略这个响应。

这种方式可以有效地防止因网络延迟或请求处理时间不同造成的竞态条件问题。

## 结语

解决并发问题可能会有些复杂，但是如果我们理解了问题的本质，并采用恰当的策略，我们就能保证我们的应用程序能按照预期的方式工作。希望这篇文章能帮助你解决 React 项目中的请求竞态条件问题。