带有 ES6 Promises 的 jQuery ajax

Posted 2023-03-03

【中文标题】带有 ES6 Promises 的 jQuery ajax

【英文标题】：jQuery ajax with ES6 Promises

【发布时间】：2016-05-10 04:11:09

【问题描述】：

我正在尝试使用 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，并且在不支持它的浏览器上见鬼。

【问题讨论】：

我无法重现您的错误。

【参考方案1】：

jQuery Ajax 方法本身返回 Promise，您根本不需要 包装它们。

当然，您可以这样做以与 ES6 Promise API 保持一致。

更新 jQuery 3.0+ 实现了the Promise/A+ API，所以没有理由再用现代jQuery 包装任何东西。阅读the peculiarities of jQuery's promise implementation prior to version 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) 
  // ...
);

【讨论】：

你测试过你的 sn-p 吗？

@elad.chen 如果你的意思是流浪的 导致语法错误，那已经修复了，谢谢。

@Chad 好的。请设置一个 jsFiddle 来重现您的问题，我会调查它。

任何暴露相同问题的代码示例都可以。但是，如果没有重现该问题，那将很困难。您可以使用jsFiddle's Ajax responders 创建完全相同的设置，这就是我推荐它的原因。

@Chad 我在想这样的事情。如果你真的想要，你可以查看XDomainRequest 以获得 IE8/IE9 支持。扩展上面的 ajax() 函数以使用该函数或 jQuery 应该相对容易——无需更改其外部接口。