Javascript fetch gère à la fois json et blob

Question

Utilisation de javascript fetch et invocation d'un rest service qui renvoie un blob en cas de succès, sinon renvoie un message d'erreur en json. Comment cela serait-il traité dans la récupération ? Le service actuel est une implémentation asp.net web api qui renvoie un FileStreamResult (ou FileContentResult) en cas de succès, sinon il renvoie un code d'erreur avec json contenant le message d'erreur. Vous trouverez ci-dessous un exemple de ce que j'essaie de faire :

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

Puisque vous souhaitez emprunter deux chemins assez différents, il s'agit de l'une des situations relativement rares où vous souhaitez probablement imbriquer des gestionnaires :

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

Vous pouvez utiliser des blocs then imbriqués pour transmettre littéralement ce que vous voulez à votre gestionnaire then suivant. Exemple :

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

Peut-être qu'une façon plus précise sur le plan sémantique de gérer cela est de rejeter lorsqu'il y a une erreur.

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