Fulfill the promise to retrieve the value contained within

Question

Fulfill the promise to retrieve the value contained within

Is there a way to use TypeScript to call the Wikipedia API for retrieving a random page title and save it in a variable for later use? I am struggling with resolving promises as I keep getting ZoneAwarePromise returned. I'm new to both promises and TypeScript, so any guidance on how to resolve this issue would be greatly appreciated.

I have attempted to add await to my promises, but I continue to encounter returned promises instead of the actual data.

async getPage() : string {
    var url = "https://en.wikipedia.org/w/api.php";
    var params = {
        action: "query",
        generator: "random",
        rnnamespace: "0",
        format: "json",
        list: "random",
        rnlimit: "1"
    };

    url = url + "?origin=*";
    Object.keys(params).forEach(function(key){url += "&" + key + "=" + params[key];});
    return await fetch(url)
        .then (response => response.json())
        .then(data => data.query.random[0].title)
        .catch(function(error){console.log(error);});
}

My goal is to extract the title from the retrieved data and store it in a variable for future use within other functions.

javascript typescript promise fetch

Answer 1

Answer №1

execute the following steps

async retrievePage() : string {
    var wikiUrl = "https://en.wikipedia.org/w/api.php";
    var parameters = {
        action: "query",
        generator: "random",
        rnnamespace: "0",
        format: "json",
        list: "random",
        rnlimit: "1"
    };

    wikiUrl = wikiUrl + "?origin=*";
    Object.keys(parameters).forEach(function(key){wikiUrl += "&" + key + "=" + parameters[key];});

    const pageTitle = await fetch(wikiUrl)
        .then(response => response.json())
        .then(data => data.query.random[0].title);
           .catch(function(err){console.log(err);});

   // perform operations with the retrieved title   

}

Answer 2

execute the following steps

async retrievePage() : string {
    var wikiUrl = "https://en.wikipedia.org/w/api.php";
    var parameters = {
        action: "query",
        generator: "random",
        rnnamespace: "0",
        format: "json",
        list: "random",
        rnlimit: "1"
    };

    wikiUrl = wikiUrl + "?origin=*";
    Object.keys(parameters).forEach(function(key){wikiUrl += "&" + key + "=" + parameters[key];});

    const pageTitle = await fetch(wikiUrl)
        .then(response => response.json())
        .then(data => data.query.random[0].title);
           .catch(function(err){console.log(err);});

   // perform operations with the retrieved title   

}

Answer 3

Answer №2

One important aspect of async functions is that they always return promises. The main purpose of using async/await is to simplify the syntax when working with promises. It's worth noting that combining async/await with .then is possible but generally not recommended as it can complicate code readability. It's advisable to stick to one style, preferably async/await.

Your getPage function should be structured similar to this:

async getPage(): string {
    let url = "https://en.wikipedia.org/w/api.php";
    const params = {
        action: "query",
        generator: "random",
        rnnamespace: "0",
        format: "json",
        list: "random",
        rnlimit: "1"
    };

    url = url + "?origin=*";
    Object.keys(params).forEach(function(key){
      url += "&" + key + "=" + params[key];
    });

    try {
      const response = await fetch(url);
      const data = await response.json();
      return data.query.random[0].title;
    } catch (error) {
       console.log(error)
    }
}

Keep in mind that getPage will result in a promise. To access the value within the promise, you can either use .then

getPage().then(title) => console.log('title', title));

or utilize async/await

async someFunction (){
  const title = await getPage();
  console.log('title', title);
}

Answer 4

One important aspect of async functions is that they always return promises. The main purpose of using async/await is to simplify the syntax when working with promises. It's worth noting that combining async/await with .then is possible but generally not recommended as it can complicate code readability. It's advisable to stick to one style, preferably async/await.

Your getPage function should be structured similar to this:

async getPage(): string {
    let url = "https://en.wikipedia.org/w/api.php";
    const params = {
        action: "query",
        generator: "random",
        rnnamespace: "0",
        format: "json",
        list: "random",
        rnlimit: "1"
    };

    url = url + "?origin=*";
    Object.keys(params).forEach(function(key){
      url += "&" + key + "=" + params[key];
    });

    try {
      const response = await fetch(url);
      const data = await response.json();
      return data.query.random[0].title;
    } catch (error) {
       console.log(error)
    }
}

Keep in mind that getPage will result in a promise. To access the value within the promise, you can either use .then

getPage().then(title) => console.log('title', title));

or utilize async/await

async someFunction (){
  const title = await getPage();
  console.log('title', title);
}

Fulfill the promise to retrieve the value contained within

Answer №1

Answer №2

Similar questions

What are the best practices for integrating QML with Java?

Mysterious Angular Provider: $http

Trouble with X-editable: Unable to view values when editing and setting values using J

Pressing a key once causing two actions when managing content in a separate window

Retrieve information stored in a JSON data field within the results of an npm

Error: The function props.addToCart is not accessible

Issue: The THREE.GLTFLoader cannot process this asset. Only glTF versions below 2.0 are compatible

Developing a innovative and interactive nested slider using Jssor technology

Experimenting with a Collection of Items - Jest

What could be the reason for the sudden lack of content from the Blogger API?

The issue with the Z-index being ineffective is causing the button to appear behind a container in the HTML-CSS

Scenario-specific blueprints

Which is the better option for opening a link in a button: using onclick or href?

Tips on using the $.grep() method in jQuery to filter dynamic inputs

Error message: While running in JEST, the airtable code encountered a TypeError stating that it cannot read the 'bind' property of an

Opacity effect on input text when it exceeds the input boundaries

Exploring the retrieval of specific values through bitwise operations in Angular

What is the best way to delete a model from a Backbone.Collection?

What could be causing the background color not to change on the HTML page with Bootstrap?

Is there a suitable alternative that supports TypeScript, particularly with Angular 6, as D3Js does not directly support TypeScript?