jQuery Ajax mit ES6 Promises

Lesezeit: 3 Minuten

Benutzer-Avatar
Tschad Befus

Ich versuche, eine Post-Anfrage über jQuery mit einem ES6-Versprechen zu stellen:

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 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 wie erwartet eine Antwort zurück, wobei der Anforderungstext im JSON-Format vorliegt, aber meine Konsolenausgabe lautet:

Gut: undefiniert

Warum erhalte ich die zurückgegebenen Daten nicht?

Danke an alle/jeden für jede Hilfe.

— AKTUALISIEREN BEARBEITEN —

Ich habe meine js auf nur reduziert:

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

Ich bekomme immer noch undefiniert als Ausgabe. Wenn ich die Anfrage im Netzwerk-Tab öffne, sehe ich das Response-Objekt mit den richtigen Daten. Die Anfrage wird gestellt, mein Server ist zufrieden und antwortet, und die Ergebnisse sind in meinem Browser, aber der Datenparameter von done ist nicht definiert. Ich bin ratlos.

— UPDATE 2 – LÖSUNG GEFUNDEN —

Ich entdeckte, dass das Problem bei der Verwendung von: https://github.com/jpillora/xdomain um CORS zu umgehen. Es scheint, dass diese Bibliothek das Zurückgeben von Werten irgendwie vermasselt. Ich habe es entfernt und werde CORS ordnungsgemäß implementieren und zur Hölle mit Browsern, die es nicht unterstützen.

  • Ich kann deinen Fehler nicht reproduzieren.

    – Michał Perłakowski

    1. Februar 2016 um 16:23 Uhr

Benutzer-Avatar
Tomalak

jQuery Ajax-Methoden geben selbst Versprechungen zurück, Sie nicht brauchen sie überhaupt einzupacken.

Aber Sie können dies natürlich aus Gründen der Konsistenz mit der ES6 Promise API tun.

AKTUALISIEREN jQuery 3.0+ implementiert die Promise/A+-API, also gibt es keinen Grund mehr, irgendetwas in modernes jQuery zu packen. Informieren Sie sich über die Besonderheiten der Promise-Implementierung von jQuery vor Version 3.0.

Für jQuery-Versionen vor 3.0 würde ich es stärker entkoppeln als Sie:

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) {
  // ...
});

  • Hast du dein Snippet getestet?

    – elad.chen

    1. Februar 2016 um 16:58 Uhr


  • @elad.chen Falls du den Streuner meinst } verursacht einen Syntaxfehler, das ist behoben, danke.

    – Tomalak

    1. Februar 2016 um 17:42 Uhr

  • @Chad Okay. Bitte richten Sie ein jsFiddle ein, das Ihr Problem reproduziert, ich werde es untersuchen.

    – Tomalak

    2. Februar 2016 um 14:42 Uhr


  • Jedes Codebeispiel, das dasselbe Problem aufdeckt, reicht aus. Ohne eine Reproduktion der Ausgabe wird es allerdings schwierig. Sie können verwenden Ajax-Responder von jsFiddle genau das gleiche Setup zu erstellen, deshalb habe ich es empfohlen.

    – Tomalak

    2. Februar 2016 um 16:00 Uhr


  • @Chad Ich dachte an so etwas. Wenn du wirklich willst, kannst du nachsehen XDomainRequest für IE8/IE9-Unterstützung. Es sollte relativ einfach sein, die zu verlängern ajax() obige Funktion, um diese oder jQuery zu verwenden – ohne Änderung ihrer externen Schnittstelle.

    – Tomalak

    2. Februar 2016 um 17:12 Uhr


1226040cookie-checkjQuery Ajax mit ES6 Promises

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy