异步-等待不在for循环中执行回调[重复]答案

【问题标题】：Async - await not executing callback in a for loop [duplicate]异步-等待不在for循环中执行回调[重复]
【发布时间】：2020-12-23 17:55:46
【问题描述】：

我已经使用了async function 并等待一个API 点击并显示其当前上传的文件名，然后增加计数器 I 并转到下一个文件。

问题：async 和 await 工作正常，但在发出所有请求后调用回调。

我怎样才能点击API 并打印它的名字然后去寻找另一个文件来点击API？

PS：我无法将回调更改为 promise，到目前为止，它是我组织中已定义的结构。

代码：

uploadCallback = () => {
  console.log(currentFile)
}

const loop = async() => {
  for (let i = 0; i < this.state.fln.length; i++) {
    currentFile = obj.fln;
    await uploadAPI(obj, this.uploadCallback);
    console.log('currentFile:', i, currentFile);
  }
};

【问题讨论】：

如果你不能把它改成 Promise，用一个来代替。
这里的示例代码展示了如何承诺使用回调的函数：jsfiddle.net/7p89uL5h
只需await new Promise(resolve => { uploadAPI(obj, resolve); })。
本机 for 循环不适用于此。用于...的

标签： javascript file async-await callback

【解决方案1】：

你可以试试这样的：

uploadCallback = () => {
  console.log(currentFile)
}

const loop = async() => {
  for (let i = 0; i < this.state.fln.length; i++) {
    currentFile = obj.fln;
    const res = await uploadAPI(obj);
    this.uploadCallback(res);
    console.log('currentFile:', i, currentFile);
  }
};

这将确保仅在 uploadAPI 完成后调用回调。

【讨论】：

【解决方案2】：

您需要集成 Promise。以下是 Pokemon API 的示例...

 let thisstateflnlength = 5
    
    const getAPI = (counter = 0) => {
      if (counter <= thisstateflnlength) {
        fetch("https://pokeapi.co/api/v2/pokemon/ditto").then(response => response.json()).then(data =>{
          console.log(data.forms[0])
          console.log(counter)
        }).then(data => getAPI(counter+1))
    
      }
    }
    
    getAPI()

计数器记录从 0 到 5，每个 API 调用都是异步执行的。

【讨论】：