Fetch API

The Fetch API is a interface for making http requests using javascript in the browser and with node version +18. If you are familiar with the XMLHttpRequest or ajax() from jQuery this will feel familiar.


The fetch api is built on promises and returns a Response object that will need further processing depending on the data parsing you want. The fetch() function takes two arguments, the request URL and the parameters. Then returns a Response object that will further process your data.


Here is a simple example of a fetch request to an RSS feed. The RSS feed is in plain text so we process it using the response.text() method. There is also .json(), .blob(), .formData() and .arrayBuffer().

  .then((response) => response.text())
  .then((data) => console.log(data));

Fetching an image

When fetching binary data, like an image, you will want to convert it to a blob. Then you can create an object URL and use it like a file.

const image = document.querySelector("#image");
  .then((response) => response.blob())
  .then((blob) => {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;

Adding Parameters

Along with the URL, fetch takes an options parameter, this allows you to set headers and make POST requests. Here's a breakdown of what can be added to the options.

  • method
    • The request method (GET or POST).
  • headers
    • Any headers you want to include.
  • body
    • The body you want to send. Can be a Blob, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, a string object or literal, or a ReadableStream
  • mode
    • The request mode you want to use i.e. (cors, no-cors...)
  • credentials
    • Controls what the browser does with credentials.

For a more exhaustive list of fetch parameters see: MDN

Fetch POST Request

Here is a basic POST request example, it is broken out into a function that can be reused and returns the Response object that the fetch function returns.

Check out: HTTP Headers Basics

async function postData(url = '', data = {}) {
        // Default options are marked with *
        const response = await fetch(url, {
            method: 'POST', // *GET, POST, PUT, DELETE, etc.
            mode: 'cors', // no-cors, *cors, same-origin
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            credentials: 'same-origin', // include, *same-origin, omit
            headers: {
                'Content-Type': 'application/json',
                'Authorization': token
                // 'Content-Type': 'application/x-www-form-urlencoded',
            redirect: 'follow', // manual, *follow, error
            referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
            body: JSON.stringify(data) // body data type must match "Content-Type" header
        return response;

// NOTE: this URL is not a real URL
postDate("https://decode.sh/post/example", {
    test: "Hello"
}).then(res => res.json())
.then((data) => {


Be the first to comment!

Read More

Nginx Logo
Nginx Logo

How to setup Nginx server blocks for multiple sites - Ubuntu

Setting up nginx server blocks is a process that allows you to host multiple websites on a single server. It is a useful technique for those who want to host multiple websites or applications on a single machine, as it allows you to use a single IP address and port to host mult...

Installing Nginx on Ubuntu

NGINX (pronounced "engine x") is a free, open-source, high-performance HTTP server and reverse proxy. It is known for its high performance and low resource consumption, making it a popular choice for web servers and microservi...

Svelte Full Text Search - flexsearch

"flexsearch" is a JavaScript library for fast, flexible, and robust search and indexing. It provides a high-performance search engine that is optimized for search and indexing, and can be used in both client-side and server-side applications. It supports a range of features including full-text search, fuzzy...

Lazy Loading Images

Lazy loading is a technique that defers the loading of images until they are needed, rather than loading them all at once when the page first loads. This can help improve th...