javascript-async-await/

[panzerdp]

Written on 08/29/2020 09:15:32

URL: https://dmitripavlutin.com/javascript-async-await/

[panzerdp]

Comment written by EV Lover on 09/02/2020 06:15:56

Is it mandatory to use promise with await ? I'm new to JS and I saw some places api calls are made only with async and await, promise is not used

[panzerdp]

Comment written by Dmitri Pavlutin on 09/02/2020 06:51:40

While it makes more sense to use await with a promise, nevertheless you can use non-promise values with await.

[panzerdp]

Comment written by EV Lover on 09/02/2020 06:53:35

Thanks, IMHO you should include example of api calls where async / await are mostly used.

[panzerdp]

Comment written by Dmitri Pavlutin on 09/02/2020 07:07:52

Thanks for the idea. I'll probably update the post and add a few practical examples.

[panzerdp]

Comment written by varontron on 09/09/2020 12:47:15

This is a helpful description. Some of your arrows don't land however. For example, you state:

The first approach is callbacks. When an async operation had been completed, a special function named callback is called:

asyncOperation(params, result => {
// Called when the operation completes
});

but there is no function named callback in the example code. The callback function is actually named result. This kind of disconnect is not an issue for anyone familiar with the concept of callbacks, but for an absolute noob, some of whom will find your post, it could derail them completely, in the opening section!

[panzerdp]

Comment written by Dmitri Pavlutin on 09/09/2020 12:52:28

Thanks varontron for your valuable feedback. I agree with you, and 'll make the necessary updates in the post.

If you have any other considerations, let me know.

[jessicagertig]

Thanks! This just brought together a lot of information that's been floating around in my head, but I didn't really understand how they should work together. And your examples are excellent and clear to me and I am pretty new to all of this! And I'm glad you took the time to explain simple things like the timeouts because I know they are a thing, but now I really understand how they work. I'm glad you didn't assume the reader would know! And Promise.all() as well .... I fell a little less confused!

[panzerdp]

Thanks! This just brought together a lot of information that's been floating around in my head, but I didn't really understand how they should work together. [...] .... I fell a little less confused!

You're welcome @JessicaGCooper.

[NoDanCoder]

3. The broken async addition.

[ottacke1991]

There is a little mistake in 4. Nesting async functions.

await salaryIncrease(baseSalary, increase) is called 3 times for each salary in the array. Each time JavaScript waits 2 seconds until the sum is calculated.

In code example function name is increaseSalary

Thank you for great article!

[JGitHub25]

Quiz: Is it an error to await for primitive values, e.g. await 3?

According to MDN: "If the value is not a Promise, it converts the value to a resolved Promise, and waits for it."

async function f3() {
  var y = await 20;
  console.log(y); // 20
}

f3();

So I don't really see a case where you'd do that. Am I missing something?

[panzerdp]

Quiz: Is it an error to await for primitive values, e.g. await 3?

According to MDN: "If the value is not a Promise, it converts the value to a resolved Promise, and waits for it."

async function f3() {
  var y = await 20;
  console.log(y); // 20
}

f3();

So I don't really see a case where you'd do that. Am I missing something?

For example you have a couple of if statements, and some of ifs can assign primitive data, some promises:

function getData(source, url) {
  let data;
  if (source === 'network') {
     data = fetch(url); // data is promise
  } else if (source === 'cache') {
     data = cache[url]; // data is not a promise
  } else {
    data = {}; // data is not a promise
  }
  const realData = await data; // awaiting a promise or regular data
  // ...
}

[dev123-dev]

function getData() { if (source === 'network') { data = fetch(url); // data is promise } console.log("Will this console be executed after the fetch returns a promise") }