JS Promises Basics and Promises Chaining

 

1. Synchronous Execution

Example :

1

2

3

alert("First Line");

alert("Second Line");

alert("Third Line");

JAVASCRIPT

The code executes line by line. This behavior is called synchronous behavior, in JS alert works synchronously.

2. Asynchronous Execution

Example 1:

1

2

3

4

5

6

7

8

9

10

11

12

13

const url = "https://apis.ccbp.in/jokes/random";

fetch(url)

.then((response) => {

return response.json();

})

.then((jsonData) => {

//statement-1

console.log(jsonData); // Object{ value:"The computer tired when it got home because it had a hard drive" }

});

//statement-2

console.log("fetching done"); // fetching done

 

JAVASCRIPT

Collapse

In the above example, the second statement won’t wait until the first statement execution. In JS,

fetch()

works asynchronously.

3. JS Promises

1. Promise is a way to handle Asynchronous operations.

2. A promise is an object that represents a result of operation that will be returned at some point in the future.

Example :

1

2

3

4

5

const url = "https://apis.ccbp.in/jokes/random";

let responseObject = fetch(url);

console.log(responseObject); // Promise{ [[PromiseStatus]]:pending, [[PromiseValue]]:undefined }

console.log("fetching done"); // fetching done

JAVASCRIPT

Note

A promise will be in any one of the three states:

1. Pending : Neither fulfilled nor rejected
2. Fulfilled : Operation completed successfully
3. Rejected : Operation failed

3.1 Resolved State

When a Promise object is Resolved, the result is a value.

1

2

3

4

5

6

const url = "https://apis.ccbp.in/jokes/random";

let responsePromise = fetch(url);

responsePromise.then((response) => {

console.log(response); // Response{ … }

});

JAVASCRIPT

3.2 Rejected State

Fetching a resource can be failed for various reasons like:

• URL is spelled incorrectly
• Server is taking too long to respond
• Network failure error, etc.

1

2

3

4

5

6

7

8

9

const url = "https://a.ccbp.in/random";

let responsePromise = fetch(url);

responsePromise.then((response) => {

return response;

});

responsePromise.catch((error) => {

console.log(error); // TypeError{ "Failed to fetch" }

});

JAVASCRIPT

3.3 Promise Chaining

Combining multiple

.then()

s or

.catch()

s to a single promise is called promise chaining.

Syntax :

const url = "INCORRECT_RESOURCE_URL";

let responsePromise = fetch(url);

responsePromise

.then((response) => {

console.log(response);

})

.catch((error) => {

console.log(error);

});

3.3.1 OnSuccess Callback returns Promise

Here, log the response in JSON format.

1

2

3

4

5

6

const url = "RESOURCE_URL";

let responsePromise = fetch(url);

responsePromise.then((response) => {

console.log(response.json());

});

JAVASCRIPT

3.3.2 Chaining OnSuccess Callback again

1

2

3

4

5

6

7

8

9

10

const url = "https://apis.ccbp.in/jokes/random";

let responsePromise = fetch(url);

responsePromise

.then((response) => {

return response.json();

})

.then((data) => {

console.log(data);

});

JAVASCRIPT

3.4 Fetch with Error Handling

Check the behavior of code with valid and invalid URLs.

1

2

3

4

5

6

7

8

9

10

11

12

13

const url = "https://apis.ccbp.in/jokes/random";

let responsePromise = fetch(url);

responsePromise

.then((response) => {

return response.json();

})

.then((data) => {

console.log(data); // Object { value: "They call it the PS4 because there are only 4 games worth playing!"

})

.catch((error) => {

console.log(error);

});