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

Question

我在从 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 并渲染组件。有人可以帮忙吗，我已经花了几个小时与承诺作斗争：S

Answer 1

您可以使用Promise.all 来等待多个承诺。另请记住，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);
    })
  }

Answer 2

尝试通过添加 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);
})
}

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