Question

我正在做一个项目，使用react从SWAPI API（人，行星等）中获取不同类型的数据，但我遇到了多个Ajax请求的问题。

问题是当我快速请求2个不同的URL，例如'物种'和'人'，而我的最后一个请求是'物种'但是'人'的加载时间更长，我会得到'人'而不是。我想要的是获取最后点击的请求的数据，如果有意义的话。

我如何实现这一目标？我从谷歌找到的所有解决方案都使用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}/>
  );
}

我提出了问题的{gif here。抱歉格式错误，我正在手机上写这个。

Answer 1

您必须将请求存储在某处，并通过仅激活一个请求来放弃旧请求。类似的东西：

.obj

处理多个ajax请求，只执行最后一个请求

1 个答案: