A cheat sheet for JavaScript's fetch API

Originally Posted on realpythonproject.com

Connect with me on LinkedIn, Twitter

Check out the cheatsheet for Axios

The fetch API in JavaScript is used to make requests. It can also be used to consume APIs. Let's take a look at some of the most common operations using fetch API.

I will be working in a NodeJs environment

Installing node-fetch

npm install node-fetch

Importing node-fetch

const fetch = require('node-fetch')

A simple GET Request

With Promises

Let's make a request to the JSON Placeholder

const fetch = require("node-fetch");
const url = "https://jsonplaceholder.typicode.com/todos/1";

fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((err) => console.log(err));

With async/await

const fetch = require("node-fetch");

const getData = async (url) => {
  const res = await fetch(url);
  const json = await res.json();
  console.log(json);
};

const url = "https://jsonplaceholder.typicode.com/todos/1";
getData(url);

Passing Parameters

Add it to the URL

const getData = async (url) => {
  const res = await fetch(url);
  const json = await res.json();
  console.log(json);
};
const url = "https://jsonplaceholder.typicode.com/posts?userId=1";
getData(url);

Using URLSearchParams

const getData = async (url) => {
  const res = await fetch(url);
  const json = await res.json();
  console.log(json);
};
const params = {
  userId: 1,
};
const url =
  "https://jsonplaceholder.typicode.com/posts?" + new URLSearchParams(params);
getData(url);

Note there is a ? at the end of the url

When you have multiple parameters, it looks cleaner to create an object with your parameters and use URLSearchParams to add it as a parameter in the request

Passing a headers object

This is useful when the API you are consuming requires authentication. We will be working with the Cats as a Service API

Loading env variables stored in .env files

We will need to install 'dotenv' using npm

npm install dotenv

The below code snippet reads the environment variable

require("dotenv").config();
const CAT_API_KEY = process.env.API_KEY;

Let's try making a request to the API

const getData = async (url,headers) => {
  const res = await fetch(url,{
      headers: headers
  });
  const json = await res.json();
  console.log(json);
};
const url =
  "https://api.thecatapi.com/v1/breeds";
const headers = {
    "x-api-key": CAT_API_KEY,
  };
getData(url,headers);

We simply create an object when making the request and store the headers object inside it.

Handling Errors

Let's try to make a request to the Cat's API but to a non-existing endpoint.

const getData = async (url,headers) => {
try{
    const res = await fetch(url,{
        headers: headers
    });
    if (res.status !== 200){
        throw ('Failed to get data from API')
    }

}
catch (err){
    console.log(err)
}
};

We can put the fetch request inside a try...catch block and throw our custom error message.

Making a Post Request

const getData = async (url,data) => {
  const res = await fetch(url, {
    method: 'POST',
    body: data,
  });
  const json = await res.json();
  console.log(json);
};
const url = "https://jsonplaceholder.typicode.com/posts";
const data = JSON.stringify({
  title: "test Data",
  body: "this is a test post request",
  userId: 120,
});
getData(url, data);

The we use JSON.stringify() to convert our data(object) into a string.

Response Object

const getData = async (url) => {
  const res = await fetch(url);
  const text = await res.text()
  console.log(text); // A string with the JSON
  console.log(res.status) // 200
  console.log(res.ok) // true
  console.log(res.url) // https://jsonplaceholder.typicode.com/posts/1
  console.log(res.redirected) // false
};
const url = "https://jsonplaceholder.typicode.com/posts/1";
getData(url);

Check out the cheatsheet for Axios