Activating gzip compression using fetch.js

Question

Activating gzip compression using fetch.js

I am utilizing fetch.js (https://github.com/github/fetch) to transmit a rather substantial JSON object to the backend. The size of the JSON is significant due to it containing an SVG image string.

My question is whether fetch.js applies gzip compression automatically, or if I need to manually compress and include headers?

return new Promise((resolve, reject) => {
  fetch(api_base + "/api/save-photo", {
    method: 'POST',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload)
  })
    .then((response) => {
      if (response.status === 404) {
        throw new Error('404 (Not Found)');
      } else {
        return response.json().then((json) => {
          console.log('save poster response: ', json);
          return json;
        });
      }
    });
});

javascript json gzip fetch-api

Answer 1

Answer №1

If you're looking to optimize your code for faster compression, consider using https://github.com/nodeca/pako, which is a quicker port of zlib.

To implement this, start by adding the following import:

import { gzip } from 'pako';

Next, make the necessary change from:

body: JSON.stringify(payload)

To:

body: await gzip(JSON.stringify(payload))

Additionally, include the header:

'Content-Encoding': 'gzip',

For those who prefer not to use the await/async syntax, here's an alternative example:

return new Promise((resolve, reject) => {
  gzip(JSON.stringify(payload)).then((gzippedBody) => {
    fetch(api_base + "/api/save-photo", {
      method: 'POST',
      mode: 'cors',
      headers: {
        'Content-Encoding': 'gzip',
        'Content-Type': 'application/json'
      },
      body: gzippedBody
    })
      .then((response) => {
        if (response.status === 404) {
          throw new Error('404 (Not Found)');
        } else {
          return response.json().then((json) => {
            console.log('save poster response: ', json);
            return json;
          });
        }
      });
  });
});

Answer 2

If you're looking to optimize your code for faster compression, consider using https://github.com/nodeca/pako, which is a quicker port of zlib.

To implement this, start by adding the following import:

import { gzip } from 'pako';

Next, make the necessary change from:

body: JSON.stringify(payload)

To:

body: await gzip(JSON.stringify(payload))

Additionally, include the header:

'Content-Encoding': 'gzip',

For those who prefer not to use the await/async syntax, here's an alternative example:

return new Promise((resolve, reject) => {
  gzip(JSON.stringify(payload)).then((gzippedBody) => {
    fetch(api_base + "/api/save-photo", {
      method: 'POST',
      mode: 'cors',
      headers: {
        'Content-Encoding': 'gzip',
        'Content-Type': 'application/json'
      },
      body: gzippedBody
    })
      .then((response) => {
        if (response.status === 404) {
          throw new Error('404 (Not Found)');
        } else {
          return response.json().then((json) => {
            console.log('save poster response: ', json);
            return json;
          });
        }
      });
  });
});

Answer 3

Answer №2

Assuming that the payload in your code snippet is not compressed, I also needed a way to compress it and ensure an asynchronous process for seamless integration with my existing codebase. The challenge I faced was incorporating zlib compression without using callbacks.

To address this issue, I adopted the following approach...

In a utility module, I imported zlib as follows:

import zlib from 'zlib'

I defined two functions as shown below...

async function asyncCompressBody(body) {

    const compressedData = await compressBody(body);
    console.log("Data Compressed");

    return compressedData;

}

function compressBody(body) {

    return new Promise( function( resolve, reject ) {

        zlib.deflate(body, (err, buffer) => {
            if(err){
                console.log("Error Zipping");
                reject(err);
            }

            console.log("Zipped");

            resolve(buffer);
        });
    });

}

The compressBody function wraps zlib.deflate inside a promise, while asyncCompressBody is an async function enabling the use of await in calling functions.

To implement this in the main function, I utilized the following code structure...

let compressedBody = await asyncCompressBody(jsonContent);

let headers = new Headers();
headers.append("Content-Type","application/json");
headers.append("Content-Encoding","zlib");

const response = await fetch(url,
    {method: 'POST',
    headers: headers,
    body: compressedBody});

Answer 4

Assuming that the payload in your code snippet is not compressed, I also needed a way to compress it and ensure an asynchronous process for seamless integration with my existing codebase. The challenge I faced was incorporating zlib compression without using callbacks.

To address this issue, I adopted the following approach...

In a utility module, I imported zlib as follows:

import zlib from 'zlib'

I defined two functions as shown below...

async function asyncCompressBody(body) {

    const compressedData = await compressBody(body);
    console.log("Data Compressed");

    return compressedData;

}

function compressBody(body) {

    return new Promise( function( resolve, reject ) {

        zlib.deflate(body, (err, buffer) => {
            if(err){
                console.log("Error Zipping");
                reject(err);
            }

            console.log("Zipped");

            resolve(buffer);
        });
    });

}

The compressBody function wraps zlib.deflate inside a promise, while asyncCompressBody is an async function enabling the use of await in calling functions.

To implement this in the main function, I utilized the following code structure...

let compressedBody = await asyncCompressBody(jsonContent);

let headers = new Headers();
headers.append("Content-Type","application/json");
headers.append("Content-Encoding","zlib");

const response = await fetch(url,
    {method: 'POST',
    headers: headers,
    body: compressedBody});

Activating gzip compression using fetch.js

Answer №1

Answer №2

Similar questions

What is hindering me from fetching the information stored in my json file?

Array of Arrays Jolt Transformation Specification

Issue with grunt-crx task detected

Converting multiple WordPress plugins into a single JSON option

Angular and Three JS collaboration leads to misplacement of canvas rendering

Stop accidental form submissions on iOS devices by disabling the return button

Transformation of JSON data into a structured dataframe

Guide to utilizing JavaScript for a basic gaming experience

JS How can I generate individual buttons in a loop that trigger separate actions?

Make the adjustment from an H1 tag to an H2 tag with the help of

Tips on updating a div with jQuery AJAX in my PHP script - help needed!

Update the page when the React route changes

positioning a text input in the center instead of at the top of the page

Partial view encountering Dropzone JS function error

The requested resource does not have the 'Access-Control-Allow-Origin' header, resulting in a 401 error

Switch the hue when altered

What is the best way to transmit a JSON object to REST services using Angular?

Issue with Proper Display of JSON Unicode Characters in AngularJS

Transform Dictionary Containing Lists into CSV Format

Condense categories