Verheißung zurück [Objekt-Versprechen]

Ich versuche zu tun, einen basic-check, um zu sehen, wenn ein Bild der Netzhaut und hat ein portrait-Verhältnis. Ich habe alle, die überprüfung der Funktionalität arbeiten völlig in Ordnung. Mein Problem ist, dass in die Letzte Funktion soll die Rückkehr der booleschen ich von meinen Prüfungen, es wird zurückkehren [object Promise]. Ich habe keine Ahnung, warum das nicht wieder mein booleschen wenn ich lösen die Versprechen.

Wenn ich .then(res => console.log(res)) es gibt meines boolean Antwort, aber die Funktion getImageMeta() liefert, dass das Versprechen nur die Renditen, die [object Promise] die macht mich denken, dass das Versprechen nicht wirklich aufgelöst wird.

Könnte ich etwas Hilfe, das wäre toll!

/************************************
   Check if image is retina portrait
************************************/
const checkIfPortrait = src => !isRetina(src) ? false : getImageMeta(src).then(res => res);
 const isRetina        = src => src.indexOf('@2x') !== -1;
 const isPortrait      = ({ naturalWidth, naturalHeight }) => naturalHeight > naturalWidth ? true : false;

 function getImageMeta (src) {
    const img = new Image();
    img.src = src;

    return new Promise((resolve, reject) => {
      return img.addEventListener("load", function () {
         return resolve(isPortrait(this));
      }, false);
    });
  }


 export { checkIfPortrait }

Dies ist, wie rufe ich die Funktion:

<img src={media[i].image} alt={media[i].alt} data-portrait={checkIfPortrait(media[i].image)} />
Haben Sie einen Blick auf MDN - Mit Verspricht um mehr zu erfahren über verspricht. .then(res => res) ist überflüssig, Sie brauchen es nicht. "Mein Problem ist, dass in der endgültigen Funktion zurückgeben sollte, die booleschen Operatoren" Das ist nicht möglich. Sie können nicht konvertieren eines asynchronen Prozess in einer synchronen.

InformationsquelleAutor Brady Edgar | 2017-10-12

  1. 13

    Dies ist das erwartete Ergebnis. Wenn Sie wieder eine new Promise Objekt, es wird immer ein promise-Objekt ([object Promise]).

    Ihnen den Zugriff auf das Ergebnis von einem Versprechen, mithilfe der .then Methode (oder mit await in einem async - Funktion). Ihre .then callback wird dann aufgerufen, wenn/wenn das Ergebnis zur Verfügung gestellt wird, was wird passieren, wenn Sie den Anruf resolve, oder wenn das Versprechen wurde bereits im Vorfeld geklärt, es wird aufgerufen werden, ziemlich schnell.

    InformationsquelleAutor Alexander O'Mara

  2. 1

    Die grundlegende Idee, ein Versprechen ist, dass es Ihnen etwas zurückzugeben sofort, auch wenn es nicht lösen, bis später. Stellt es eventuell Wert. So getImageMeta () ist, sofort die Rückkehr der Versprechen, auch wenn es noch nicht gelöst.

    Sobald Sie haben das Versprechen zurückgegeben getImageMeta () können Sie Ihre then() warten, bis die final boolean, die kommen bei der nächsten Veranstaltung loop-Zyklus frühestens.

    Mit Ihren aktuellen code ein, speichern Sie das Versprechen zurückgegeben getImageMeta() zu checkIfPortrait. So, jetzt checkIfPortrait hält dieses Versprechen, und Sie können anrufen then(). Da Sie exportieren checkIfPortrait Sie werden wahrscheinlich am Ende der Aufruf dann auf die Modul-Importe:

     //import checkIfPortrait
checkIfPortrait(src)
.then(ret_val => {
   //you can access boolean here in ret_val
})
    Sorry @BradyEdgar - ich sehen, was Los jetzt. Ich wusste nicht, Sie waren das Ergebnis speichern zu checkIfPortrait und exportieren. checkIfPortrait mit einen Verweis auf die Versprechen. Sie rufen then() auf checkIfPortrait. Aber die Art und Weise verspricht die Arbeit können Sie nicht den Zugriff auf den Wert direkt, denn das wird auch bald. Sie müssen sich damit in den then() Rückruf.

    InformationsquelleAutor Mark Meyer

  3. 0

    Das Problem ist nun gelöst, vielen Dank an alle für die Hilfe. Wie gesagt das Problem war, ich rief die Versprechen Wert ist, bevor es gelöst werden könnte, und hatte keine Möglichkeit der Aktualisierung, der Wert, nachdem es beseitigt war.

    Also was ich getan habe ist, dass die Bilddaten zugänglich war, bevor die Ausführung der Funktion. Dann einmal hatte ich einen gelöst Versprechen, es dann aktualisieren Sie die Bild-Daten zeigen, ob es hoch-oder nicht.

    Also der endgültige code sieht wie folgt aus:

    const enhance = lifecycle({
   componentWillMount: function () {
     Object.keys(this.props.media).map((i) =>
       checkIfPortrait(this.props.media[i].image)
         ? this.props.media[i].isPortrait = true
         : this.props.media[i].isPortrait = false
       );
   }
 })
    const checkIfPortrait = src => !isRetina(src) ? false : getImageMeta(src).then(res => res);
 const isRetina        = src => src.indexOf('@2x') !== -1;
 const isPortrait      = ({ naturalWidth, naturalHeight }) => naturalHeight > naturalWidth ? true : false;

 function getImageMeta (src) {
   const img = new Image();
   img.src = src;

   return new Promise((resolve, reject) => {
     return img.addEventListener("load", function () {
       return resolve(isPortrait(this));
     }, false);
   });
 }


 export { checkIfPortrait }
    <img src={media[i].image} alt={media[i].alt} data-portrait={media[i].isPortrait} />

    InformationsquelleAutor Brady Edgar

Schreibe einen Kommentar