使用 jQuery.Deferred() 重写 ES6 Promise答案

【问题标题】：Rewrite ES6 Promises using jQuery.Deferred()使用 jQuery.Deferred() 重写 ES6 Promise
【发布时间】：2018-07-09 21:31:00
【问题描述】：

我目前正在为浏览器编写代码，并且仅限于使用 ES5。我确实可以访问 jQuery，但我需要重写几个当前使用 ES6 Promise 的大型函数。例如：

  function getLocationFromIp() {
    return new Promise(function (resolve, reject) {
      $.ajax({
        url: someUrl,
        data: {},
        xhrFields: {
        withCredentials: true
        },
        success: function (data) {
          resolve(data);
        },
        error: function (err) {
          reject(err);
        }
      });
    }).then(transformIpGeoDataToLocation);
  }

我知道我可以访问.resolve() 和.reject()，但我正在为实施而苦苦挣扎。它看起来像这样吗？

 function getLocationFromIp() {
   return $.Deferred(function (dfr) {
     $.ajax({
       url: someUrl,
       data: {},
       xhrFields: {
         withCredentials: true
       },
       success: function (data) {
        dfr.resolve(data);
       },
       error: function (err) {
         dfr.reject(err);
       }
     });
   }).promise().then(transformIpGeoDataToLocation);
 }

我也在研究 bluebird 作为后备方案，但我想尝试一下这种方法，谢谢！不幸的是，Babel 和其他转译器不是一个选项。

【问题讨论】：

查看自动转译步骤以将您的 ES6 转换为 ES5，例如与Babel。这可能会让您的生活更轻松。
我们不会在这个项目中使用 Babel 或其他转译器，抱歉我忘了提。
return $.ajax(... 我的意思是......不要过于复杂。一开始你不需要new Promise。
jQuery 的哪个版本？
我几乎不会认为 -1 会被遗忘。我有一个 -21 问题

标签： javascript jquery promise ecmascript-5 geo

【解决方案1】：

所以，如果你不想使用 ES6 Promise 并且想要使用 jQuery Promise，那么函数调用 $.ajax() 已经返回了一个 jQuery Promise，因此不需要将它包装在另一个 Promise 中。你可以直接返回$.ajax()已经返回的promise：

  function getLocationFromIp() {
      return $.ajax({
        url: someUrl,
        data: {},
        xhrFields: {
        withCredentials: true
      }).then(transformIpGeoDataToLocation);
  }

注意：在 3.x 之前的 jQuery 版本中的 jQuery 承诺（尤其是来自 Ajax 调用）不能使用与 ES6 承诺完全相同的数据类型进行解析。特别是 jQuery Ajax 承诺使用三个参数解析（不是一个 ES6 标准）。第一个参数是通常使用的结果。您可以很好地使用它，但需要确保您的 .then() 处理程序（例如 transformIpGeoDataToLocation）知道这一点。

【讨论】：

【解决方案2】：

jQuery ajax 返回一个 promise 对象，从 1.8 开始，您可以通过 .then 访问它，请参阅此处的参考：http://api.jquery.com/jquery.ajax/

我添加了一些/有点多余的部分来展示它是如何工作的。

function getLocationFromIp() {
  return $.ajax({
      url: someUrl,
      data: {},
      xhrFields: {
        withCredentials: true
      }          
    })
    .done(function(data, textStatus, jqXHR) {
      alert("success");
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      alert("error");
    })
    .always(function(data | jqXHR, textStatus, jqXHR | errorThrown) {
      alert("complete");
    })
     // combines done/fail, see reference page
    .then(transformIpGeoDataToLocation // gets passed data, textStatus, jqXHR 
      ,
      function(jqXHR, textStatus, errorThrown) {})// fail in then
}

getLocationFromIp().then(somefunctiontocall);

【讨论】：

看起来有人只是讨厌 jQuery ajax 承诺？