为什么解析器不等待 Promise.resolve？答案

【问题标题】：Why doesn't the parser wait for Promise.resolve?为什么解析器不等待 Promise.resolve？
【发布时间】：2021-10-12 22:46:33
【问题描述】：

我正在使用 React，但我不明白为什么在运行 map 函数时的 useEffect 中，代码的第二部分在第一部分之前运行（这是一个承诺解析）。解析器不应该等待 promise 解析然后运行代码的第二部分吗？

  useEffect(() => {

    const pools = mainnet.Exchanges.Pancakeswap.LpTokens.map((lpPool) => {
        // part 1
        const [tokenZeroSymbol, tokenOneSymbol] = lpPool.name.replace(' LP', '').split('-');
        const prices = fetchTokenPrice(tokenZeroSymbol.toLowerCase(), tokenOneSymbol.toLowerCase());
        Promise.resolve(prices).then((values) => {
          const [priceTokenZero, priceTokenOne] = values;
          filteredFarmPools.find((pool) => {
            if (lpPool.name.replace(' LP', '') === pool.name) {
              pool.priceTokenZero = values[0].usd;
              pool.priceTokenOne = values[1].usd;
            }
            console.log('inside the fethcprice promise');
          });
        });


        // part 2
        filteredFarmPools.find((pool) => {
          if (lpPool.name.replace(' LP', '') === pool.name) {
            const tvl0 = (pool.reserveTokenZero / 10 ** 18) * pool.priceTokenZero;
            const tvl1 = (pool.reserveTokenOne / 10 ** 18) * pool.priceTokenOne;
            pool.tvl = tvl0 + tvl1;
          }
          console.log('inside the tvl calc');
        });
    });

【问题讨论】：

标签： reactjs asynchronous promise use-effect

【解决方案1】：

没有。

Promise 为您提供一个对象，您可以传递并调用 then on。

它们不会将异步代码变成阻塞代码。

代码的第二部分不在 then 回调中，因此它在异步代码（将触发第一个 Promise 解析）在后台运行时运行。

也就是说，请参阅 the await keyword 以了解可能会产生 Promise 阻塞的错觉的语法。

【讨论】：

【解决方案2】：

useEffect(() => {
    const processPools = async () => {
        for (let lpPool of mainnet.Exchanges.Pancakeswap.LpTokens) {
            const [tokenZeroSymbol, tokenOneSymbol] = lpPool.name.replace(' LP', '').split('-');
            const values = await fetchTokenPrice(tokenZeroSymbol.toLowerCase(), tokenOneSymbol.toLowerCase());
            // Promise.resolve(prices).then((values) => {
            const [priceTokenZero, priceTokenOne] = values;
            filteredFarmPools.find((pool) => {
                if (lpPool.name.replace(' LP', '') === pool.name) {
                    pool.priceTokenZero = values[0].usd;
                    pool.priceTokenOne = values[1].usd;
                }
                console.log('inside the fethcprice promise');
                // });
            });
        }
    }

    processPools();
});

原 Array.map 不支持异步
Promise.resolve 立即返回，与 Promise.then 没有区别

【讨论】：