如何等待值被添加到数组中？答案

【问题标题】：How to await values being added to array?如何等待值被添加到数组中？
【发布时间】：2020-12-09 18:58:04
【问题描述】：

我有一个项目，我正在使用 Request-Promise 和 Cheerio 解析快餐菜单，然后根据用户的要求返回“订单”。但是，我在输出存储为数组的“订单”时遇到了一些问题。

var rp = require('request-promise');
var cheerio = require('cheerio');
var tempMenu = [];
var order = [];

function getItem(item) {

    var itemUrl = baseURL + '/' + item

    var itemMenu = {
        uri: itemUrl,
        transform: function (body) {
            return cheerio.load(body);
        }
    };

    rp(itemMenu)
        .then(function ($) {          
            //.class #id tag
            $(".product-card .product-name a").each(function () {
                tempMenu.push($(this).text());
                order.push(tempMenu[Math.floor(Math.random() * tempMenu.length)]);
                
            });
            console.log(order)
        })

        .catch(function (err) {
        }); 
}

getItem('drinks')
console.log(order)

目前，输出为：

[]
[
 'drink1',
 'drink2',
 'drink3'
]

如果我将代码更改为以下内容：

  rp(itemMenu)
        .then(function ($) {          
            //.class #id tag
            $(".product-card .product-name a").each(function () {
                tempMenu.push($(this).text());
                order.push(tempMenu[Math.floor(Math.random() * tempMenu.length)]);
                
            });
            console.log(1)
        })

        .catch(function (err) {
        }); 
}

getItem('drinks')
console.log(2)

日志是

2
1

所以我知道我的问题是当我尝试输出“订单”数组时它没有被填充，因为它是首先被记录的，我的问题是我如何等待数组被填充，然后输出它？

【问题讨论】：

您几乎在 我如何等待数组被填充 处回答您自己的问题；使用async / await。
@EmielZuurbier 你是对的 - 我想我只需要输入它。将我的函数更改为异步函数，并将 await 添加到我的 rp() 和 getItems() 中对其进行了整理。谢谢！

标签： javascript jquery cheerio request-promise

【解决方案1】：

您的getItem 函数应该返回一个Promise，然后您可以对其使用Promise.prototype.then() 方法或await 关键字来确保在尝试处理它们之前等待结果。

这是一个简单的例子，带有一些假的rp 函数和数据：

// Fake:
const rp = (item) => {
  console.log(`Fetching ${ item }...`);
  
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Math.random());
    }, 1000 + Math.random() * 2000)
  });
}

function getItem(item) {
  const order = [];
  
  // This `getItem` function returns a Promise...
  return rp(item).then((randomNumber) => {          
    for (let i = 0; i < 10; ++i) {
      order.push(`${ item } ${ randomNumber + i }`);
    }
    
    // ...and when this Promise resolves, it will return the `order`
    // array with the right values in it:
    return order;
  });
}

getItem('Drinks').then(order => console.log(order));

console.log('This is executed after calling getItem, but we ware still waiting for the Promise to resolve...');

.as-console-wrapper {
  max-height: none !important;
}

替代async/await:

// Fake:
const rp = (item) => {
  console.log(`Fetching ${ item }...`);
  
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Math.random());
    }, 1000 + Math.random() * 2000)
  });
}

function getItem(item) {
  const order = [];
  
  // This `getItem` function returns a Promise...
  return rp(item).then((randomNumber) => {          
    for (let i = 0; i < 10; ++i) {
      order.push(`${ item } ${ randomNumber + i }`);
    }
    
    // ...and when this Promise resolves, it will return the `order`
    // array with the right values in it:
    return order;
  });
}

// You can't use `await` outside an `async` function, so we define this first...:
async function loadDataWithAwait() {
  const order = await getItem('Food');

  console.log('This won\'t be executed until getItem\'s Promise is resolved:');
  console.log(order);
}

// ...and now call it:
loadDataWithAwait();

.as-console-wrapper {
  max-height: none !important;
}

【讨论】：

谢谢。我从 Emiel 的评论中得到了它的工作，但这给了我一些值得关注和学习的东西！

【解决方案2】：

它发生的原因是 then cb 函数进入回调队列。您应该将它们都包装在一个异步函数中，并在您想要等待的部分使用 await。

这应该可以解决你的问题。

【讨论】：