使用 fetch.js 启用 gzip 压缩

Question

我正在使用 fetch.js (https://github.com/github/fetch) 向后端发送一个相对较大的 json object。 json 很大，因为它包含一个 SVG 图像字符串。

不清楚fetch.js是默认使用gzip压缩，还是需要手动压缩加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;
        });
      }
    });
});

Answer 1

我假设你的行

body: JSON.stringify(payload)

有效负载未压缩。

我还希望能够 zip/compress 一个有效负载主体，我还需要一种异步方法来适应我的其余代码。我苦苦挣扎的一点是找到一种无需回调即可使用 zlib 的方法。

为了实现这一点，我做了以下......

在单独的帮助库中，我导入了zib...

import zlib from 'zlib'

我创建了以下函数....

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);
        });
    });

}

compressBody 函数是围绕 zlib.deflate 的承诺。函数 asyncCompressBody 是一个异步函数，允许调用函数等待。

在调用函数中，我将其用作...

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 2

使用 https://github.com/nodeca/pako（更快的 zlib 端口）。

添加以下导入：

import { gzip } from 'pako';

然后，更改：

body: JSON.stringify(payload)

收件人：

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

并添加 header:

'Content-Encoding': 'gzip',

或者，如果您不使用 await/async 语法，您的示例代码将变为：

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;
          });
        }
      });
  });
});

使用 fetch.js 启用 gzip 压缩

Enabling gzip compression with fetch.js

javascript

json

gzip

fetch