即使使用了 Promise，异步函数也不会等待

Question

我正在使用 JS 进行 chrome 扩展。函数 chrome.history.search 是一个异步回调。由于它是异步的，因此我计划使用 promise 使其同步。我希望代码使用 chrome.history.search 将值分配给 url，然后将其推送到全局数组 lastEpisodeLink。还有另一个函数 findLastEpisodeLink 在多个标题上调用 findLastEpisode_helper。

我需要的输出序列是：
开始， 里面， 成功，
开始， 里面， 成功，...

但我得到的是：
开始，开始，里面，成功，里面，成功

当我在函数运行后检查数组 lastEpisodeLink 时，它显示不应该是空的。我该如何解决这个问题？

是的，我已经按照How do I return the response from an asynchronous call? 的答案进行了操作，但仍然没有解决它。如果您能帮助我修复此代码，那将非常有帮助。谢谢

function findLastEpisodeLink_helper(title) {

  console.log("start");
  var url;

  function onSuccess () {
    console.log('Success!');
    lastEpisodeLink.push(url);
  }

  var promise = new Promise(function(resolve, reject) {
    
    chrome.history.search(
     {
      'text': title,
      'maxResults': 1,
      'startTime': 0
     },

    function(historyItems) {

      console.log("inside");
      url = historyItems[0]["url"];
      resolve();

    });
  });
  promise.then(onSuccess);
}

调用它的函数

function findLastEpisodeLinks() {

  for(title in stringArray) { //psudo code

    findLastEpisodeLink_helper(title);
  }
}

调用它的函数如下，它本身就是一个异步回调，所有的调用都在这里完成。

chrome.history.search(
   {
  'text': '',
  'maxResults': 10000,
  'startTime': 0
   },

   function(historyItems) {

      var allHistoryText = [];
      var allHistoryUrl = [];

      for(var i=0; i<historyItems.length; i++) {
        allHistoryText.push(historyItems[i]["title"]);
        allHistoryUrl.push(historyItems[i]["url"]);
      }

      // some functions

      findLastEpisodeLinks();

      displayAll(finalAllSeries);
});

Answer 1

我会这样做，

const lastEpisodeLink = [];

function findLastEpisodeLink_helper(title) {
  return new Promise(function(resolve) {
    chrome.history.search({
      'text': title,
      'maxResults': 1,
      'startTime': 0
     },function(historyItems) {
      var url = historyItems[0]["url"];
      lastEpisodeLink.push(url);
      resolve();
    });
  });
}


async function findLastEpisodeLinks() {
  for(var title in stringArray) { 
    await findLastEpisodeLink_helper(title);
  }
}

Answer 2

我认为您的主要问题是如何保持 for 循环中异步函数调用的顺序。为此，您只需要await findLastEpisodeLink_helper，以便循环等待直到它的承诺得到解决。

async function findLastEpisodeLink_helper(title) {
  console.log('start');
  var url;

  function onSuccess() {
    console.log('Success!');
    lastEpisodeLink.push(url);
  }

  await new Promise(function (resolve, reject) {
    chrome.history.search(
      {
        text: title,
        maxResults: 1,
        startTime: 0,
      },

      function (historyItems) {
        console.log('inside');
        url = historyItems[0]['url'];
        resolve();
      },
    );
  });

  onSuccess();
}

async function findLastEpisodeLinks() {
  for (title in stringArray) {
    //psudo code
    await findLastEpisodeLink_helper(title);
  }
}

Answer 3

使用现代async + await 语法和Promise.all：

function search(title) {
  return new Promise(resolve => {
    chrome.history.search({
      'text': title,
      'maxResults': 1,
      'startTime': 0,
    }, results => resolve(results[0].url));
  });
}

async function findLastEpisodeLinks(titles) {
  const results = await Promise.all(titles.map(search));
  console.log(results);
}

用法：findLastEpisodeLinks(['text a', 'text b', 'text c'])