我是否在JavaScript中正确创建了一个用于.createobjectUrl使用的斑点对象

Question

我正在尝试从.png文件中获取响应，并使用简单的JS将其作为在DOM中的图像进行准备。但是...

ready().then(() => {
  fetch(`/images/logo.png`)
  .then(response =>{
    if (response) {
      let imageBlob = response.blob();
      let objectURL = URL.createObjectURL(imageBlob);
...

正在给我...

Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
    at fetch.then.response (fetchImage.js:6)
    at <anonymous>
fetch.then.response       @ fetchImage.js:6
Promise resolved (async)
ready.then                @ fetchImage.js:3
Promise resolved (async)
(anonymous)               @ fetchImage.js:1

如果我投入console.log(response)，我可以看到我得到了完整的响应。并且该console.log(imageBlob)将返回Promise {<resolved>: Blob(3737)}。那我要去哪里？

Answer 1

使用正确获取，response.blob((返回a Promise - 因此，在处理fetch Promise Promise

时处理它

ready().then(() => {
  fetch(`/images/logo.png`)
  .then(response => response.blob())
  .then(imageBlob => {
    let objectURL = URL.createObjectURL(imageBlob);
    //...
  });
});

或更好的仍然

ready()
.then(() => fetch(`/images/logo.png`))
.then(response => response.blob())
.then(imageBlob => {
  let objectURL = URL.createObjectURL(imageBlob);
  //...
});

或使用async/await

ready()
.then(() => fetch(`/images/logo.png`))
.then(async (response) => {
  let imageBlob = await response.blob();
  let objectURL = URL.createObjectURL(imageBlob);
  //...
});