Faire plusieurs .fetch() de promesses

Je veux extraire plusieurs images et de les transformer en goutte. Je suis un newbie sur des promesses, j'ai essayé mais je ne peux pas passer à travers.

Ici ci-dessous, une seule .fetch() promesse

fetch('http://cors.io/?u=http://alistapart.com/d/_made/d/ALA350_appcache_300_960_472_81.jpg')
    .then(function(response) {
        return response.blob();
    })
    .then(function(myBlob) {
        var objectURL = URL.createObjectURL(myBlob);
        document.getElementById('myImage').src = objectURL;
    });

Maintenant plusieurs .fetch() promesse (ne fonctionne pas)

var promises = [];

for (var i = values.length - 1; i >= 0; i--) {
    promises.push(fetch(values[i]));
}

Promise
    .all(promises)
    .then(function(response) {
        for (var i = response.length - 1; i >= 0; i--) {
            return response[i].blob();
        }
    })
    .then(function(blob) {
        console.log(blob.length); //undefined !!!
        for (var i = blob.length - 1; i >= 0; i--) {
            console.log(blob[i]);
            lcl_images[i].value = URL.createObjectURL(blob[i]);
            document.getElementById(lcl_images[i].id).src = objectURL;
        }
    })
    .catch(function(error) {
        console.log(error);
    });
Donc, quelle est la .blob() de retour de méthode, un blob ou un promise?
.blob() renvoie un blob(), mais si vous êtes en train de faire de multiples promesses, vous avez à return Promise.all(blobs) dans .then(response). Après cela, dans .then(blob) -> blob est tableau d'objets blob
OK, donc si .blob() est synchrone, alors vous n'avez pas besoin de deux .arrêtera. Promise.all(promises).then(function(responses) {...}).catch(...);va faire le travail sans jamais avoir besoin de créer un tableau d'objets blob.
si vous essayez vous-même, cela ne fonctionne pas, je suis un newbie sur promesse. J'ai essayé plusieurs fois de faire ce que vous avez dit, mais vous devez retourner la promesse response[i].blob() et dans la prochaine .then vous aurez l'objet blob.
Je vais écrire une réponse pour vous.

OriginalL'auteur FrancescoN | 2016-06-24

  1. 2

    Vous êtes de retour dans le gestionnaire d'après la première réponse, au lieu de ce que vous devez faire est de retourner la liste des blobs:

    Promise
.all(promises)
.then(function(response) {
    //CHANGED HERE
    var blobPromises = [];
    for (var i = response.length - 1; i >= 0; i--) {
        blobPromises.push(response[i].blob());
    }
    return Promise.all(blobPromises);
})
.then(function(blob) {
    console.log(blob.length);
    for (var i = blob.length - 1; i >= 0; i--) {
        lcl_images[i].value = URL.createObjectURL(blob[i]);
        document.getElementById(lcl_images[i].id).src = objectURL;
    }
})
.catch(function(error) {
    console.log(error);
});
    J'ai édité votre solution et ajouté de la console.log(), vous pouvez voir clairement le problème: je n'ai pas d'objets blob dans le blob promesse, c'est pourquoi il génère l'erreur: TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.(…)
    Lorsque vous return blobs, vous vous retrouvez avec blobs dans la fonction suivante, pas blob. blob.length est undefined, car c'est un tableau d'objets blob, pas une seule goutte.
    Dans ce cas également, votre blobs sont en fait un tableau de des promesses pour les gouttes, ce qui signifie que vous devez return Promise.all(blobs). Vraiment, vous devriez renommer que blobs à blobPromises ou quelque chose.

    OriginalL'auteur Łukasz

  2. 7

    C'est une règle générale qu'une filiale en synchrone étape intermédiaire dans la voie du succès d'une promesse de la chaîne peut être fusionnée avec la prochaine étape, permettant ainsi une then() être omise de la chaîne.

    Il est en fait une réserve sur cette déclaration, impliquant des intermédiaires de captures, mais il suffira pour cette réponse.

    Donc, si l' .blob() méthode est geuinely synchrone (elle renvoie une valeur), un seul .then() est nécessaire, non pas de deux.

    Voici deux approches, à la fois d'exploiter les Tableau.le prototype.map(), et les deux doivent travailler (mais ils seront différents selon les conditions d'erreur):

    1. Simple .map() avec des détails en Promise.all()

    var promises = values.reverse().map(fetch); //you may need .reverse(), maybe not. I'm not 100% sure.

return Promise.all(promises).then(function(responses) {
    responses.forEach(function(r, i) {
        var imageObj = lcl_images[i],
            element = document.getElementById(imageObj.id);
        imageObj.value = URL.createObjectURL(r.blob());
        if(element) { //safety
            element.src = imageObj.value;
        }
    });
    return responses; //here, return whatever you want to be made available to the caller.
}).catch(function(error) {
    console.log(error);
});

    Si vous préférez, vous pouvez écrire :

    return Promise.all(values.reverse().map(fetch)).then(function(responses) {
    //...
});

    2. Détail dans .map() suivi une simple Promise.all()

    var promises = values.reverse().map(function(val, i) {
    return fetch(val).then(function(result) {
        var imageObj = lcl_images[i],
            element = document.getElementById(imageObj.id);
        imageObj.value = URL.createObjectURL(result.blob());
        if(element) { //safety
            element.src = imageObj.value;
        }
        return result; //here, return whatever you want to be made available to the caller.
    });
});

return Promise.all(promises).catch(function(error) { //return a promise to the caller
    console.log(error);
});

    Notes:

    • (1) échouera complètement si un fetch() échoue.
    • (2) effectuer toutes les imageObj.value ... et element.src = ... trucs pour tous les succès récupère même si un ou plusieurs fetch()... échoue. Une seule panne de Promise.all(promises) pour retourner le refus de la promesse.
    • (1) ou (2) peut être plus approprié en fonction de ce que vous voulez.
    • Il y a une autre erreur de manipulation de possibilités.
    • Si aucune approche fonctionne, puis l'explication la plus raisonnable serait que le .blob() méthode renvoie une promesse, pas une valeur.
    developer.mozilla.org/en-US/docs/Web/API/Blob .blob() retourne un objet
    Si c'est l'API qui est appelée, alors c'est cool. Tout objet autre qu'une promesse est OK ici.

    OriginalL'auteur Roamer-1888