处理多个ajax请求,只处理最后一个请求

我正在做一个项目,使用react从SWAPI(人、行星等)获取不同类型的数据,但是我有一个问题是多个 Ajax 请求。

问题是,当我迅速要求从2个不同的 URL 例如,'species'和'people',我的最后一个请求是'species',但是'people'的加载时间较长,我将取而代之的是'people'。 我想要的是得到上一次点击请求的数据,如果这有意义的话。

我如何做到这一点?我从Google找到的所有解决方案都使用jQuery。

这是我的一段代码 src/app.js (根元素):

constructor(){
  super();
  this.state = {
    searchfield: '',
    data: [],
    active: 'people'
 }
}

componentDidMount() {
  this.getData();
}

componentDidUpdate(prevProps, prevState) {
  if(this.state.active !== prevState.active) {
    this.getData();
  }
}

getData = async function() {
  console.log(this.state.active);
  this.setState({ data: [] });
  let resp = await fetch(`https://swapi.co/api/${this.state.active}/`);
  let data = await resp.json();
  let results = data.results;
  if(data.next !== null) {
    do {
      let nextResp = await fetch(data.next);
      data = await nextResp.json();
      let nextResults = data.results
      results.push(nextResults);
      results = results.reduce(function (a, b) { return a.concat(b) }, []);
    } while (data.next);
  }
  this.setState({ data: results});
}

categoryChange = (e) => {
  this.setState({ active: e.target.getAttribute('data-category') });
}

render() {
  return (
    <Header searchChange={this.searchChange} categoryChange={this.categoryChange}/>
  );
}

我对这个问题作了详细的描述 here . 抱歉,格式不好,我正在手机上写这个。