2016-02-01 5 views
20

Ich versuche, eine Post-Anforderung über jQuery mit einem ES6 Versprechen zu machen:jQuery Ajax mit ES6 Promises

Ich habe eine Funktion:

getPostPromise(something, anotherthing) { 
    return new Promise(function(resolve, reject) { 
    $.ajax({ 
     url: someURL, 
     type: 'post', 
     contentType: 'application/json; charset=utf-8', 
     data: JSON.stringify(
     something: something, 
     anotherthing: anotherthing 
     }), 
     dataType: 'json', 
     success: resolve, 
     error: reject 
    }); 
    }); 
} 

und ich nenne es wie so:

getPostPromise(
    'someFooStuff', 
    'someBarStuff' 
).then(
    function(returnedData) { 
    console.log("Good: ", returnedData); 
    }, 
    function(responseObject) { 
    console.log("Bad: ", responseObject); 
    } 
).catch(
    function(errorThrown) { 
    console.log("Exception: ", errorThrown); 
    } 
); 

Mein Server gibt erwartungsgemäß eine Antwort zurück, wobei der Anfragetext im JSON-Format ist, aber meine Konsolenausgabe lautet:

Gut: undefined

Warum bin ich nicht die zurückgegebenen Daten zu bekommen?

Vielen Dank an alle für jede Hilfe.

--- EDIT UPDATE ---

ich meine js nur reduziert haben:

import $ from 'jquery'; 
$.get('http://localhost:8008/api/user') 
    .done(function(data) { 
    console.log(data); 
    }); 

ich noch als Ausgabe undefiniert bekommen. Wenn ich die Anfrage auf der Registerkarte Netzwerk öffne, kann ich das Antwortobjekt mit den korrekten Daten sehen. Die Anfrage wird gestellt, mein Server ist glücklich und antwortet, und die Ergebnisse sind in meinem Browser, aber der Datenparameter von done ist undefiniert. Ich bin ratlos.

--- UPDATE 2 - Lösung gefunden haben ---

entdeckte ich, dass das Problem bei der Verwendung war: https://github.com/jpillora/xdomain um CORS zu bekommen. Es scheint so, als ob diese Bibliothek irgendwie die Werte zurückführt. Ich habe es entfernt und werde CORS richtig und zur Hölle mit Browsern implementieren, die es nicht unterstützen.

+1

ich deine Fehler nicht reproduzieren kann. –

Antwort

27

jQuery Ajax Methoden Versprechen verspricht sich, Sie nicht brauchen, um sie überhaupt zu wickeln.

Sie können dies jedoch aus Gründen der Konsistenz mit der ES6-Verspre- chen-API tun.

UPDATE jQuery 3.0+ implementiert the Promise/A+ API, es gibt also keinen Grund mehr, etwas in moderne jQuery zu verpacken. Lesen Sie weiter unter the peculiarities of jQuery's promise implementation prior to version 3.0.

Für jQuery Versionen vor 3.0, würde ich es mehr entkoppeln, als Sie tat:

function ajax(options) { 
    return new Promise(function (resolve, reject) { 
    $.ajax(options).done(resolve).fail(reject); 
    }); 
} 

und

ajax({ 
    url: someURL, 
    type: 'post', 
    contentType: 'application/json; charset=utf-8', 
    data: JSON.stringify({ 
    something: something, 
    anotherthing: anotherthing 
    }) 
}).then(
    function fulfillHandler(data) { 
    // ... 
    }, 
    function rejectHandler(jqXHR, textStatus, errorThrown) { 
    // ... 
    } 
).catch(function errorHandler(error) { 
    // ... 
}); 
+0

Haben Sie Ihr Snippet getestet? –

+0

@ elad.chen Wenn du meinst, das Streuner '}' verursacht einen Syntaxfehler, ist das behoben, danke. – Tomalak

+0

Ich mag das, ich werde es testen, wenn ich von der Arbeit nach Hause komme und es als akzeptiert markieren, nachdem ich bestätige, dass es korrekt ist. Vielen Dank. –