fetch().then() 返回内容类型和正文

2022-01-20 00:00:00 fetch javascript promise

互联网上的每个 fetch API 示例都展示了如何使用 response.json()、response.blob() 等仅返回正文.我需要的是调用一个同时具有内容类型和主体作为 blob 的函数，但我不知道该怎么做.

Every fetch API example on the internet shows how to return only the body using response.json(), response.blob() etc. What I need is to call a function with both the content-type and the body as a blob and I cannot figure out how to do it.

fetch("url to an image of unknown type")
  .then((response) => {
    return {
      contentType: response.headers.get("Content-Type"),
      raw: response.blob()
  })
  .then((data) => {
    imageHandler(data.contentType, data.raw);
  });

这显然不起作用:data.contentType 已填充，但 data.raw 是一个承诺.如何在同一上下文中获取这两个值?

This obviously doesn't work: data.contentType is filled, but data.raw is a promise. How can I get both values in the same context?

推荐答案

你可以这样写:

fetch("url to an image of unknown type")
  .then(response => {
    return response.blob().then(blob => {
      return {
        contentType: response.headers.get("Content-Type"),
        raw: blob
      }
    })
  })
  .then(data => {
    imageHandler(data.contentType, data.raw);
  });

或者这样

fetch("url to an image of unknown type")
  .then(response => {
    return response.blob().then(blob => {
        imageHandler(response.headers.get("Content-Type"), blob)
    })
  })

在这两种情况下，您都将收到已解析的 blob 的回调保留在您有权访问 response 的范围内.

In both cases you keep the callback in which you receive the resolved blob within the scope where you have access to response.

相关文章