Question

我正在使用async-await技术来解析promises，但问题then()在promise.all()解决之前首先被调用。

更新

从Promise<void>更改为Promise<string>，结果与then()
之前的Promise.all()相同

// after uploading the image returns path
private async imageUpload(): Promise<string> {
    try {
      let img = await this.file.upload(this.imageToUpload, 'fileInput_image')
      img.subscribe((path: string) => {
        this.bg_img_url.setValue(path)
        console.log(this.bg_img_url.value) // returns url
        return this.bg_img_url.value
      })
   }
}

// after uploading the icon returns path    
private async iconUpload(): Promise<string> {
  try {
      let icon = await this.file.upload(this.iconToUpload, 'fileInput_icon')
      icon.subscribe((path: string) => {
        this.item_icon.setValue(path)
        console.log(this.item_icon.value) // returns url
        return this.item_icon.value
      })
   } 
}

问题是现在我无法在需要时获取值

Promise.all([this.iconUpload(), this.imageUpload()])
      .then((x) => {
        console.log(this.bg_img_url.value) // ''
        console.log(this.item_icon.value) // ''
})

如何在执行promise.all()之前先解决then()？

感谢您在我的问题上花费的所有时间。真的很喜欢得到不同的方法和建议。谢谢你们

Answer 1

Promise不应该与async await一起使用 - 你需要决定你想要的方法。

选项1 - 只需使用promise并删除async / await修饰符。

选项2 - 从承诺中删除then，await确保您的代码“等待”承诺解决：

async someFunction() {
...
await Promise.all([this.iconUpload(), this.imageUpload()])
... You can use the resolved values from your promises here
console.log(this.bg_img_url.value) // ''
console.log(this.item_icon.value)
}

Answer 2

您在subscribe方法中尝试返回结果。函数不等待执行订阅方法。在这里，我看到了2个Observable结果，并且更喜欢使用forkJoin，here示例。另一种方式，从Observable变量返回promise。

示例

// from imageUpload return img.toPromise(); // from iconUpload return icon.toPromise(); Promise.all([this.iconUpload(), this.imageUpload()]) .then((x) => { console.log(x); });

Answer 3

<强> SIMPLEST
实际上，由于订阅是同步的。即使这样也可行

// after uploading the image returns path
private async imageUpload(): Promise <string> {
  try {
    let img = await this.file.upload(this.imageToUpload, 'fileInput_image')
    img.subscribe((path: string) => {
      this.bg_img_url.setValue(path)
      console.log(this.bg_img_url.value) // returns url
    })
    return this.bg_img_url.value
  }
}

// after uploading the icon returns path    
private async iconUpload(): Promise <string> {
  try {
    let icon = await this.file.upload(this.iconToUpload, 'fileInput_icon')
    icon.subscribe((path: string) => {
      this.item_icon.setValue(path)
      console.log(this.item_icon.value) // returns url
    })
    return this.item_icon.value
  }
}

其他选项
你应该从这两个函数中返回一个Promise，如

// after uploading the image returns path
private async imageUpload(): Promise <string> {
  return new Promise(resolve => {
    try {
      let img = await this.file.upload(this.imageToUpload, 'fileInput_image')
      img.subscribe((path: string) => {
        this.bg_img_url.setValue(path)
        console.log(this.bg_img_url.value) // returns url
        resolve(this.bg_img_url.value)
      })
    }
  })
}

// after uploading the icon returns path    
private async iconUpload(): Promise <string> {
  return new Promise(resolve => {
    try {
      let icon = await this.file.upload(this.iconToUpload, 'fileInput_icon')
      icon.subscribe((path: string) => {
        this.item_icon.setValue(path)
        console.log(this.item_icon.value) // returns url
        resolve(this.item_icon.value)
      })
    }
  })
}

或像这样的rxjs方式

// after uploading the image returns path
private async imageUpload(): Promise <string> {
  try {
    let img = await this.file.upload(this.imageToUpload, 'fileInput_image')
    img.pipe(
      switchMap((path: string) => {
        this.bg_img_url.setValue(path)
        console.log(this.bg_img_url.value) // returns url
        return this.bg_img_url.value
      })
    ).toPromise()
  }
}

// after uploading the icon returns path    
private async iconUpload(): Promise <string> {
  try {
    let icon = await this.file.upload(this.iconToUpload, 'fileInput_icon')
    icon.pipe(
      switchMap((path: string) => {
        this.item_icon.setValue(path)
        console.log(this.item_icon.value) // returns url
        return this.item_icon.value
      })
    ).toPromise()
  }
}

then（）在promise.all（）解析之前先运行

3 个答案: