Question

使用javascript fetch并调用如果成功则返回blob的rest服务，否则返回错误消息为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);
});

Answer 1

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

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

Answer 2

您可以使用嵌套的then块将字面上的任何内容传递给下一个处理程序。样品：

DbContext

当出现错误时，或许在语义上更精确的处理方法就是拒绝。

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

Javascript fetch处理json和blob

2 个答案: