Typescript - Promise resolves prematurely

Question

Typescript - Promise resolves prematurely

I have been given a code with three essential parts that cannot be altered:

1. First, there is a call to the getData function, followed by printing the output.

getData().then(console.log);

2. The function signature is as follows:

async getData(): Promise<string[]>

3. There is also the getDataFromUrl function:

function getDataFromUrl(url: string, callback: any) {
   fetch(URL)
   .then((content: any) => content.json())
   .then((data) => callback(data));
}

Below is my implementation for the getData function:

async getData(): Promise<string[]> {  
  return await new Promise<any>(function(resolve, reject) {
    resolve(getDataFromUrl(myUrl, ((data: string[]): string[]=> { 
      return data
    })))
  }); 
}

The issue I am facing is that the code after the fetch function is executed after:

getData().then(console.log);

Therefore, console.log ends up printing: undefined

What modifications do I need to make in the getData function to resolve this?

Thank you

javascript typescript es6-promise

Answer 1

Answer №1

Instead of completing the getDataFromUrl function, focus on completing the value that the callback function reveals.

getData(): Promise<string[]> {  
  return new Promise<string[]>(function(resolve, reject) {
    getDataFromUrl(myUrl, (data: string[]): string[] => { 
      resolve(data)
    })
  }); 
}

It's a shame you can't modify the other functions, because utilizing the promise created by fetch in your getDataFromUrl function would significantly improve the code, as shown by Quentin.

Answer 2

Instead of completing the getDataFromUrl function, focus on completing the value that the callback function reveals.

getData(): Promise<string[]> {  
  return new Promise<string[]>(function(resolve, reject) {
    getDataFromUrl(myUrl, (data: string[]): string[] => { 
      resolve(data)
    })
  }); 
}

It's a shame you can't modify the other functions, because utilizing the promise created by fetch in your getDataFromUrl function would significantly improve the code, as shown by Quentin.

Answer 3

Answer №2

The function getDataFromUrl does not have a return value, so it will result in undefined.

Therefore, when you pass undefined to resolve (which resolves another promise), the promise created later by getDataFromUrl (or specifically fetch) resolves.

Avoid creating additional promises unnecessarily.
Avoid mixing callbacks and promises.

Simply return the promise from fetch.

function getDataFromUrl(url: string, callback: any) {
   return fetch(URL)
   .then((content: any) => content.json());
}

Then, utilize that promise instead of creating a new one in getData (which does not require the use of await as it will just resolve the promise which will immediately be wrapped in a new promise by async).

getData(): Promise<string[]> {  
    return getDataFromUrl(myUrl);
}

Answer 4

The function getDataFromUrl does not have a return value, so it will result in undefined.

Therefore, when you pass undefined to resolve (which resolves another promise), the promise created later by getDataFromUrl (or specifically fetch) resolves.

Avoid creating additional promises unnecessarily.
Avoid mixing callbacks and promises.

Simply return the promise from fetch.

function getDataFromUrl(url: string, callback: any) {
   return fetch(URL)
   .then((content: any) => content.json());
}

Then, utilize that promise instead of creating a new one in getData (which does not require the use of await as it will just resolve the promise which will immediately be wrapped in a new promise by async).

getData(): Promise<string[]> {  
    return getDataFromUrl(myUrl);
}

Answer 5

Answer №3

function fetchAndDisplayData(url, callback) {
  // Utilizing fetch (which returns a promise) and then chaining to pass data to the callback function.
  fetch(url).then((response) => response.json()).then(data => callback(data));
}

// Edit: No need for async anymore.
function getDataFromAPI() {
  // Creating a promise...
  return new Promise((resolve, reject) => {
    // Using arrow function to call the API and resolve the data.
    fetchAndDisplayData('https://randomuser.me/api/', (data) => resolve(data));
  })
}

// Displaying the fetched data once getDataFromAPI completes.
getDataFromAPI().then(data => console.log(data));

References:

Fetch API
Async, Await, and Promise
Callback Functions

Answer 6

function fetchAndDisplayData(url, callback) {
  // Utilizing fetch (which returns a promise) and then chaining to pass data to the callback function.
  fetch(url).then((response) => response.json()).then(data => callback(data));
}

// Edit: No need for async anymore.
function getDataFromAPI() {
  // Creating a promise...
  return new Promise((resolve, reject) => {
    // Using arrow function to call the API and resolve the data.
    fetchAndDisplayData('https://randomuser.me/api/', (data) => resolve(data));
  })
}

// Displaying the fetched data once getDataFromAPI completes.
getDataFromAPI().then(data => console.log(data));

References:

Fetch API
Async, Await, and Promise
Callback Functions

Typescript - Promise resolves prematurely

Answer №1

Answer №2

Answer №3

Similar questions

What steps can I take to avoid random divs from overlapping on smaller screens when dealing with elements created in the created() hook?

Update button Image upon click

Spontaneous visual paired with text upon refreshing

Preload-webpack-plugin does not support pre-fetching files

Uninstall webpack-dev-server version 1.14.1 and replace it with version 1.14.0

Changing color of entire SVG image: a step-by-step guide

Cookie-powered JavaScript timer ceases after 60 seconds

Executing JavaScript functions from an ASP.NET Razor view is achieved by using the

Retrieving latitude and longitude data for airports from Airports.JSON using React Native

Tips for retrieving the text from a POST request in C#

Is there a way to unselect a button in Angular?

Deleting a file from the assets folder in Angular for good

Implementing color with JavaScript by utilizing RGB input boxes

What could be the reason for the individual components not being populated within the listItem?

Introducing a detailed model showcasing information sourced from an array of objects within Angular 14

Getting just the main nodes from Firebase using Angularfire

Exploring Angular 4.3's HTTP Interceptor Retry功能

Can you explain the meanings of <div class="masthead pdng-stn1"> and <div class="phone-box wrap push" id="home"> in more detail?

Difficulty transmitting Heroku environment variable to Angular CLI application using Node.js

creating dynamic column headers with JavaScript