如何在Angular 6的循环中链接承诺

Question

我正在尝试使用名为 addDevice() 的函数更新本地存储，它会检查密钥中是否已经存在一些数据，然后将其附加到其他内容中，只需更新密钥即可。

export class DeviceService implements devicesInterface {

  devices : Array<deviceInterface> = [];  

  constructor(private storage : Storage, private http : HttpClient) { }

    addDevice(ssid : String, name : String){
      console.log("add device called "+ssid +name)
      return this.getDevices().then((res : devicesInterface) => {
        console.log("res");
        console.log(res)
        if (res) {

          this.devices = res.devices;
          console.log(res);
          this.devices.push({ ssid: ssid, name: name });
          return this.storage.set(TOTAL_DEVICES, { devices: this.devices });
        }
        else {
          console.log("not res");
          let devices_obj = { devices: [{ ssid: ssid, name: name }] };
          return this.storage.set(TOTAL_DEVICES, devices_obj);
        }
      })     
  }


  getDevices(){
    return this.storage.get(TOTAL_DEVICES)
  }
}

从页面中，我调用了一个 API，它解析为 deviceInterface 类型的数组。

  this.deviceService.getDevicesFromServer(this.authenticationService.getToken())
        .subscribe((res : Array<deviceInterface>) =>{
            if(res){
              this.storage.remove("TOTAL_DEVICES")
              this.devices = []
            }

            res.map(async device => {
              await this.deviceService.addDevice(device.ssid, device.name).then(res=>{
                console.log("device added..")
                this.devices.push(device)
                console.log(res)
              })
            });
          })

addDevice 函数必须在链中调用，这样下次调用时它会获取数据并追加，如果异步调用此函数，数据将被一次又一次地覆盖。

我已经搜索了很多但没有找到任何与我的问题相匹配的相关解决方案，我如何在 res 对象上链接迭代并在最后一次调用解决后调用 addDevice 函数。

Answer 1

您从 addDevice() 方法返回了错误的承诺。返回 setter 承诺而不是 getter 承诺

addDevice(ssid : String, name : String){
  console.log("add device called "+ssid +name);

  return new Promise((resolve, reject) => {
    this.getDevices().then((res : devicesInterface) => {
      console.log("res");
      console.log(res);

      if (res) {
        this.devices = res.devices;
        console.log(res);
        this.devices.push({ ssid: ssid, name: name });
        this.storage.set(TOTAL_DEVICES, { devices: this.devices }).then(resolve).catch(reject);
      }
      else {
        console.log("not res");
        let devices_obj = { devices: [{ ssid: ssid, name: name }] };
        this.storage.set(TOTAL_DEVICES, devices_obj).then(resolve).catch(reject);
      }
    });
  });   

}

Answer 2

我认为您的 map 函数不会等待每次迭代完成，因此结果会被覆盖。你可以试试：

for (const device of res) {
    await this.deviceService.addDevice(device.ssid, device.name)
    .then(res => {
            console.log("device added..")
            this.devices.push(device)
            console.log(res)
    })
}

更多详情见https://stackoverflow.com/a/37576787/4553162