gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat/new-lessons-on-js-promises

Browse Source
This commit is contained in:
moT01
2019-05-14 14:52:01 -05:00
committed by Kristofer Koishigawa
parent 73bdff45fd
commit da254743cd
7 changed files with 766 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.english.md Normal file
View File

@ -0,0 +1,221 @@
---
id: 5cdafbc32913098997531680
title: Complete a Promise with Resolve and Reject
challengeType: 1
---
## Description
<section id='description'>
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
A promise has three states: <code>pending</code>, <code>fulfilled</code>, and <code>rejected</code>. The promise you created in the last challenge is forever stuck in the <code>pending</code> state because you did not add a way to complete the promise. The <code>resolve</code> and <code>reject</code> parameters given to the promise argument are used to do this. <code>resolve</code> is used when you want your promise to succeed, and <code>reject</code> is used when you want it to fail. These are methods that take an argument, as seen below.
```js
const myPromise = new Promise((resolve, reject) => {
if(true) {
resolve("Promise was fulfilled");
} else {
reject("Promise was rejected");
}
=======
A promise has three states: <code>pending</code>, <code>fulfilled</code>, and <code>rejected</code>. The promise you created in the last challenge is forever stuck in the <code>pending</code> state because you did add a way to complete the promise. The two parameters given to the promise function are used to do this. <code>resolve</code> is used when you want your promise to succeed, and <code>reject</code> is used when you want it to fail. These are functions that take an argument as seen below.
=======
A promise has three states: <code>pending</code>, <code>fulfilled</code>, and <code>rejected</code>. The promise you created in the last challenge is forever stuck in the <code>pending</code> state because you did add a way to complete the promise. The <code>resolve</code> and <code>reject</code> parameters given to the promise argument are used to do this. <code>resolve</code> is used when you want your promise to succeed, and <code>reject</code> is used when you want it to fail. These are methods that take an argument, as seen below.
>>>>>>> 396e6142b... fix/update-verbiage
=======
A promise has three states: <code>pending</code>, <code>fulfilled</code>, and <code>rejected</code>. The promise you created in the last challenge is forever stuck in the <code>pending</code> state because you did not add a way to complete the promise. The <code>resolve</code> and <code>reject</code> parameters given to the promise argument are used to do this. <code>resolve</code> is used when you want your promise to succeed, and <code>reject</code> is used when you want it to fail. These are methods that take an argument, as seen below.
>>>>>>> aac94c586... Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.english.md
```js
const myPromise = new Promise((resolve, reject) => {
<<<<<<< HEAD
if(true) {
resolve("Promise was fulfilled");
} else {
reject("Promise was rejected");
}
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
if(true) {
resolve("Promise was fulfilled");
} else {
reject("Promise was rejected");
}
>>>>>>> d3ba2b0ff... fix/replace-tab-with-spaces
});
```
The example above uses strings for the argument of these functions, but it can really be anything. Often, it might be an object that you would use data from to put on your website or elsewhere.
</section>
## Instructions
<section id='instructions'>
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
Make the promise handle success and failure. If <code>responseFromServer</code> is <code>true</code>, call the <code>resolve</code> method to successfully complete the promise. Pass <code>resolve</code> a string with the value <code>We got the data</code>. If <code>responseFromServer</code> is <code>false</code>, use the <code>reject</code> method instead and pass it the string: <code>Data not received</code>.
=======
Use the <code>resolve</code> function if the condition is true to fulfill the promise. Pass it the string: <code>We got the data.</code> as its argument. Use the <code>reject</code> function if condition is not true and pass it the string: <code>Data not received.</code>.
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
Use the <code>resolve</code> method if the condition given is true to fulfill the promise. Pass it the string: <code>We got the data.</code> as its argument. Use the <code>reject</code> method if condition is not true and pass it the string: <code>Data not received.</code>.
>>>>>>> 396e6142b... fix/update-verbiage
=======
Use the <code>resolve</code> method if the condition given is true to fulfill the promise. Pass it a string with the value <code>We got the data</code>. Use the <code>reject</code> method if condition is false and pass it the string: <code>Data not received</code>.
>>>>>>> 8dec9d7c7... fix/add-tests-rename-files
=======
Make the promise handle success and failure. If <code>responseFromServer</code> is <code>true</code>, call the <code>resolve</code> method to successfully complete the promise. Pass <code>resolve</code> a string with the value <code>We got the data</code>. If the condition is <code>false</code>, use the <code>reject</code> method instead and pass it the string: <code>Data not received</code>.
>>>>>>> 3fa1528b7... Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.english.md
=======
Make the promise handle success and failure. If <code>responseFromServer</code> is <code>true</code>, call the <code>resolve</code> method to successfully complete the promise. Pass <code>resolve</code> a string with the value <code>We got the data</code>. If <code>responseFromServer</code> is <code>false</code>, use the <code>reject</code> method instead and pass it the string: <code>Data not received</code>.
>>>>>>> 017c4ec24... fix/add-suggested-change-to-instructions
</section>
## Tests
<section id='tests'>
```yml
tests:
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
- text: <code>resolve</code> should be executed when the <code>if</code> condition is <code>true</code>.
testString: assert(removeJSComments(code).match(/if\s*\(\s*responseFromServer\s*\)\s*{\s*resolve\s*\(\s*('|"|`)We got the data\1\s*\)(\s*|\s*;\s*)}/g));
- text: <code>reject</code> should be executed when the <code>if</code> condition is <code>false</code>.
testString: assert(removeJSComments(code).match(/}\s*else\s*{\s*reject\s*\(\s*('|"|`)Data not received\1\s*\)(\s*|\s*;\s*)}/g));
=======
- text: <code>var</code> should not exist in code.
=======
- text: You should properly add a <code>resolve</code> method.
testString: getUserInput => assert(!getUserInput('index').match(/var/g),'<code>var</code> should not exist in code.');
- text: You should properly add a <code>reject</code> method.
testString: getUserInput => assert(!getUserInput('index').match(/var/g),'<code>var</code> should not exist in code.');
- text: <code>resolve</code> is executed when the <code>if</code> condition is true.
testString: getUserInput => assert(!getUserInput('index').match(/var/g),'<code>var</code> should not exist in code.');
- text: <code>reject</code> is executed when the <code>if</code> condition is not true.
>>>>>>> 396e6142b... fix/update-verbiage
testString: getUserInput => assert(!getUserInput('index').match(/var/g),'<code>var</code> should not exist in code.');
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
- text: <code>resolve</code> should be executed when the <code>if</code> condition is <code>true</code>.
testString: assert(removeJSComments(code).match(/if\s*\(\s*responseFromServer\s*\)\s*{\s*resolve\s*\(\s*('|"|`)We got the data\1\s*\)(\s*|\s*;\s*)}/g));
- text: <code>reject</code> should be executed when the <code>if</code> condition is <code>false</code>.
testString: assert(removeJSComments(code).match(/}\s*else\s*{\s*reject\s*\(\s*('|"|`)Data not received\1\s*\)(\s*|\s*;\s*)}/g));
>>>>>>> 8dec9d7c7... fix/add-tests-rename-files
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
const makeServerRequest = new Promise((resolve, reject) => {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
// responseFromServer represents a response from a server
let responseFromServer;
if(responseFromServer) {
// change this line
} else {
// change this line
}
=======
const success = true;
=======
const responseFromServer = true;
>>>>>>> 396e6142b... fix/update-verbiage
if(responseFromServer) {
// change this line
} else {
// change this line
}
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
const responseFromServer = true;
=======
// responseFromServer represents a response from a server
let responseFromServer;
>>>>>>> 466610bc8... Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.english.md
if(responseFromServer) {
// change this line
} else {
// change this line
}
>>>>>>> d3ba2b0ff... fix/replace-tab-with-spaces
});
```
</div>
<<<<<<< HEAD
<<<<<<< HEAD
=======
>>>>>>> 8dec9d7c7... fix/add-tests-rename-files
### After Test
<div id='js-teardown'>
```js
const removeJSComments = str => str.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, '');
```
</div>
<<<<<<< HEAD
=======
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
>>>>>>> 8dec9d7c7... fix/add-tests-rename-files
</section>
## Solution
<section id='solution'>
```js
const makeServerRequest = new Promise((resolve, reject) => {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
// responseFromServer represents a response from a server
let responseFromServer;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
=======
const success = true;
=======
const responseFromServer = true;
>>>>>>> 396e6142b... fix/update-verbiage
=======
const responseFromServer = true;
>>>>>>> d3ba2b0ff... fix/replace-tab-with-spaces
=======
// responseFromServer represents a response from a server
let responseFromServer;
>>>>>>> 5a10880b6... fix/add-suggested-changes-to-seeds-and-solutions
if(responseFromServer) {
resolve("We got the data");
} else {
<<<<<<< HEAD
reject("Data not received.");
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
reject("Data not received");
>>>>>>> 8dec9d7c7... fix/add-tests-rename-files
}
});
```
</section>

122
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.english.md Normal file
View File

@ -0,0 +1,122 @@
---
id: 5cdafbb0291309899753167f
<<<<<<< HEAD
<<<<<<< HEAD
title: Create a JavaScript Promise
=======
title: Create a Javascript Promise
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
title: Create a JavaScript Promise
>>>>>>> bed9cbc73... Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.english.md
challengeType: 1
---
## Description
<section id='description'>
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
A promise in JavaScript is exactly what it sounds like. You use it to make a promise to do something, usually asynchronously. When the task completes you either fulfill your promise or fail to do so. <code>Promise</code> is a constructor function so you need to use the <code>new</code> keyword to create one. It takes a function as its argument with two parameters, <code>resolve</code> and <code>reject</code>. These are methods used to determine the outcome of the promise. The syntax looks like this:
=======
A promise in javascript is exactly what it sounds like. You use it to make a promise to do something, and at some point you either fulfill your promise or fail to do so. It’s a constructor function, so they are create with the <code>new</code> keyword. It needs a function as its argument with two parameters, <code>resolve</code> and <code>reject</code>. These are methods used to determine the outcome of the promise. The syntax looks like this:
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
A promise in javascript is exactly what it sounds like. You use it to make a promise to do something, usually asynchronous. When the task completes you either fulfill your promise or fail to do so. It’s a constructor function, so they are created with the <code>new</code> keyword. It needs a function as its argument with two parameters, <code>resolve</code> and <code>reject</code>. These are methods used to determine the outcome of the promise. The syntax looks like this:
>>>>>>> 396e6142b... fix/update-verbiage
=======
A promise in JavaScript is exactly what it sounds like. You use it to make a promise to do something, usually asynchronously. When the task completes you either fulfill your promise or fail to do so. <code>Promise</code> is a constructor function so you need to use the <code>new</code> keyword to create one. It needs a function as its argument with two parameters, <code>resolve</code> and <code>reject</code>. These are methods used to determine the outcome of the promise. The syntax looks like this:
>>>>>>> d86e97264... Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.english.md
=======
A promise in JavaScript is exactly what it sounds like. You use it to make a promise to do something, usually asynchronously. When the task completes you either fulfill your promise or fail to do so. <code>Promise</code> is a constructor function so you need to use the <code>new</code> keyword to create one. It takes a function as its argument with two parameters, <code>resolve</code> and <code>reject</code>. These are methods used to determine the outcome of the promise. The syntax looks like this:
>>>>>>> 915a966f1... fix/change-needs-to-takes-in-instructions
```js
const myPromise = new Promise((resolve, reject) => {
});
```
</section>
## Instructions
<section id='instructions'>
<<<<<<< HEAD
<<<<<<< HEAD
Create a new promise called <code>makeServerRequest</code>. Pass in a function with <code>resolve</code> and <code>reject</code> parameters to the constructor.
=======
Create a new promise called <code>makeServerRequest</code>. Pass in a function with <code>resolve</code> and <code>reject</code> parameters to the promise.
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
Create a new promise called <code>makeServerRequest</code>. Pass in a function with <code>resolve</code> and <code>reject</code> parameters to the constructor.
>>>>>>> 79a812601... Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.english.md
</section>
## Tests
<section id='tests'>
```yml
tests:
<<<<<<< HEAD
<<<<<<< HEAD
- text: You should assign a promise to a declared variable named <code>makeServerRequest</code>.
testString: assert(makeServerRequest instanceof Promise);
- text: Your promise should receive a function with <code>resolve</code> and <code>reject</code> as parameters.
testString: assert(code.match(/Promise\(\s*(function\s*\(\s*resolve\s*,\s*reject\s*\)\s*{|\(\s*resolve\s*,\s*reject\s*\)\s*=>\s*{)[^}]*}/g));
=======
- text: Your promise should be in a variable called <code>makeServerRequest</code>.
=======
- text: You should assign a promise to a declared variable named <code>makeServerRequest</code>.
>>>>>>> 8f4cfb0e5... Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.english.md
testString: assert(makeServerRequest instanceof Promise);
- text: Your promise should receive a function with <code>resolve</code> and <code>reject</code> as parameters.
<<<<<<< HEAD
<<<<<<< HEAD
testString: assert(typeof(makeServerRequest) === "object" && (code.match(/new\s*Promise\(\s*\(\s*resolve\s*,\s*reject\s*\)\s*=>\s*{/g) || code.match(/new\s*Promise\s*\(\s*function\s*\(\s*resolve\s*,\s*reject\s*\)\s*{/g)));
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
testString: assert(makeServerRequest instanceof Promise && (code.match(/new\s*Promise\(\s*\(\s*resolve\s*,\s*reject\s*\)\s*=>\s*{/g) || code.match(/new\s*Promise\s*\(\s*function\s*\(\s*resolve\s*,\s*reject\s*\)\s*{/g)));
>>>>>>> 066e1792e... fix/add-tests
=======
testString: assert(code.match(/Promise\(\s*(function\s*\(\s*resolve\s*,\s*reject\s*\)\s*{|\(\s*resolve\s*,\s*reject\s*\)\s*=>\s*{)[^}]*}/g));
>>>>>>> 2a76bf50c... fix/make-tests-more-robust
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
<<<<<<< HEAD
<<<<<<< HEAD
=======
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
>>>>>>> 2a76bf50c... fix/make-tests-more-robust
```
</div>
</section>
## Solution
<section id='solution'>
```js
<<<<<<< HEAD
<<<<<<< HEAD
const makeServerRequest = new Promise((resolve, reject) => {
=======
makeServerRequest = new Promise((resolve, reject) => {
>>>>>>> 5aba19817... feat/new-lessons-on-js-promises
=======
const makeServerRequest = new Promise((resolve, reject) => {
>>>>>>> e40baddf2... fix/solution-to-pass-tests
});
```
</section>

90
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-fulfilled-promise-with-then.english.md Normal file
View File

@ -0,0 +1,90 @@
---
id: 5cdafbd72913098997531681
title: Handle a Fulfilled Promise with then
challengeType: 1
---
## Description
<section id='description'>
Promises are most useful when you have a process that takes an unknown amount of time in your code (i.e. something asynchronous). Often, a server request. When you make a server request it takes some amount of time, and after it completes you usually want to do something with the response from the server. This can be achieved by using the <code>then</code> method. The <code>then</code> method is executed immediately after your promise is fulfilled with <code>resolve</code>. Here’s an example:
```js
myPromise.then(result => {
// do something with the result.
});
```
<code>result</code> comes from the argument given to the <code>resolve</code> method.
</section>
## Instructions
<section id='instructions'>
Add the <code>then</code> method to your promise. Use <code>result</code> as the argument of its callback function and log <code>result</code> to the console.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: You should call the <code>then</code> method on the promise.
testString: assert(codeWithoutSpaces.match(/(makeServerRequest|\))\.then\(/g));
- text: Your <code>then</code> method should have a callback function with <code>result</code> as its parameter.
testString: assert(resultIsParameter);
- text: You should log <code>result</code> to the console.
testString: assert(resultIsParameter && codeWithoutSpaces.match(/\.then\(.*?result.*?console.log\(result\).*?\)/));
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to true to represent a successful response from a server
let responseFromServer = true;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
```
</div>
### After Test
<div id='js-teardown'>
```js
const codeWithoutSpaces = code.replace(/\s/g, '');
const resultIsParameter = /\.then\((function\(result\){|result|\(result\)=>)/.test(codeWithoutSpaces);
```
</div>
</section>
## Solution
<section id='solution'>
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to true to represent a successful response from a server
let responseFromServer = true;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
makeServerRequest.then(result => {
console.log(result);
});
```
</section>

90
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-fulfilled-promise-with-then.english.md~HEAD Normal file
View File

@ -0,0 +1,90 @@
---
id: 5cdafbd72913098997531681
title: Handle a Fulfilled Promise with then
challengeType: 1
---
## Description
<section id='description'>
Promises are most useful when you have a process that takes an unknown amount of time in your code (i.e. something asynchronous). Often, a server request. When you make a server request it takes some amount of time, and after it completes you usually want to do something with the response from the server. This can be achieved by using the <code>then</code> method. The <code>then</code> method is executed immediately after your promise is fulfilled with <code>resolve</code>. Here’s an example:
```js
myPromise.then(result => {
// do something with the result.
});
```
<code>result</code> comes from the argument given to the <code>resolve</code> method.
</section>
## Instructions
<section id='instructions'>
Add the <code>then</code> method to your promise. Use <code>result</code> as the argument of its callback function and log <code>result</code> to the console.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: You should call the <code>then</code> method on the promise.
testString: assert(codeWithoutSpaces.match(/(makeServerRequest|\))\.then\(/g));
- text: Your <code>then</code> method should have a callback function with <code>result</code> as its parameter.
testString: assert(resultIsParameter);
- text: You should log <code>result</code> to the console.
testString: assert(resultIsParameter && codeWithoutSpaces.match(/\.then\(.*?result.*?console.log\(result\).*?\)/));
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to true to represent a successful response from a server
let responseFromServer = true;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
```
</div>
### After Test
<div id='js-teardown'>
```js
const codeWithoutSpaces = code.replace(/\s/g, '');
const resultIsParameter = /\.then\((function\(result\){|result|\(result\)=>)/.test(codeWithoutSpaces);
```
</div>
</section>
## Solution
<section id='solution'>
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to true to represent a successful response from a server
let responseFromServer = true;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
makeServerRequest.then(result => {
console.log(result);
});
```
</section>

101
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.english.md Normal file
View File

@ -0,0 +1,101 @@
---
id: 5cdafbe72913098997531682
title: Handle a Rejected Promise with catch
challengeType: 1
---
## Description
<section id='description'>
<code>catch</code> is the method used when your promise has been rejected. It is executed immediately after a promise's <code>reject</code> method is called. Here’s the syntax:
```js
myPromise.catch(error => {
// do something with the error.
});
```
<code>error</code> is the argument passed in to the <code>reject</code> method.
<strong>Note:</strong> the <code>then</code> and <code>catch</code> methods can be chained to the promise declaration if you chose.
</section>
## Instructions
<section id='instructions'>
Add the <code>catch</code> method to your promise. Use <code>error</code> as the argument of its callback function and log <code>error</code> to the console.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: You should call the <code>catch</code> method on the promise.
testString: assert(codeWithoutSpaces.match(/(makeServerRequest|\))\.catch\(/g));
- text: Your <code>catch</code> method should have a callback function with <code>error</code> as its parameter.
testString: assert(errorIsParameter);
- text: You should log <code>error</code> to the console.
testString: assert(errorIsParameter && codeWithoutSpaces.match(/\.catch\(.*?error.*?console.log\(error\).*?\)/));
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to false to represent an unsuccessful response from a server
let responseFromServer = false;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
makeServerRequest.then(result => {
console.log(result);
});
```
</div>
### After Test
<div id='js-teardown'>
```js
const codeWithoutSpaces = code.replace(/\s/g, '');
const errorIsParameter = /\.catch\((function\(error\){|error|\(error\)=>)/.test(codeWithoutSpaces);
```
</div>
</section>
## Solution
<section id='solution'>
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to false to represent an unsuccessful response from a server
let responseFromServer = false;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
makeServerRequest.then(result => {
console.log(result);
});
makeServerRequest.catch(error => {
console.log(error);
});
```
</section>

101
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.english.md~HEAD Normal file
View File

@ -0,0 +1,101 @@
---
id: 5cdafbe72913098997531682
title: Handle a Rejected Promise with catch
challengeType: 1
---
## Description
<section id='description'>
<code>catch</code> is the method used when your promise has been rejected. It is executed immediately after a promise's <code>reject</code> method is called. Here’s the syntax:
```js
myPromise.catch(error => {
// do something with the error.
});
```
<code>error</code> is the argument passed in to the <code>reject</code> method.
<strong>Note:</strong> the <code>then</code> and <code>catch</code> methods can be chained to the promise declaration if you chose.
</section>
## Instructions
<section id='instructions'>
Add the <code>catch</code> method to your promise. Use <code>error</code> as the argument of its callback function and log <code>error</code> to the console.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: You should call the <code>catch</code> method on the promise.
testString: assert(codeWithoutSpaces.match(/(makeServerRequest|\))\.catch\(/g));
- text: Your <code>catch</code> method should have a callback function with <code>error</code> as its parameter.
testString: assert(errorIsParameter);
- text: You should log <code>error</code> to the console.
testString: assert(errorIsParameter && codeWithoutSpaces.match(/\.catch\(.*?error.*?console.log\(error\).*?\)/));
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to false to represent an unsuccessful response from a server
let responseFromServer = false;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
makeServerRequest.then(result => {
console.log(result);
});
```
</div>
### After Test
<div id='js-teardown'>
```js
const codeWithoutSpaces = code.replace(/\s/g, '');
const errorIsParameter = /\.catch\((function\(error\){|error|\(error\)=>)/.test(codeWithoutSpaces);
```
</div>
</section>
## Solution
<section id='solution'>
```js
const makeServerRequest = new Promise((resolve, reject) => {
// responseFromServer is set to false to represent an unsuccessful response from a server
let responseFromServer = false;
if(responseFromServer) {
resolve("We got the data");
} else {
reject("Data not received");
}
});
makeServerRequest.then(result => {
console.log(result);
});
makeServerRequest.catch(error => {
console.log(error);
});
```
</section>