Haben mehrere .fetch() verspricht

Möchte ich Holen mehrere Bilder und verwandeln Sie in blob -. Ich bin ein Neuling zu Versprechen, habe ich versucht, aber ich komme nicht durch.

Hier unten, eine einzelne .fetch() Versprechen

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

Nun mehrere .fetch() Versprechen (funktioniert nicht)

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);
    });
Also, was bedeutet das .blob() - Methode zurück, ein blob oder eine promise?
.blob() gibt einen blob(), aber wenn Sie dabei mehrere Versprechen, müssen Sie return Promise.all(blobs) im .then(response). Nach diesem, in .then(blob) -> blob, array von blob-Objekten
OK, also wenn .blob() synchron ist, dann brauchen Sie nicht zwei .thens. Promise.all(promises).then(function(responses) {...}).catch(...);wird die Arbeit machen, ohne jemals benötigen, um erstellen Sie ein array von blobs.
wenn Sie versuchen, sich selbst das funktioniert nicht, ich bin ein Neuling zu Versprechen. Ich habe mehrmals versucht, zu tun, was Sie sagte, aber Sie müssen wieder das Versprechen response[i].blob() und in den nächsten .then haben Sie die blob-Objekt.
Ich Schreibe eine Antwort für Sie.

InformationsquelleAutor FrancescoN | 2016-06-24

  1. 1

    Sind Sie wieder, aus der dann-handler nach der ersten Antwort, stattdessen, was Sie tun müssen, ist die Rückgabe der Liste der 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);
});
    Ich habe bearbeitet Ihre Lösung Hinzugefügt und die Konsole.log () kann man deutlich sehen das problem: ich habe nicht die blob-Objekte in blob-Versprechen, das ist, warum wirft er den Fehler: TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.(…)
    Wenn Sie return blobs Sie am Ende mit blobs in die nächste Funktion, nicht blob. blob.length ist unbestimmt, weil es eine Reihe von blobs, die nicht einem einzelnen blob.
    Auch in diesem Fall, Ihre blobs sind eigentlich ein array von das Versprechen für blobs, das heißt, Sie müssen return Promise.all(blobs). Eigentlich sollte man umbenennen, dass blobs zu blobPromises oder so etwas.

    InformationsquelleAutor Łukasz

  2. 7

    Es ist eine Allgemeine Regel, dass ein ganz synchron Zwischenschritt in die Erfolgsspur ein Versprechen Kette kann vermischt werden mit dem nächsten Schritt Fort, so dass eine then() zu unterlassen, die von der Kette.

    Es ist eigentlich eine Bedingung, die auf die Anweisung, mit intermediate-Fänge, aber wird es ausreichen, für diese Antwort.

    So, wenn die .blob() Methode ist geuinely synchron (es gibt einen Wert zurück), nur einen .then() erforderlich ist, nicht zwei.

    Hier sind zwei Ansätze, die beide nutzen Array.der Prototyp.anzeigen(), und beide funktionieren sollte (obwohl Sie unterscheiden sich unter Fehlerbedingungen):

    1. Einfache .map() mit detail in 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);
});

    Wenn Sie es bevorzugen, können Sie schreiben :

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

    2. Detail in .map() folgte eine einfache 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);
});

    Hinweise:

    • (1) wird völlig Versagen, wenn eine fetch() ausfällt.
    • (2) wird die Ausführung aller imageObj.value ... und element.src = ... Sachen für alle erfolgreiche holt, auch wenn eine oder mehrere fetch()... ausfällt. Jede einzelne Störung wird die Ursache Promise.all(promises) zurückgeben abgelehnt Versprechen.
    • (1) oder (2) kann es sinnvoller sein, je nachdem, was Sie wollen.
    • Es gibt andere Fehlerbehandlung Möglichkeiten.
    • Wenn weder Methode funktioniert, dann ist die vernünftigste Erklärung wäre, dass die .blob() Methode gibt ein Versprechen, nicht einen Wert.
    developer.mozilla.org/en-US/docs/Web/API/Blob .blob() gibt ein Objekt zurück
    Wenn die API aufgerufen wird, dann ist es cool. Jedes Objekt, andere als eine Zusage ist OK hier.

    InformationsquelleAutor Roamer-1888

Schreibe einen Kommentar