then() will execute before all promises in promise.all() are resolved

Question

then() will execute before all promises in promise.all() are resolved

Implementing the async-await technique to handle the promises, I encountered an issue where then() is being called before the completion of Promise.all().

Revised

After changing from Promise<void> to Promise<string>, the problem persists with then() executing prematurely.

// This function uploads an image and returns its 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) // displays url
        return this.bg_img_url.value
      })
   }
}

// This function uploads an icon and returns its 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) // shows url
        return this.item_icon.value
      })
   } 
}

The issue arises when trying to access values at a later stage

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

Is there a way to ensure that promise.all() resolves before triggering then()?

Appreciate all the time and effort dedicated to helping me with this problem. Thank you for your valuable input!

angular typescript promise async-await angular6

Answer 1

Answer №1

It is important to consider the use of promises in conjunction with async/await and make a decision based on your preferred approach.

Option 1 - Simply utilize the promise itself and eliminate the async/await decorators.

Option 2 - Omit then from the promise, as await guarantees that your code will pause until the promises are resolved:

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

Answer 2

It is important to consider the use of promises in conjunction with async/await and make a decision based on your preferred approach.

Option 1 - Simply utilize the promise itself and eliminate the async/await decorators.

Option 2 - Omit then from the promise, as await guarantees that your code will pause until the promises are resolved:

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

Answer 3

Answer №2

EASIEST METHOD
Indeed, considering that subscribe is synchronous. This approach will also be effective

// after image upload, return the 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) // shows the URL
    })
    return this.bg_img_url.value
  }
}

// after icon upload, return the 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) // shows the URL
    })
    return this.item_icon.value
  }
}

ALTERNATIVE SUGGESTIONS
You could modify both functions to return a Promise like so

// after image upload, return the 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) // shows the URL
        resolve(this.bg_img_url.value)
      })
    }
  })
}

// after icon upload, return the 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) // shows the URL
        resolve(this.item_icon.value)
      })
    }
  })
}

OR you can opt for the rxjs method as shown below

// after image upload, return the 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) // shows the URL
        return this.bg_img_url.value
      })
    ).toPromise()
  }
}

// after icon upload, return the 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) // shows the URL
        return this.item_icon.value
      })
    ).toPromise()
  }
}

Answer 4

EASIEST METHOD
Indeed, considering that subscribe is synchronous. This approach will also be effective

// after image upload, return the 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) // shows the URL
    })
    return this.bg_img_url.value
  }
}

// after icon upload, return the 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) // shows the URL
    })
    return this.item_icon.value
  }
}

ALTERNATIVE SUGGESTIONS
You could modify both functions to return a Promise like so

// after image upload, return the 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) // shows the URL
        resolve(this.bg_img_url.value)
      })
    }
  })
}

// after icon upload, return the 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) // shows the URL
        resolve(this.item_icon.value)
      })
    }
  })
}

OR you can opt for the rxjs method as shown below

// after image upload, return the 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) // shows the URL
        return this.bg_img_url.value
      })
    ).toPromise()
  }
}

// after icon upload, return the 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) // shows the URL
        return this.item_icon.value
      })
    ).toPromise()
  }
}

Answer 5

Answer №3

Attempting to retrieve a result within the subscribe method may not work as functions do not wait for the execution of the subscribe method. One approach is to utilize forkJoin when dealing with 2 Observable results, as shown in this example. Alternatively, you can return promises from Observable variables.

For example:

// Return promise from imageUpload
return img.toPromise();

// Return promise from iconUpload
return icon.toPromise();

Promise.all([this.iconUpload(), this.imageUpload()])
  .then((x) => {
      console.log(x);
});

Answer 6

Attempting to retrieve a result within the subscribe method may not work as functions do not wait for the execution of the subscribe method. One approach is to utilize forkJoin when dealing with 2 Observable results, as shown in this example. Alternatively, you can return promises from Observable variables.

For example:

// Return promise from imageUpload
return img.toPromise();

// Return promise from iconUpload
return icon.toPromise();

Promise.all([this.iconUpload(), this.imageUpload()])
  .then((x) => {
      console.log(x);
});

then() will execute before all promises in promise.all() are resolved

Answer №1

Answer №2

Answer №3

Similar questions

Fetching information from a JSON source and storing it within an array of

Using TypeScript: Inclusion of all object keys that correspond to a particular type

I am interested in retrieving a particular item from the data() function in Firestore

Is there a way to detect browser errors using JavaScript or Angular 2?

Encountering issues with Node-persist on a complex Node.js application leading to missing return

How do we troubleshoot the NullReferenceException thrown by async/await to determine where we went wrong?

Creating a dropdown menu in Bootstrap 5 without using any of the Bootstrap

Incorrect errors are displayed by VS Code in ts-node shell scripts

The 'asObservable' property is not present on the type '() => any'.ts(2339)

Cross-origin request error persists despite configuring headers on the server. Unable to successfully relocate image to designated directory on the server

Exploring Child Types in Typescript and JSX minus the React framework

Initial values of dual knob settings on Ionic Range and their ability to update dynamically

What is the best way to initialize elements once the data has finished loading?

I rely on a powerful compiler in Angular that is only compatible with the View Engine, yet unfortunately, the View Engine is now obsolete

`Browser Extension Compatibility``

Tips on using services for storing and fetching list data in Angular

Generate an interactive sitemap.xml in ReactJS for each request made to http://example.com/sitemap.xml

Is there a way to retrieve all potential string literals from an Array<>?

The state of an Angular 4 component

What is the best way to customize fonts for PDFMake in Angular projects?