CODEWITHSUNDEEP
javascriptasync-awaitfetch
Nil
Nil

Reputation: 23

How to chain two .then in javascript?

I have some issues while using .then in JavaScript. I have a fetch function, and then i use the result to update an array of prices. I would like to make the update function wait for the fetch function to end. I can't succeed. Any ideas ? thank you 

function FetchPrices() {
    return new Promise(function(resolve, reject) {
        console.log("j'entre dans FetchPrices")
        var call = 'https://min-api.cryptocompare.com/data/pricemulti?fsyms='+ GetCoinsListToFetch() + '&tsyms=BTC,USD,EUR&api_key=55baa6d4b58517d610476c';
        fetch(call)
        .then(function (response) {
            response.json()
            .then(function (value) {
                console.log("je suis dans le .then du fetch")
                var v = value
                pricesList = v;
                console.log(v);
                console.log("fin du fetch")

            });
        });
    })
}

function UpdatePrices() {
    console.log("j'entre dans UpdatePrices")
    console.log(assetList)
    for (asset of assetList) {
        var tempName = asset.Coin
        tempName = tempName.toUpperCase()
        var temppbtc = pricesList[tempName].BTC
        var temppeur = pricesList[tempName].EUR
        asset.Prixeuro = temppeur
        asset.Prixbtc = temppbtc
        asset.Totaleuro = asset.Quantity * asset.Prixeuro
    }

}

async function Test2 () {
    console.log("j'entre dans test2");
    await FetchPrices().then(()=>UpdatePrices())
}

It seems that it doesnt go with the 2nd function UpdatePrices after finishing the first one FetchPrices

Upvotes: 0

Views: 76

Answers (3)

mahad
mahad

Reputation: 111

Why mix async and then? I think it's cleaner if you do something like this.

const fetchFn = async () => {
   const {json} = await fetch('your url');
   const data = await json();
   return data;
}

and in your test2Fn you do something like this

const test2Fn = async () => {
    const pricesList = await fetchFn();
    UpdatePrices();
}

Hope this helps too!!!

Upvotes: 0

Swann
Swann

Reputation: 2473

As mentioned by @antonku you should directly make use of the promise returned by fetch.

As a rule of thumb, you should only be using new Promise when the thing you are trying to return is not already a promise.

function FetchPrices() {
  var call = 'https://min-api.cryptocompare.com/data/pricemulti?fsyms='+ GetCoinsListToFetch() + '&tsyms=BTC,USD,EUR&api_key=55baa6d4b58517d610476c';
  return fetch(call).then(response => response.json())
}

Upvotes: 0

antonku
antonku

Reputation: 7675

The second function is not called because the promise returned by the first function is not resolved (because resolve is never called). You can resolve it manually by calling resolve() but you should better simply return the promise created by fetch function:

function FetchPrices() {
  console.log("j'entre dans FetchPrices")
  var call = 'https://min-api.cryptocompare.com/data/pricemulti?fsyms='+ GetCoinsListToFetch() + '&tsyms=BTC,USD,EUR&api_key=440f35b466d7a82c3f7f94fd64f6436155c272410055baa6d4b58517d610476c';
  return fetch(call)
    .then(function (response) {
      response.json()
        .then(function (value) {
          console.log("je suis dans le .then du fetch")
          var v = value
          pricesList = v;
          console.log(v);
          console.log("fin du fetch")

        });
    });
}

Upvotes: 1

Related Questions