Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Make sure script waits for await fetch result before continuing

I need to make a post request so I’m using the fetch request below.

async function record(recording_url, options) {
    const recording_outcome = await fetch (recording_url, options);
    const outcome = await recording_outcome.json();

    return outcome;
}


let outcome = record(recording_url, options);
let record_div = document.getElementById("record_creation");
let record_saved = document.createElement("p");
record_saved.innerText = result.outcome;

However I’ve found the it doesn’t wait and the rest of the script keeps running and when adding to the innertext it prints a promise object. Do I need to restructure this or is there a sensible way to make sure it waits for the result?

I did try adding a promise like in the example below but that didn’t work as expected.

outcome.then(function(result){
   record_saved.innerText = result.outcome;
});
Tags:

2

Answers


  1. 0

    You are making your code unnecessarily complex. Instead try this simple approach.

    let record_div = document.getElementById("record_creation"); //not mentioned in question what it supposed to do
let record_saved = document.createElement("p");

//call the fetch API directly
fetch(recording_url, options)  //pass the required parameter
      .then(response => {
          // Check if the request was successful
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          //Parse the response as JSON
          return response.json()
       })
      .then(data => {
         console.log(data) //check the structure of the returned data
         record_saved.innerText = data; //do your things
       })
      .catch(error => {
        // Handle any errors that occurred during the fetch
        console.error('Fetch error:', error);
       });

    Try this, it will work.

    Login or Signup to reply.
  2. 0

    As Sjoertjuh mentioned, the following code snippet will give you the data returned from the promise:

    outcome.then(function (result) {
  record_saved.innerText = result.outcome;
});

    I’m unsure of what you are trying to accomplish next though which may be causing some confusion? Are you trying to display this text on your page? If so, you will need to insert the created p tag somewhere in the DOM like so:

    let record_div = document.getElementById("record_creation");
let record_saved = document.createElement("p");
record_div.insertBefore(record_saved, null);

    It would also help to put a console.log tracer inside your returned promise logic like this:

    outcome.then(function (result) {
  console.log(result)
  record_saved.innerText = result.outcome;
});

    Open up your developer tools and inspect the result in your console log to make sure you are accessing the correct data.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search