带有 ES6 Promises 的 jQuery ajax

2022-01-15 00:00:00 cors jquery javascript ajax es6-promise

我正在尝试使用 ES6 承诺通过 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:

好:未定义

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

Why am I not getting the returned data?

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

Thanks to anyone/everyone for any help.

--- 更新编辑 ---

--- UPDATE EDIT ---

我已将我的 js 缩减为:

I have reduced my js to only:

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

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

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 包装任何东西.阅读jQuery 3.0 之前的 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) {
  // ...
});

相关文章