在承诺回调中发送数组响应，但响应为空白

Question

我正在从谷歌地图生成图像。这是一个承诺返回方法，因为我只是循环使用结果并将结果存储到“then”回调内的新数组变量中，但响应存在但它没有显示在浏览器中。

在我的谷歌地图生成图像功能不是承诺返回函数之前，它正在向浏览器发送响应，但它是一个承诺返回函数，因此响应存在但控制器方法没有向浏览器发送响应。

  static providerMapImageGenerator(req, res) {
    let providerArr = []
    ProvidersRepository.getProviderInfoForMapImage()
      .then(providers => {
        providers.forEach(provider => {
          // Generating image against each entr
          MapGenerator.getMapImage(
            provider.latitude,
            provider.longitude,
            provider.name,
            provider.providerId
          )
            .then(res => {
              // Saving record after each entry
              ProviderMap.create({
                providerId: provider.providerId,
                url: res.Location
              })
              // Adding new array for response
              providerArr.push({
                id: provider.providerId,
                url: res.Location,
                lat: provider.latitude,
                long: provider.longitude,
                name: provider.name
              })
            })
            .catch(err => console.log(err, "err in generating image"))
        })
        // Sending final response against all generated entries to user
        res.send(providerArr) // this is going blank to the browser
      })
      .catch(error => {
        // Sending error response if fails
        res.send(error)
      })
  }

我需要在浏览器中显示 providerArr 响应。

Answer 1

您的循环无需等待承诺结果即可进行。您可以使用async/await 和for of 循环来执行您想要的操作，如下所示：

ProvidersRepository.getProviderInfoForMapImage()
  .then(async (providers) => {
    for(provider of providers){
      // Generating image against each entr
      let image = await MapGenerator.getMapImage(
        provider.latitude,
        provider.longitude,
        provider.name,
        provider.providerId
      );
      // Saving record after each entry
      await ProviderMap.create({
         providerId: provider.providerId,
         url: res.Location
      });
       // Adding new array for response
      providerArr.push({
          id: provider.providerId,
          url: res.Location,
          lat: provider.latitude,
          long: provider.longitude,
          name: provider.name
         });
     })
    }
    // Sending final response against all generated entries to user
    res.send(providerArr) // this is going blank to the browser
  })
  .catch(error => {
    // Sending error response if fails
    res.send(error)
  })

PS：未测试

Answer 2

Amadou 的回答是正确的，但它按顺序而不是并行进行处理，等待每个 MapGenerator.getMapImage() 完成后再触发另一个请求。通过一些修改，您可以同时触发所有请求并等待所有请求完成。

  static providerMapImageGenerator(req, res) {
    let providerArr = []
    ProvidersRepository.getProviderInfoForMapImage()
      .then(providers => {
        return Promise.all(providers.map(provider => {
          // Generating image against each entr
          return MapGenerator.getMapImage(  // ** actually return the promise so
            provider.latitude,              // ** Promise.all gets an array of promises
            provider.longitude,
            provider.name,
            provider.providerId
          )
            .then(res => {
              // Saving record after each entry
              ProviderMap.create({
                providerId: provider.providerId,
                url: res.Location
              })
              // Adding new array for response
              providerArr.push({
                id: provider.providerId,
                url: res.Location,
                lat: provider.latitude,
                long: provider.longitude,
                name: provider.name
              })
            })
            .catch(err => console.log(err, "err in generating image"))
        })
        // Sending final response against all generated entries to user
        .then(() => res.send(providerArr)); // this is going blank to the browser
      })
      .catch(error => {
        // Sending error response if fails
        res.send(error)
      })
  }