如何在使用异步代码循环时维护状态

Question

我对JS中使用Promissions或async/await的异步操作还不熟悉，我正试着对这个概念进行总结。我遇到的一个问题是，如何在多个数组上循环并对每个元素执行异步操作时保持状态。例如，我有以下代码：

const listOfStores = [{location: '123 testers lane'}, {location: '321 testers lane'}];
const listofTechs = [{location: '123 nowhere lane'}];

for(let i = 0; i < listOfStores.length; i++){
  let store = listOfStores[i];
  
  let bestDistance = Infinity;
  for(let j = 0; j < listOfTechs.length; j++){
    let tech = listOfTechs[j];
    
    let distance = await getDistance(store.location, tech.location);
    
    bestDistance = Math.min(bestDistance, distance);
    
  }
  
  console.log('Closest Tech Is ' + bestDistance + ' Miles Away')
}

async function getDistance(store, tech) {
  return new Promise(function(resolve, reject){
    // THIS WOULD ACTUALLY BE AN AJAX CALL TO AN API
    window.setTimeout(function(){
      resolve( Math.floor(Math.random() * (100 - 25) + 25));
    }, 2000);
  });
}

虽然上面的代码符合我的目的，但我试图更好地理解基于promise的代码。我意识到循环必须是同步的，逻辑才能工作，但API调用本质上是异步的。我不是在尝试创建异步代码，而是在尝试处理异步代码。暂停代码执行并等待用wait解决promise效果良好。我的理解是，基于promise的代码可以重写为异步/等待代码，反之亦然，所以我的问题是，如何在不使用异步/等待的情况下重写上面的代码？据我所知，没有办法暂停执行或维持定期promise的状态。

这个问题似乎很常见，以至于有人已经开发了一个处理它的模式，但是到目前为止我还没有找到那个模式。

注意：每个循环必须在进入下一个循环之前完成。我考虑循环遍历存储和技术数组，并创建一个promise，最终将解决该技术和存储之间的距离，然后将这些promise存储在一个数组中，并使用Promise. all（）来解决所有的个人promise。但这是行不通的。首先，因为可能有数千个商店，同时解决每个商店会导致费率限制问题。如果其中一个promise被拒绝，所有（）都会失败，因为可能有成千上万个promise，其中一个肯定会失败，并导致所有其他promise也失败。

非常感谢您的任何建议

谢谢

Answer 1

我的问题是如何在不使用async/wait的情况下重写上面的代码？据我所知，没有办法暂停执行或保持定期promise的状态。

如果没有async/await，编写起来就不那么简单了，我知道除了好奇之外，没有其他理由这样做（async/await之所以添加，是为了让某些类型的异步代码更容易编写）。这是我们在async/await出现之前的做法，您可以使用第三方库为您管理循环（例如Bluebird或async库），也可以编写自己的重复机制，而不使用语言循环构造。

下面是一个示例，我创建了一个实用函数，用于对数组进行非同步迭代：

// utility function for doing an asynchronous iteration of an array
function iterateArrayAsync(array, fn) {
    let index = 0;

    function next(val) {
        if (index < array.length) {
            return fn(array[index++]).then(next);
        }
        return val;
    }
    return Promise.resolve(next());
}

function calcBestDistance() {
    const listOfStores = [{ location: '123 testers lane' }, { location: '321 testers lane' }];
    const listOfTechs = [{ location: '123 nowhere lane' }];

    let bestDistance = Infinity;

    return iterateArrayAsync(listOfStores, (store) => {
        return iterateArrayAsync(listOfTechs, (tech) => {
            // process store, tech combination here
            return getDistance(store.location, tech.location).then(distance => {
                bestDistance = Math.min(bestDistance, distance);
            });
        });
    }).then(() => {
        // make resolved value be the bestDistance
        console.log('Closest Tech Is ' + bestDistance + ' Miles Away')
        return bestDistance;
    });
}

function getDistance(store, tech) {
    return new Promise(function(resolve, reject) {
        // THIS WOULD ACTUALLY BE AN AJAX CALL TO AN API
        setTimeout(function() {
            resolve(Math.floor(Math.random() * (100 - 25) + 25));
        }, 500);
    });
}

calcBestDistance().then(result => {
    console.log(result);
}).catch(err => {
    console.log(err);
});