mirror of
https://github.com/Stone-Red-Code/website.git
synced 2026-09-04 23:44:11 +02:00
style: autoformat/lint the codebase
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user