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

Identifying Elements Generated on-the-fly in JavaScript

An error occurs when attempting to redirect with getServerSideProps

Error in Node: JSON parse failure due to invalid token "'<'" and ""<!DOCTYPE ""

An error callback is triggered when the HttpClient delete function encounters an issue, despite receiving a successful

Using MongoDB and NodeJS to retrieve data from a promise

Experiencing difficulties loading webpages while attempting to execute Routes sample code using NodeJS

React-Native introduces a new container powered by VirtualizedList

Utilizing React JS and lodash's get method within a single function

Implementing clickable actions to add new entries in a React.js application (using Redux toolkit)

Trouble with X-editable linking to database for updates

The screen suddenly turns black just moments after starting the video

Is there a way to retrieve the value from a select tag and pass it as a parameter to a JavaScript function?

I'm having trouble getting jquery css to function properly in my situation

Is it achievable for a modal popup to automatically move to a specified location?

Looking to retrieve just your Twitter follower count using JavaScript and the Twitter API V1.1?

The node module.exports in promise function may result in an undefined return value

Sending Information within Controllers with AngularJS

An onClick event is triggered only after being clicked twice

An issue has been identified with the functionality of an Ajax request within a partial view that is loaded through another Ajax request specifically in

Leverage AJAX data to dynamically generate an input field within a Laravel application