Discussion on: Explain Async/Await Like I'm Five

[Ben Farr]

Edit: Sorry I didn't see the example above the flattened one which is the same as one of my versions.

Your promise example has a bug but it's a really good example where async/await shines over promises.

$.get("/api/request1").then(function(result1) {
  return $.get("/api/request2?q=" + result1);
}).then(function(result2) {
  // result1 isn't in scope here and will crash
  console.log(result1 + " - " + result2);
});

result1 isn't accessible in the final then. With promises you lose the simplicity of the .then chain if you want both the first return value and to use it as a trigger for a follow-up request.

These are some ways to do it with promises.

// Store result1 in a higher scope
let result1;

$.get("/api/request1")
  .then(function (_result1) {
    result1 = _result1;
    return $.get("/api/request2?q=" + result1);
  })
  .then(function (result2) {
    console.log(result1 + " - " + result2);
  });

// Bring the scope of the result2 then within the result1 then
$.get("/api/request1").then(function (result1) {
  return $.get("/api/request2?q=" + result1).then(function (result2) {
    console.log(result1 + " - " + result2);
  });
});

// Add result1 to second request's response value
$.get("/api/request1")
  .then(function (result1) {
    return $.get("/api/request2?q=" + result1).then(function (result2) {
      return [result1, result2];
    });
  })
  .then(function (results) {
    console.log(results[0] + " - " + results[1]);
  });

// Use request1 as trigger for request2 and combine the requests/results
const request1 = $.get("/api/request1");
const request2 = request1.then(function (result1) {
  return $.get("/api/request2?q=" + result1);
});

Promise.all([request1, request2]).then(function (results) {
  console.log(results[0] + " - " + results[1]);
});

With async/await, as Davyd has shown above, you have a single scope. No workarounds are needed.

var result1 = await $.get("/api/request1");
var result2 = await $.get("/api/request2?q=" + result1);
console.log(result1 + " - " + result2);

[Davyd McColl]

Nice catch. I could hardly see all the text on my phone when I was typing. Was bound to have at least one glaring flaw (:

Now, I'm at a pc, I think I'd probably correct to:

$.get("/api/request1").then(function(result1) {
  return $.get("/api/request2?q=" + result1).then(function(result2) {
    return { result1, result2 };
  });
}).then(function(results) {
  console.log(results.result1 + " - " + results.result22);
});

(assuming I can use short notation for objects in this particular js-world)

And I think that illustrates even better why async/await is a win (: