在 javascript 中使用 fetch 时访问 Headers

Question

我正在使用以下方法从我的 nodejs 服务器向浏览器发送一个 zip 文件

res.set("Content-Type", "application/octet-stream");
res.set("Content-disposition", `attachment; filename="`+zip_name+`.zip"`);
res.set("Content-Length", zipBuff.length);
res.send(zipBuff);

然后我使用 :

获取它

fetch("/my/url", {
    method: "POST",
    body: formData,
})
    .then(response => {
        return response.blob();
    })
    .then(response => {
        const blob = new Blob([response], {type: 'application/zip'});
        const downloadUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = downloadUrl;
        a.download = "blah.zip";
        document.body.appendChild(a);
        a.click();
    });

我希望能够使用 zip_name 而不是 blah 作为文件名，但我不知道如何访问 headers（在那种情况下 Content-disposition) 的响应 fetch.

有人可以解释一下这是怎么做到的吗？

Answer 1

Return blob 和 headers 在 object

fetch("/my/url", {
    method: "POST",
    body: formData,
})
    .then(response => {
        const headers = response.headers
        return { blob: response.blob(), headers }
    })
    .then(({blob, headers}) => {
        /// now you can access to **headers** and blob data
    });

更新：

要访问 headers 使用 headers.get("Header name").split('=').pop()

UPD1：

const foo = async () => {
    const response = await fetch("/my/url", {
        method: "POST",
        body: formData,
    })
    if(!response.ok)
        thorw new Error("Some error happend")

    const blod_data = await response.blob()
    const header_with_name = response.headers.get("Header name").split('=').pop()
    // do something with it
}

Answer 2

在第一个承诺箭头函数中，您可以访问 HTTP 响应 header。如果您将其更新为 return 来自 blob 函数调用的承诺。然后在这个嵌套函数中，您可以 return 一个包含 header 值的 object 到处理 blob 数据的外部第二个箭头函数。

更新了提取示例，其中包括处理 return 来自 blob-function 调用的 Promise。

fetch("/my/url", {
    method: "POST",
    body: formData,
})
    .then(response => {
       return response.blob().then((data) => {
          return {
            data: data,
            filename: response.headers.get('Content-disposition'),
          };
       });
    })
    .then(({ data, filename }) => {
        const blob = new Blob([data], { type: 'application/zip' });
        const downloadUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = downloadUrl;
        a.download = filename.split('=')[1];
        document.body.appendChild(a);
        a.click();
    });

感谢 Chapo 指出我之前示例的问题

在 javascript 中使用 fetch 时访问 Headers

Access Headers when using fetch in javascript

javascript

request-headers

http-headers

fetch-api

更新：

UPD1：