javascript - 使用 fetch.js 启用 gzip 压缩

Question

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

fetch.js是默认使用gzip压缩，还是需要我手动压缩加header？

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