带有ES6 Promise的jQuery ajax [英] jQuery ajax with ES6 Promises

问题描述

我正在尝试使用ES6 Promise通过jQuery发出发布请求:

I am trying to make a post request via jQuery using an ES6 promise:

我有一个功能:

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格式，但我的控制台输出为:

My server is returning a response as expected with the request body being in JSON format but my console output is:

好:未定义

Good: undefined

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

Why am I not getting the returned data?

感谢任何人/所有人的帮助.

Thanks to anyone/everyone for any help.

---更新编辑---

--- UPDATE EDIT ---

我将js减少为:

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

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

I still get undefined as output. If I open up the request in the network tab I can see the response object with the correct data. The request is made, my server is happy and responds, and the results are in my browser but the data parameter of done is undefined. I am stumped.

-更新2-解决方案---

--- UPDATE 2 - SOLUTION FOUND ---

我发现问题出在以下方面: https://github.com/jpillora/xdomain 避开CORS.似乎该库搞砸了以某种方式传递回值.我已经删除了它，并将正确地实现CORS，并使用不支持它的浏览器实现它.

I discovered that the problem was with using: https://github.com/jpillora/xdomain to get around CORS. It would seem that that library screws up passing back values somehow. I have removed it and will implement CORS properly and to hell with browsers that don't support it.

推荐答案

jQuery Ajax方法自身返回promise，您根本不需要 来包装它们.

jQuery Ajax methods return promises themselves, you don't need to wrap them at all.

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

But you can, of course, do it for consistency with the ES6 promise API.

更新 jQuery 3.0+实现了 Promise/A + API ，因此没有理由可以将任何东西包装在现代jQuery中.在 3.0之前的jQuery的promise实现的特殊性上阅读.

UPDATE jQuery 3.0+ implements the Promise/A+ API, so there is no reason anymore to wrap anything in modern jQuery. Read up on the peculiarities of jQuery's promise implementation prior to version 3.0.

对于3.0之前的jQuery版本，我将比您解耦的更多:

For jQuery versions before 3.0, I would decouple it more than you did:

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

这篇关于带有ES6 Promise的jQuery ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！