Improve promises section

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/templates/web_standards/promise.html.md

@@ -26,7 +26,7 @@ promisedValue.then(console.log);
 
 In both cases, we will see it logged only once. This is because promises are run once are created eagerly.
 
-Listening to a promise using `.then()` does not affect nor start that promise. It has no side-effects on the source promise.
+Listening to a promise using `.then()` does not affect nor start that promise. It has no side-effect on the source promise.
 
 Once a promise has been created, then you may wait to hear its result one time, fifteen times, or not at all, and the original promise will behave the same.
 
@@ -61,15 +61,17 @@ const promisedResponse = fetch('https://swapi.dev/api/people/1/');
 We can chain the response to decode the JSON body of the response.
 
 ```javascript
-const promisedData = fetch('https://swapi.dev/api/people/1/').then(response => response.json());
+const promisedData = fetch('https://swapi.dev/api/people/1/')
+  .then(response => response.json());
 ```
 
 What happens if we want to use this data again?
 
 ```javascript
 const promisedData = fetch('https://swapi.dev/api/people/1/')
   .then(response => {
-    console.log('decoding data'); // How many times will we see this logged?
+    // How many times will we see this logged?
+    console.log('decoding data');
     return response.json();
   });
 
@@ -82,11 +84,11 @@ promisedData.then(data => {
 });
 ```
 
-Here will see `decoding data` logged once. The `fetch()` call returns a Promise, which is chained using `.then()` to unwrap the underlying JSON body by calling `.json()` on the response.
+Here we will see *‘decoding data’* logged once. The `fetch()` call returns a Promise, which is chained using `.then()` where we decode the underlying JSON body by calling `.json()` on the response.
 
 We can continue to think of these as eventual values. Once these values have been cast, they cannot change (technically we could mutate anything as JavaScript gives us free reign but we shouldn’t).
 
-The response from `fetch()` is one eventual value. The decode JSON is another eventual value, and actually has two Promises, one created by the `.json()` method, and another wrapping that created by `.then()`.
+The response from `fetch()` is one eventual value. The decoded JSON is another eventual value, and actually has two Promises, one created by the `.json()` method, and another wrapping that which was created by `.then()`.
 
 ```javascript
 const promisedResponse = fetch('https://swapi.dev/api/people/1/');
@@ -113,3 +115,83 @@ fetch('https://swapi.dev/api/people/1/')
 ### Async Await
 
 The same applies if the code is rewritten to use `async await`. The underlying objects are still Promises.
+
+The difference is that `async` requires a function, which means the code is run from scratch each time.
+
+Here’s our API call written as a function using Promises:
+
+```javascript
+const apiURL = new URL('https://swapi.dev/api/');
+
+function fetchPerson(id) {
+  return fetch(new URL(`people/${id}/`, apiURL))
+    .then(response => {
+      // How many times will we see this logged?
+      console.log('decoding data');
+      return response.json();
+    });
+}
+
+function main() {
+  fetchPerson('1');
+  fetchPerson('1');
+  // We will see 'decoding data' twice now, as our function is run from scratch twice.
+}
+
+main();
+```
+
+```javascript
+const apiURL = new URL('https://swapi.dev/api/');
+
+async function fetchPerson(id) {
+  const response = await fetch(new URL(`people/${id}/`, apiURL));
+  console.log('decoding data');
+  return response.json(); // Note: if we return a Promise, then there’s no need to await
+}
+
+async function main() {
+  await fetchPerson('1');
+  await fetchPerson('1');
+  // We will see 'decoding data' twice now, as our function is run from scratch twice.
+}
+
+main();
+```
+
+However, if we use the result from our `fetchPerson()` function (which we be a Promise), and `await` that twice (or more) then we are running the function only once.
+
+```javascript
+async function main() {
+  const promise = fetchPerson('1');
+
+  await promise;
+  await promise;
+  // We will see 'decoding data' only once, as our function is run only once.
+}
+
+main();
+```
+
+This is conceptually similar to calling `.then()` on the promise twice.
+
+```javascript
+function main() {
+  const promise = fetchPerson('1');
+
+  promise.then(data => {
+    // Do nothing
+  });
+  promise.then(data => {
+    // Do nothing
+  });
+
+  // We will see 'decoding data' only once, as our function is run only once.
+}
+
+main();
+```
+
+As we learned earlier, listening to a promise using `.then()` does not affect nor start that promise — it has no side-effect on that promise. And `await` behaves the same — it also has no side-effect on the source promise. It simply waits for its eventual value.
+
+