Javascript fetch 处理 json 和 blob

Posted 2023-02-27

【中文标题】Javascript fetch 处理 json 和 blob

【英文标题】：Javascript fetch handle both json and blob

【发布时间】：2018-10-14 21:16:02

【问题描述】：

使用 javascript fetch 并调用 rest 服务，如果成功则返回 blob，否则返回 json 格式的错误消息。这将如何在 fetch 中处理？实际的服务是一个 asp.net web api 实现，成功时返回 FileStreamResult（或 FileContentResult），否则返回错误代码和包含错误消息的 json。下面是我正在尝试做的一个例子：

fetch('flowers.jpg').then(function(response) 
  if(response.ok) 
    return response.blob();
   else 
    return response.json();


).then(function(myBlob)   // here I would also like to function(jsonError)
  var objectURL = URL.createObjectURL(myBlob); 
  myImage.src = objectURL; 
).catch(function(error) 
  console.log('There has been a problem with your fetch operation: ', error.message);
);

【参考方案1】：

您可以使用嵌套的 then 块将您想要的任何内容传递给您的下一个 then 处理程序。示例：

fetch('flowers.jpg').then(function (response) 
    if (response.ok) 
        return response.blob()
            .then(function (myBlob) 
                return 
                    blob: myBlob
                ;
            );
     else 
        return response.json()
            .then(function (myJson) 
                return 
                    json: myJson
                ;
            );
    

).then(function (myData)  
    if(myData.blob)
        // Handle blob case
    else
        // Handle JSON case
    
).catch(function (error) 
    console.log('There has been a problem with your fetch operation: ', error.message);
);

也许在语义上更准确的处理方法是在出现错误时拒绝。

fetch('flowers.jpg').then(function (response) 
    if (response.ok) 
        return response.blob();
     else 
        return response.json()
            .then(function (myJson) 
                return Promise.reject(myJson);
            );
    

).then(function (myData) 
    // Handle blob case
).catch(function (error) 
    //Handle JSON case
);

【讨论】：

在then 处理程序中没有指向return Promise.resolve(value); 的意义，只需使用return value;。 then 总是返回一个promise，如果你不返回promise，它会用你返回的值来解决（或者用你抛出的东西拒绝）。 （如果你这样做了，promise then 会创建并返回链给它。）所以它只是创建了一个额外的层。 :-)

啊，是的。出于“可读性”的目的，这是我的一个坏习惯。需要停止这样做:)

【参考方案2】：

由于您想要走两条完全不同的路径，这是您可能想要嵌套处理程序的相对罕见的情况之一：

fetch('flowers.jpg').then(function(response) 
    if (response.ok) 
        return response.blob().then(function(myBlob) 
            var objectURL = URL.createObjectURL(myBlob);
            myImage.src = objectURL;
        );
     else 
        return response.json().then(function(jsonError) 
            // ...
        );
    
).catch(function(error) 
    console.log('There has been a problem with your fetch operation: ', error.message);
);