当所有嵌套的 Axios 调用完成时 ReactJS setState

IT技术 reactjs asynchronous async-await axios es6-promise
2021-05-05 07:53:21

我在从 forEach 循环内的嵌套 axios 调用更新我的状态时遇到问题：

constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
      items: []
    };
    //Binding fetch function to component's this
    this.fetchFiles = this.fetchFiles.bind(this);
  }

  componentDidMount() {
    this.fetchFiles();
  }

  fetchFiles() {
    axios.get('/list')
    .then((response) => {
      var items = response.data.entries;
      items.forEach((item, index) => {
        axios.get('/download'+ item.path_lower)
        .then((response) => {
          item.link = response.data;
        })
        .catch(error => {
          console.log(error);
        })
      });
      this.setState(prevState => ({
        isLoaded: true,
        items: items
      }));
      console.log(this.state.items);
    })
    .catch((error) => {
      console.log(error);
    })
  }

这个想法是使用它的 API（JavaScript SDK）从 Dropbox 获取所有项目，然后对于每个项目，我还需要调用不同的 API 端点来获取临时下载链接并将其分配为新属性。只有在所有项目都附加了它们的链接之后，我才想要 setState 并呈现组件。有人可以帮忙解决这个问题吗，我已经花了好几个小时与Promise斗争：S

2个回答

你可以Promise.all用来等待多个Promise。还要记住这setState是异步的，你不会看到立即的变化。你需要传递一个回调。

  fetchFiles() {
    axios.get('/list')
    .then((response) => {
      var items = response.data.entries;

      // wait for all nested calls to finish
      return Promise.all(items.map((item, index) => {
        return axios.get('/download'+ item.path_lower)
          .then((response) => {
            item.link = response.data;
            return item
          });
      }));     
    })
    .then(items => this.setState(prevState => ({
        isLoaded: true,
        items: items
      }), () => console.log(this.state.items)))
    .catch((error) => {
      console.log(error);
    })
  }

尝试通过添加async关键字使 fetchfiles() 函数成为异步方法。现在，我们必须等到项目获取它们的下载链接，因此在该行之前添加一个await关键字，使代码等待 axios 调用完成。

async function fetchFiles() {
axios.get('/list')
.then(async function(response){
  var items = response.data.entries;
  await items.forEach((item, index) => {
    axios.get('/download'+ item.path_lower)
    .then((response) => {
      item.link = response.data;
    })
    .catch(error => {
      console.log(error);
    })
  });
  this.setState(prevState => ({
    isLoaded: true,
    items: items
  }));
  console.log(this.state.items);
})
.catch((error) => {
  console.log(error);
})
}

我还没有测试代码，但它应该可以工作。

其它你可能感兴趣的问题
上一篇无法使用 React 获取 firebase 集合 下一篇Ag-grid对cellFocused的相反方法