小编典典

带有ES6 Promise的jQuery ajax

ajax

我试图使用ES6 Promise通过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);
  });

我仍然未定义为输出。如果在“网络”选项卡中打开请求,则可以看到带有正确数据的响应对象。发出了请求,我的服务器满意并响应,结果在我的浏览器中,但是完成的数据参数未定义。我很沮丧

-更新2-解决方案-

我发现问题在于使用:https :
//github.com/jpillora/xdomain来解决CORS。似乎该库以某种方式搞砸了传递值。我已经删除了它,并且将正确地实现CORS,并使用不支持它的浏览器实现它。


阅读 261

收藏
2020-07-26

共1个答案

小编典典

jQuery Ajax方法自身返回promise,您根本 不需要 包装它们。

但是,您当然可以这样做,以便与ES6 Promise API保持一致。

UPDATE jQuery 3.0+实现了Promise / A +
API
,因此不再需要在现代jQuery中包装任何东西。

对于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) {
  // ...
});
2020-07-26