使用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',

或者，如果您不使用等待/异步语​​法，则示例代码将变为：

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