Fetch¶

Basics¶

Task 1: Check the following code.

const URL = 'https://jsonplaceholder.typicode.com/posts';
const response = fetch(URL);
console.log(response);

The result is:

Promise { <state>: "fulfilled", <value>: Response }

Task 2: Refer to task 1; get the value out of the returned promise.

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => console.log(response))
  .catch((error) => console.log(error));

The result is:

Response {
  type: "cors",
  url: "https://jsonplaceholder.typicode.com/posts",
  redirected: false,
  status: 200,
  ok: true,
  statusText: "OK",
  headers: Headers,
  body: ReadableStream,
  bodyUsed: false,
};

The fetch() method gets data from a URL. It returns a promise that resolves to a Response object.

Task 3: Refer to task 2; what is the status of the response. Hint: use response.status

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => console.log(response.status))
  .catch((error) => console.log(error));

The results is: 200

Task 4: Refer to task 2; is the response ok?. Hint: use response.ok

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => console.log(response.ok))
  .catch((error) => console.log(error));

The results is: true

Task 5: Refer to task 2; display the returned data from URL. Hint: use response.json().

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => {
    let data = response.json();
    console.log(data);
  })
  .catch((error) => console.log(error));

The result is: Promise { <state>: "pending" }

Task 6 Refer to task 5; resolve the promise returned by response.json()

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => {
    let data = response.json();
    let posts = data.then((values) => {
      console.log(values);
    });
  })
  .catch((error) => console.log(error));

The result is:

Array(100) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

Task 7 Refer to task 6; display each element of the returned array.

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => {
    let data = response.json();
    let posts = data.then((values) => {
      for (value of values) {
        console.log(value);
      }
    });
  })
  .catch((error) => console.log(error));

Each object of the array will be displayed on a separate line

Task 8: Display the data returned from the following URL.

const URL = "https://jsonplaceholder.typicode.com/users";
const promise = fetch(URL);

promise
  .then((response) => {
    let data = response.json();
    let users = data.then((values) => {
      for (value of values) {
        console.log(value);
      }
    });
  })
  .catch((error) => console.log(error));

Each object of the array will be displayed on a separate line

Task 9: Display the data returned from the following URL.

const URL = "https://jsonplaceholder.typicode.com/comments";
const promise = fetch(URL);

promise
  .then((response) => {
    let data = response.json();
    let comments = data.then((values) => {
      for (value of values) {
        console.log(value);
      }
    });
  })
  .catch((error) => console.log(error));

Each object of the array will be displayed on a separate line

Async Fetch¶

Task 10: Create an async function, and call the fetch method in it.

const URL = "https://jsonplaceholder.typicode.com/posts";
async function fetchPosts() {
  const promise = fetch(URL);
  console.log(promise);
}

fetchPosts();

The result is: Promise { <state>: "pending" }

Task 11: Refer to task 10; use await to get the value of the returned promise.

const URL = "https://jsonplaceholder.typicode.com/posts";
async function fetchPosts() {
  const response = await fetch(URL);
  console.log(response);
}

fetchPosts();

The result is:

Response {
  type: "cors",
  url: "https://jsonplaceholder.typicode.com/posts",
  redirected: false,
  status: 200,
  ok: true,
  statusText: "OK",
  headers: Headers,
  body: ReadableStream,
  bodyUsed: false,
};

Task 12: Refer to task 11; get the returned data using response.json().

const URL = "https://jsonplaceholder.typicode.com/posts";
async function fetchPosts() {
  const response = await fetch(URL);
  const data = response.json();
  console.log(data);
}

fetchPosts();

The result is: Promise { <state>: "pending" }

Task 13: Refer to task 12; resolve the returned promise using await.

const URL = "https://jsonplaceholder.typicode.com/posts";
async function fetchPosts() {
  const response = await fetch(URL);
  const data = await response.json();
  console.log(data);
}

fetchPosts();

The result is:

Array(100) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

Some Practice¶

Task 14: Fetch data from the following URL using async/await.

const URL = "https://jsonplaceholder.typicode.com/users";
async function fetchUsers() {
  const response = await fetch(URL);
  const users = await response.json();
  console.log(users);
}
fetchUsers();

The result is:

Array(10) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]

Task 15: Fetch data from the following URL using async/await.

const URL = "https://jsonplaceholder.typicode.com/photos";
async function fetchPhotos() {
  const response = await fetch(URL);
  const photos = await response.json();
  console.log(photos);
}
fetchPhotos();

The result is:

Array(5000) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

Task 16: Fetch data from the following URL using async/await.

const URL = "https://jsonplaceholder.typicode.com/albums";
async function fetchAlbums() {
  const response = await fetch(URL);
  const albums = await response.json();
  console.log(albums);
}
fetchAlbums();

The result is:

Array(100) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]