style: autoformat/lint the codebase

This commit is contained in:
Jean-Philippe Sirois
2019-10-07 07:21:54 -04:00
parent 153295f543
commit 583b7ea61a
14 changed files with 134 additions and 134 deletions
@@ -27,7 +27,7 @@ This basic example will return a promise with the value of `foo`.
## Await
The `await` keyword is used to wait until a promise has executed and fetches the result. In order to use the `await` keyword, you **need** to be inside an `async` function.
The `await` keyword is used to wait until a promise has executed and fetches the result. In order to use the `await` keyword, you **need** to be inside an `async` function.
```js
async function demo() {
@@ -43,7 +43,7 @@ Another example to demonstrate this is if we extended the `foo()` function from
```js
async function foo() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("foo"), 5000)
setTimeout(() => resolve("foo"), 5000);
});
let data = await promise; // Execution waits here until promise resolves
@@ -93,7 +93,7 @@ To get around this issue, you can use an declare asynchronous function anonymous
})();
```
Top-Level-Await is something that *may* get added to Javascript in the future, but for now wrapper functions like above are needed for this functionality.
Top-Level-Await is something that _may_ get added to Javascript in the future, but for now wrapper functions like above are needed for this functionality.
## Real World Example
@@ -110,29 +110,33 @@ async function getCharacters() {
(async () => {
try {
let characters = await getCharacters();
console.log(characters) // (20) [{...}, {...}, {...}]
console.log(characters); // (20) [{...}, {...}, {...}]
} catch (err) {
console.error(err);
}
})();
```
In this example, we are querying real data from the Rick & Morty API. This API has a lot of information regarding Rick & Morty, but here, we are trying to retrieve all the characters.
In this example, we are querying real data from the Rick & Morty API. This API has a lot of information regarding Rick & Morty, but here, we are trying to retrieve all the characters.
- The first thing we do is use `fetch` to retrieve the data from the API. `fetch` is a built in function in web browsers to do http requests, and returns a Promise by default. We `await` the result of this.
- When we get the result, we need to get the `JSON` value of the data. To do this, the `.json()` method from fetch is used. We then return the results.
- As `await` can only be used in an `async` function, we use the method from above to make this work. As `getCharacters()` returns a Promise due to it being `async`, we `await` the result. We surround this in a `try...catch` in case fetch returns an error. Then, if no error is returned, `characters` contains the information we want, and is logged to the console. If `getCharacters()` returns an error, that error is also logged.
## Comparision with default Promises:
Below is the same code implemented without using Async / Await as a comparision. Here, you can see the differences between the two methods, and how Aysnc / Await makes the code appear in a *more synchronous* pattern, and can be clearer to follow.
Below is the same code implemented without using Async / Await as a comparision. Here, you can see the differences between the two methods, and how Aysnc / Await makes the code appear in a _more synchronous_ pattern, and can be clearer to follow.
```js
function getCharacters() {
return fetch(`https://rickandmortyapi.com/api/character`)
.then(response => response.json())
.then(response => response.results)
.then(response => response.results);
}
getCharacters().then(characters => {
console.log(characters) // (20) [{...}, {...}, {...}]
}).catch(err => console.error(err))
```
getCharacters()
.then(characters => {
console.log(characters); // (20) [{...}, {...}, {...}]
})
.catch(err => console.error(err));
```
@@ -31,8 +31,8 @@ called `getMembers` that retrieves all the members in a discord server. When we
function we see the following result.
```js
const members = getMembers("The Programmers Hangout")
console.log(members) // Promise {<pending>}
const members = getMembers("The Programmers Hangout");
console.log(members); // Promise {<pending>}
```
Normally, we would have expected to see an array of all the members but it takes time to
@@ -44,8 +44,8 @@ to access the actual members like so.
```js
getMembers("The Programmers Hangout").then(members => {
console.log(members) // (32k) [{...}, {...}, {...}]
})
console.log(members); // (32k) [{...}, {...}, {...}]
});
```
This way we are able to make sure that we only try to `console.log` when the `getMembers` function has resolved and ready to be used.
@@ -63,11 +63,11 @@ You may have tried doing something like this before.
```js
// Incorrect code, don't copy!
let results
let results;
getWeather("Los Angeles").then(weather => {
results = weather
})
console.log(results) // undefined
results = weather;
});
console.log(results); // undefined
```
Why is `results` undefined? Because **Javascript doesn't wait**. Whenever a Promise is created,
@@ -81,8 +81,8 @@ In order to fix this problem we need to move the `console.log` inside the `.then
```js
getWeather("Los Angeles").then(weather => {
console.log(weather) // Sunny, probably
})
console.log(weather); // Sunny, probably
});
```
### Real World Example
@@ -94,12 +94,12 @@ You can try it in your browser if you want to test it out.
function getCharacters() {
return fetch(`https://rickandmortyapi.com/api/character`)
.then(response => response.json())
.then(response => response.results)
.then(response => response.results);
}
getCharacters().then(characters => {
console.log(characters) // (20) [{...}, {...}, {...}]
})
console.log(characters); // (20) [{...}, {...}, {...}]
});
```
Let's break down what's happening in this function
@@ -14,10 +14,10 @@ function doAsync(number) {
return new Promise(function(resolve, reject) {
doDatabase().then(function(dbResult) {
otherDbFunction(dbResult).then(function(secondResult) {
resolve(secondResult + 10)
})
})
})
resolve(secondResult + 10);
});
});
});
}
```
@@ -28,9 +28,9 @@ already returns a promise, you can just return the original thing.
function doAsync(number) {
return doDatabase().then(function(dbResult) {
otherDbFunction(dbResult).then(function(secondResult) {
return secondResult + 10
})
})
return secondResult + 10;
});
});
}
```
@@ -41,11 +41,11 @@ is that they allow you do chain them sequentially.
function doAsync(number) {
return doDatabase()
.then(function(dbResult) {
return otherDbFunction(dbResult)
return otherDbFunction(dbResult);
})
.then(function(secondResult) {
return secondResult + 10
})
return secondResult + 10;
});
}
```
@@ -57,8 +57,8 @@ function doAsync(number) {
return doDatabase()
.then(otherDbFunction)
.then(function(secondResult) {
return secondResult + 10
})
return secondResult + 10;
});
}
```
@@ -68,7 +68,7 @@ And you don't need those returns if you just have ES6 arrow functions
const doAsync = number =>
doDatabase()
.then(otherDbFunction)
.then(secondResult => secondResult + 10)
.then(secondResult => secondResult + 10);
```
Wow, that last one looks a lot cleaner to me than the first. Keeping that in mind, maybe we could be making some of our other functions cleaner as well