使用 fetch.js 启用 gzip 压缩

Question

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

我不清楚 fetch.js 是否默认使用 gzip 压缩，或者我是否需要手动压缩和添加标头。任何帮助将不胜感激。

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

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

添加以下导入：

import { gzip } from 'pako';

然后，改变：

body: JSON.stringify(payload)

收件人：

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

并添加标题：

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

Answer 2

我假设你的行

body: JSON.stringify(payload)

该有效负载未压缩。

我还希望能够压缩/压缩有效负载主体，并且我还需要一种异步方法来适应我的其余代码。我一直在努力解决的问题是找到一种无需回调即可使用 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});