Javascript 正在promise回调中发送数组响应，但响应为空

我正在从谷歌地图生成一幅图像。这是一个promise-return方法，我只是循环使用结果，并将结果存储到“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)
      })
  }

之前，我的google地图生成图像函数不是承诺返回函数，它向浏览器发送响应，但它是承诺返回函数，因此响应存在，但控制器方法不向浏览器发送响应

  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响应显示在浏览器中。

您的循环正在进行，无需等待承诺结果。您可以使用

async/await

和

for of

循环来执行以下操作：

  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)
      })
  }

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：未测试

您的循环将在不等待承诺结果的情况下运行。您可以使用

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：未测试

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)
      })
  }

---

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)
      })
  }

---

---

For循环在继续下一次迭代之前，不要等待异步操作完成。使用

Promise.all

并向其传递一系列承诺，以等待它们全部完成。我如何解决此问题？@IsaacVidrine您能告诉我如何在我当前的代码中添加Promise.all吗。谢谢。For循环在继续下一次迭代之前，不要等待异步操作完成。使用

Promise.all

并向其传递一系列承诺，以等待它们全部完成。我如何解决此问题？@IsaacVidrine您能告诉我如何在我当前的代码中添加Promise.all吗。谢谢。for循环仅适用于对象，不适用于数组。所以这个解决方案对我来说不起作用。但是在改变of to for循环之后，它现在就起作用了。@MuhammadAdil for…of语句创建了一个循环，循环迭代iterable对象，包括：内置字符串、数组、类似数组的对象（例如参数或节点列表）、TypedArray、映射、集合和用户定义的iterables。它调用一个定制的迭代钩子，并为对象的每个不同属性的值执行语句。医生：你说得对。但我在代码中尝试了for-of循环，但循环对我不起作用。不知道为什么，所以我尝试了循环。我的结果直接来自sequelize模型。可能它不是真正的数组类对象或iterable对象。for of loop仅适用于对象，而不是数组。所以这个解决方案对我来说不起作用。但是在改变of to for循环之后，它现在就起作用了。@MuhammadAdil for…of语句创建了一个循环，循环迭代iterable对象，包括：内置字符串、数组、类似数组的对象（例如参数或节点列表）、TypedArray、映射、集合和用户定义的iterables。它调用一个定制的迭代钩子，并为对象的每个不同属性的值执行语句。医生：你说得对。但我在代码中尝试了for-of循环，但循环对我不起作用。不知道为什么，所以我尝试了循环。我的结果直接来自sequelize模型。也许它不是真正的数组状对象或可数对象。有了上述承诺，我的所有响应都将与我想要的相同。有了上述承诺，我的所有响应都将与我想要的相同