mirror of
https://github.com/Stone-Red-Code/website.git
synced 2026-09-07 07:56:12 +02:00
promises post
This commit is contained in:
Xetera
committed by
Jean-Philippe Sirois
Jean-Philippe Sirois
parent
d2f9ffc2a3
commit
76aedcc516
@@ -37,217 +37,7 @@ body {
|
|||||||
padding-left: 2.8em;
|
padding-left: 2.8em;
|
||||||
overflow: initial;
|
overflow: initial;
|
||||||
}
|
}
|
||||||
// article,
|
|
||||||
// aside,
|
|
||||||
// details,
|
|
||||||
// figcaption,
|
|
||||||
// figure,
|
|
||||||
// footer,
|
|
||||||
// header,
|
|
||||||
// main,
|
|
||||||
// menu,
|
|
||||||
// nav,
|
|
||||||
// section,
|
|
||||||
// summary {
|
|
||||||
// display: block;
|
|
||||||
// }
|
|
||||||
// audio,
|
|
||||||
// canvas,
|
|
||||||
// progress,
|
|
||||||
// video {
|
|
||||||
// display: inline-block;
|
|
||||||
// }
|
|
||||||
// audio:not([controls]) {
|
|
||||||
// display: none;
|
|
||||||
// height: 0;
|
|
||||||
// }
|
|
||||||
// progress {
|
|
||||||
// vertical-align: baseline;
|
|
||||||
// }
|
|
||||||
// [hidden],
|
|
||||||
// template {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
// a {
|
|
||||||
// background-color: transparent;
|
|
||||||
// -webkit-text-decoration-skip: objects;
|
|
||||||
// }
|
|
||||||
// a:active,
|
|
||||||
// a:hover {
|
|
||||||
// outline-width: 0;
|
|
||||||
// }
|
|
||||||
// abbr[title] {
|
|
||||||
// border-bottom: none;
|
|
||||||
// text-decoration: underline;
|
|
||||||
// text-decoration: underline dotted;
|
|
||||||
// }
|
|
||||||
// b,
|
|
||||||
// strong {
|
|
||||||
// font-weight: inherit;
|
|
||||||
// font-weight: bolder;
|
|
||||||
// }
|
|
||||||
// dfn {
|
|
||||||
// font-style: italic;
|
|
||||||
// }
|
|
||||||
// h1 {
|
|
||||||
// font-size: 2em;
|
|
||||||
// margin: 0.67em 0;
|
|
||||||
// }
|
|
||||||
// mark {
|
|
||||||
// background-color: #ff0;
|
|
||||||
// color: #000;
|
|
||||||
// }
|
|
||||||
// small {
|
|
||||||
// font-size: 80%;
|
|
||||||
// }
|
|
||||||
// sub,
|
|
||||||
// sup {
|
|
||||||
// font-size: 75%;
|
|
||||||
// line-height: 0;
|
|
||||||
// position: relative;
|
|
||||||
// vertical-align: baseline;
|
|
||||||
// }
|
|
||||||
// sub {
|
|
||||||
// bottom: -0.25em;
|
|
||||||
// }
|
|
||||||
// sup {
|
|
||||||
// top: -0.5em;
|
|
||||||
// }
|
|
||||||
// img {
|
|
||||||
// border-style: none;
|
|
||||||
// }
|
|
||||||
// svg:not(:root) {
|
|
||||||
// overflow: hidden;
|
|
||||||
// }
|
|
||||||
// code,
|
|
||||||
// kbd,
|
|
||||||
// samp {
|
|
||||||
// font-family: monospace, monospace;
|
|
||||||
// font-size: 1em;
|
|
||||||
// }
|
|
||||||
// figure {
|
|
||||||
// margin: 1em 40px;
|
|
||||||
// }
|
|
||||||
// hr {
|
|
||||||
// box-sizing: content-box;
|
|
||||||
// height: 0;
|
|
||||||
// overflow: visible;
|
|
||||||
// }
|
|
||||||
// button,
|
|
||||||
// input,
|
|
||||||
// optgroup,
|
|
||||||
// select,
|
|
||||||
// textarea {
|
|
||||||
// font: inherit;
|
|
||||||
// margin: 0;
|
|
||||||
// }
|
|
||||||
// optgroup {
|
|
||||||
// font-weight: 700;
|
|
||||||
// }
|
|
||||||
// button,
|
|
||||||
// input {
|
|
||||||
// overflow: visible;
|
|
||||||
// }
|
|
||||||
// button,
|
|
||||||
// select {
|
|
||||||
// text-transform: none;
|
|
||||||
// }
|
|
||||||
// [type="reset"],
|
|
||||||
// [type="submit"],
|
|
||||||
// button,
|
|
||||||
// html [type="button"] {
|
|
||||||
// -webkit-appearance: button;
|
|
||||||
// }
|
|
||||||
// [type="button"]::-moz-focus-inner,
|
|
||||||
// [type="reset"]::-moz-focus-inner,
|
|
||||||
// [type="submit"]::-moz-focus-inner,
|
|
||||||
// button::-moz-focus-inner {
|
|
||||||
// border-style: none;
|
|
||||||
// padding: 0;
|
|
||||||
// }
|
|
||||||
// [type="button"]:-moz-focusring,
|
|
||||||
// [type="reset"]:-moz-focusring,
|
|
||||||
// [type="submit"]:-moz-focusring,
|
|
||||||
// button:-moz-focusring {
|
|
||||||
// outline: 1px dotted ButtonText;
|
|
||||||
// }
|
|
||||||
// fieldset {
|
|
||||||
// border: 1px solid silver;
|
|
||||||
// margin: 0 2px;
|
|
||||||
// padding: 0.35em 0.625em 0.75em;
|
|
||||||
// }
|
|
||||||
// legend {
|
|
||||||
// box-sizing: border-box;
|
|
||||||
// color: inherit;
|
|
||||||
// display: table;
|
|
||||||
// max-width: 100%;
|
|
||||||
// padding: 0;
|
|
||||||
// white-space: normal;
|
|
||||||
// }
|
|
||||||
// textarea {
|
|
||||||
// overflow: auto;
|
|
||||||
// }
|
|
||||||
// [type="checkbox"],
|
|
||||||
// [type="radio"] {
|
|
||||||
// box-sizing: border-box;
|
|
||||||
// padding: 0;
|
|
||||||
// }
|
|
||||||
// [type="number"]::-webkit-inner-spin-button,
|
|
||||||
// [type="number"]::-webkit-outer-spin-button {
|
|
||||||
// height: auto;
|
|
||||||
// }
|
|
||||||
// [type="search"] {
|
|
||||||
// -webkit-appearance: textfield;
|
|
||||||
// outline-offset: -2px;
|
|
||||||
// }
|
|
||||||
// [type="search"]::-webkit-search-cancel-button,
|
|
||||||
// [type="search"]::-webkit-search-decoration {
|
|
||||||
// -webkit-appearance: none;
|
|
||||||
// }
|
|
||||||
// ::-webkit-input-placeholder {
|
|
||||||
// color: inherit;
|
|
||||||
// opacity: 0.54;
|
|
||||||
// }
|
|
||||||
// ::-webkit-file-upload-button {
|
|
||||||
// -webkit-appearance: button;
|
|
||||||
// font: inherit;
|
|
||||||
// }
|
|
||||||
// html {
|
|
||||||
// font: 112.5%/1.45em georgia, serif;
|
|
||||||
// box-sizing: border-box;
|
|
||||||
// overflow-y: scroll;
|
|
||||||
// }
|
|
||||||
// * {
|
|
||||||
// box-sizing: inherit;
|
|
||||||
// }
|
|
||||||
// *:before {
|
|
||||||
// box-sizing: inherit;
|
|
||||||
// }
|
|
||||||
// *:after {
|
|
||||||
// box-sizing: inherit;
|
|
||||||
// }
|
|
||||||
// body {
|
|
||||||
// color: hsla(0, 0%, 0%, 0.8);
|
|
||||||
// font-family: georgia, serif;
|
|
||||||
// font-weight: normal;
|
|
||||||
// word-wrap: break-word;
|
|
||||||
// font-kerning: normal;
|
|
||||||
// -moz-font-feature-settings: "kern", "liga", "clig", "calt";
|
|
||||||
// -ms-font-feature-settings: "kern", "liga", "clig", "calt";
|
|
||||||
// -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
|
|
||||||
// font-feature-settings: "kern", "liga", "clig", "calt";
|
|
||||||
// }
|
|
||||||
// img {
|
|
||||||
// max-width: 100%;
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
@@ -350,261 +140,3 @@ h6 {
|
|||||||
font-size: 0.78405rem;
|
font-size: 0.78405rem;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
// hgroup {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
// ul {
|
|
||||||
// margin-left: 1.45rem;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// list-style-position: outside;
|
|
||||||
// list-style-image: none;
|
|
||||||
// }
|
|
||||||
// ol {
|
|
||||||
// margin-left: 1.45rem;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// list-style-position: outside;
|
|
||||||
// list-style-image: none;
|
|
||||||
// }
|
|
||||||
// dl {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
// dd {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
// p {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
// figure {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
// table {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// font-size: 1rem;
|
|
||||||
// line-height: 1.45rem;
|
|
||||||
// border-collapse: collapse;
|
|
||||||
// width: 100%;
|
|
||||||
// }
|
|
||||||
// fieldset {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
// blockquote {
|
|
||||||
// margin-left: 1.45rem;
|
|
||||||
// margin-right: 1.45rem;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
// form {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
// noscript {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
// iframe {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
// hr {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: calc(1.45rem - 1px);
|
|
||||||
// background: hsla(0, 0%, 0%, 0.2);
|
|
||||||
// border: none;
|
|
||||||
// height: 1px;
|
|
||||||
// }
|
|
||||||
// address {
|
|
||||||
// margin-left: 0;
|
|
||||||
// margin-right: 0;
|
|
||||||
// margin-top: 0;
|
|
||||||
// padding-bottom: 0;
|
|
||||||
// padding-left: 0;
|
|
||||||
// padding-right: 0;
|
|
||||||
// padding-top: 0;
|
|
||||||
// margin-bottom: 1.45rem;
|
|
||||||
// }
|
|
||||||
// b {
|
|
||||||
// font-weight: bold;
|
|
||||||
// }
|
|
||||||
// strong {
|
|
||||||
// font-weight: bold;
|
|
||||||
// }
|
|
||||||
// dt {
|
|
||||||
// font-weight: bold;
|
|
||||||
// }
|
|
||||||
// th {
|
|
||||||
// font-weight: bold;
|
|
||||||
// }
|
|
||||||
// li {
|
|
||||||
// margin-bottom: calc(1.45rem / 2);
|
|
||||||
// }
|
|
||||||
// ol li {
|
|
||||||
// padding-left: 0;
|
|
||||||
// }
|
|
||||||
// ul li {
|
|
||||||
// padding-left: 0;
|
|
||||||
// }
|
|
||||||
// li > ol {
|
|
||||||
// margin-left: 1.45rem;
|
|
||||||
// margin-bottom: calc(1.45rem / 2);
|
|
||||||
// margin-top: calc(1.45rem / 2);
|
|
||||||
// }
|
|
||||||
// li > ul {
|
|
||||||
// margin-left: 1.45rem;
|
|
||||||
// margin-bottom: calc(1.45rem / 2);
|
|
||||||
// margin-top: calc(1.45rem / 2);
|
|
||||||
// }
|
|
||||||
// blockquote *:last-child {
|
|
||||||
// margin-bottom: 0;
|
|
||||||
// }
|
|
||||||
// li *:last-child {
|
|
||||||
// margin-bottom: 0;
|
|
||||||
// }
|
|
||||||
// p *:last-child {
|
|
||||||
// margin-bottom: 0;
|
|
||||||
// }
|
|
||||||
// li > p {
|
|
||||||
// margin-bottom: calc(1.45rem / 2);
|
|
||||||
// }
|
|
||||||
// code {
|
|
||||||
// font-size: 0.85rem;
|
|
||||||
// line-height: 1.45rem;
|
|
||||||
// }
|
|
||||||
// kbd {
|
|
||||||
// font-size: 0.85rem;
|
|
||||||
// line-height: 1.45rem;
|
|
||||||
// }
|
|
||||||
// samp {
|
|
||||||
// font-size: 0.85rem;
|
|
||||||
// line-height: 1.45rem;
|
|
||||||
// }
|
|
||||||
// abbr {
|
|
||||||
// border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
|
|
||||||
// cursor: help;
|
|
||||||
// }
|
|
||||||
// acronym {
|
|
||||||
// border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
|
|
||||||
// cursor: help;
|
|
||||||
// }
|
|
||||||
// abbr[title] {
|
|
||||||
// border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
|
|
||||||
// cursor: help;
|
|
||||||
// text-decoration: none;
|
|
||||||
// }
|
|
||||||
// thead {
|
|
||||||
// text-align: left;
|
|
||||||
// }
|
|
||||||
// td,
|
|
||||||
// th {
|
|
||||||
// text-align: left;
|
|
||||||
// border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
|
|
||||||
// font-feature-settings: "tnum";
|
|
||||||
// -moz-font-feature-settings: "tnum";
|
|
||||||
// -ms-font-feature-settings: "tnum";
|
|
||||||
// -webkit-font-feature-settings: "tnum";
|
|
||||||
// padding-left: 0.96667rem;
|
|
||||||
// padding-right: 0.96667rem;
|
|
||||||
// padding-top: 0.725rem;
|
|
||||||
// padding-bottom: calc(0.725rem - 1px);
|
|
||||||
// }
|
|
||||||
// th:first-child,
|
|
||||||
// td:first-child {
|
|
||||||
// padding-left: 0;
|
|
||||||
// }
|
|
||||||
// th:last-child,
|
|
||||||
// td:last-child {
|
|
||||||
// padding-right: 0;
|
|
||||||
// }
|
|
||||||
// @media only screen and (max-width: 480px) {
|
|
||||||
// html {
|
|
||||||
// font-size: 100%;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|||||||
@@ -0,0 +1,105 @@
|
|||||||
|
---
|
||||||
|
authors:
|
||||||
|
- "@Xetera"
|
||||||
|
created_at: 2019/07/26
|
||||||
|
updated_at: 2019/07/26
|
||||||
|
recommended_reading:
|
||||||
|
- javascript/callbacks
|
||||||
|
- javascript/es6/arrow-functions
|
||||||
|
---
|
||||||
|
# A Promise to Keep
|
||||||
|
|
||||||
|
A `Promise` in Javascript represents an action that has already started, but one that will be
|
||||||
|
completed at a later time. Much like in real life, when you create a promise, you are expected
|
||||||
|
to fulfill that promise. However, sometimes things go wrong where you can no longer fulfill
|
||||||
|
a promise you made. This is essentially the main idea behind how promises work in javascript.
|
||||||
|
|
||||||
|
## Basics
|
||||||
|
|
||||||
|
When you create a Promise or call a function that returns a Promise in Javascript, you're left
|
||||||
|
with an object that can either resolve into the actual value that you were promised, or it
|
||||||
|
can reject and leave you with an error for why that promise failed.
|
||||||
|
|
||||||
|
We can access these values using the `.then` and `.catch` methods on the `Promise` object respectively.
|
||||||
|
|
||||||
|
## A Simple Example
|
||||||
|
|
||||||
|
First, let's explore a bit of a made-up example. Imagine we have a promise-returning function
|
||||||
|
called `getMembers` that retrieves all the members in a discord server. When we execute this
|
||||||
|
function we see the following result.
|
||||||
|
|
||||||
|
```js
|
||||||
|
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
|
||||||
|
get all the information about members so we're instead returned a Promise of members, rather
|
||||||
|
than the members themselves.
|
||||||
|
|
||||||
|
In order to access this information, we'll have to call the `.then` method on our `members` object
|
||||||
|
to access the actual members like so.
|
||||||
|
|
||||||
|
```js
|
||||||
|
getMembers("The Programmers Hangout").then(members => {
|
||||||
|
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.
|
||||||
|
|
||||||
|
## Beginner Mistakes
|
||||||
|
|
||||||
|
Promises are possibly the #1 most common source of confusion for beginners. In order
|
||||||
|
to avoid falling in pitfalls yourself, you have to remember 2 things about Javascript when
|
||||||
|
working with promises.
|
||||||
|
|
||||||
|
1. Javascript does not wait.
|
||||||
|
2. No seriously, Javascript won't wait for your promises!
|
||||||
|
|
||||||
|
You may have tried doing something like this before.
|
||||||
|
|
||||||
|
```js
|
||||||
|
// Incorrect code, don't copy!
|
||||||
|
let results;
|
||||||
|
getWeather("Los Angeles").then(weather => {
|
||||||
|
results = weather;
|
||||||
|
});
|
||||||
|
console.log(results) // undefined
|
||||||
|
```
|
||||||
|
|
||||||
|
Why is `results` undefined? Because **Javascript doesn't wait**. Whenever a Promise is created,
|
||||||
|
your code will continue to run until there's no more code left in the stack. Only then
|
||||||
|
will javascript try to run the `.then` callback of a Promise. Even if your Promise resolves
|
||||||
|
immediately you are going to have to wait until you've run all the code in the stack before
|
||||||
|
your `.then` callback has a chance to start running. This is due to the way the event loop works,
|
||||||
|
you can watch [this amazing talk](https://youtu.be/8aGhZQkoFbQ) on it to learn more.
|
||||||
|
|
||||||
|
In order to fix this problem we need to move the `console.log` inside the `.then` callback like so:
|
||||||
|
|
||||||
|
```js
|
||||||
|
getWeather("Los Angeles").then(weather => {
|
||||||
|
console.log(weather); // Sunny, probably
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Real World Example
|
||||||
|
|
||||||
|
Here is a real function that gets character information from the Rick and Morty API.
|
||||||
|
You can try it in your browser if you want to test it out.
|
||||||
|
|
||||||
|
```js
|
||||||
|
function getCharacters() {
|
||||||
|
return fetch(`https://rickandmortyapi.com/api/character`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(response => response.results);
|
||||||
|
}
|
||||||
|
|
||||||
|
getCharacters().then(characters => {
|
||||||
|
console.log(characters); // (20) [{...}, {...}, {...}]
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Let's break down what's happening in this function
|
||||||
|
|
||||||
|
// TODO: finish this
|
||||||
Reference in New Issue
Block a user