jQuery ajax with ES6 Promises

jQuery ajax with ES6 Promises

本文关键字：Promises ES6 with ajax jQuery      更新时间：2023-09-26

我正在尝试使用 ES6 承诺通过 jQuery 发出发布请求：

我有一个功能：

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

我是这样称呼的：

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

我的服务器按预期返回响应，请求正文为 JSON 格式，但我的控制台输出为：

好：未定义

为什么我没有得到返回的数据？

感谢任何人/每个人的任何帮助。

---更新编辑---

我已经将我的js减少到只有：

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

我仍然未定义为输出。 如果我在网络选项卡中打开请求，我可以看到具有正确数据的响应对象。 请求发出，我的服务器很高兴并响应，结果在我的浏览器中，但 done 的数据参数未定义。我被难住了。

---更新 2 - 找到的解决方案---

我发现问题在于使用：https://github.com/jpillora/xdomain 绕过CORS。 似乎该库以某种方式搞砸了传回的值。 我已经删除了它，并将正确实施 CORS，并且对不支持它的浏览器来说见鬼去吧。

jQuery Ajax 方法返回承诺本身，你根本不需要包装它们。

但是，当然，您可以这样做以与ES6承诺API保持一致。

UPDATE jQuery 3.0+ 实现了 Promise/A+ API，因此没有理由再将任何东西包装在现代 jQuery 中。阅读 jQuery 在 3.0 版本之前的承诺实现的特殊性。

对于 3.0 之前的 jQuery 版本，我会比你更多地解耦它：

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

和 

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) {
  // ...
});
相关文章：