web-dev-qa-db-fra.com

jQuery ajax avec ES6 Promises

J'essaie de faire une demande de publication via jQuery en utilisant une promesse ES6:

J'ai une fonction:

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

et je l'appelle comme ça:

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

Mon serveur renvoie une réponse comme prévu avec le corps de la demande au format JSON mais la sortie de ma console est:

Bon: indéfini

Pourquoi ne reçois-je pas les données retournées?

Merci à tout le monde/tout le monde pour toute aide.

--- MISE À JOUR DE LA MODIFICATION ---

J'ai réduit mes js à seulement:

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

Je suis toujours indéfini en tant que sortie. Si j'ouvre la demande dans l'onglet réseau, je peux voir l'objet de réponse avec les données correctes. La demande est faite, mon serveur est content et répond, et les résultats sont dans mon navigateur mais le paramètre de données de done n'est pas défini. Je suis perplexe.

--- MISE À JOUR 2 - SOLUTION TROUVÉE ---

J'ai découvert que le problème était lié à l'utilisation de: https://github.com/jpillora/xdomain pour contourner CORS. Il semblerait que cette bibliothèque se trompe en passant des valeurs en quelque sorte. Je l'ai supprimé et j'implémenterai CORS correctement et au diable les navigateurs qui ne le prennent pas en charge.

javascriptjqueryajaxcorses6-promise
27
Chad Befus

les méthodes jQuery Ajax renvoient des promesses elles-mêmes, vous n'avez pas besoin pour les envelopper du tout.

Mais vous pouvez bien sûr le faire par souci de cohérence avec l'API ES6 promise.

[~ # ~] mise à jour [~ # ~] jQuery 3.0+ implémente l'API Promise/A + , donc il n'y a pas raison de plus pour envelopper quoi que ce soit dans jQuery moderne. Lisez sur les particularités de l'implémentation de promesse de jQuery avant la version 3. .

Pour les versions jQuery antérieures à 3.0, je le découplerais plus que vous:

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

et

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