javascript - 使用普通 JS Promise 编写 jQuery AJAX 请求

Question

我目前正在将我的网页转移到 SPA(单页应用程序)，在此过程中，我现在只使用一个 html 页面，该页面使用 JS 进行填充(就像普通 SPA 应该做的那样)。因此，这意味着(为了方便起见)我将我的 JS 文件减少到一个(也许是个好主意，也许是坏主意 - 我们会看到，但这不是重点)。我决定制作一个“黑匣子”AJAX 请求处理程序，以尽量减少代码。这是我遇到一个我没有预料到的问题的地方。代码是(示例 click 用于我的登录屏幕):

function ajaxCall(type, url, data, dataType) {
  $.ajax({
    type: type,
    url: url,
    data: data,
    dataType: dataType,
  })
  .done(function(xhr) {
    return xhr;
  })
  .fail(function(xhr, status, errorThrown) {
    console.log('AJAX call error: ' + errorThrown);
    console.dir(xhr);
  })
  .always(function(xhr, status) {
    console.log('AJAX call status: ' + status);
  });
}

var res;
//this is inside $(document).ready - I just skipped some lines
$(document).on('click', '#submit', function(e) {
  res = ajaxCall('POST', '/Login', { 'username': $('#username').val(), 'password': $('#password').val() }, 'json');

  console.log('res =', res); // this is where the problem was discovered
});

(你们中的一些人已经在呻吟了)当然，当我测试这个时，我在控制台中得到的是 res = undefined。

我花了几个小时研究这个问题，并找出了它发生的原因。以下是我为解决此问题而研究的一些页面:1 2 3

言归正传:问题是我没有使用Promise。我明白了。我可以解决这个问题。我似乎无法修复的是使用纯 JS Promise 和 jQuery AJAX 请求。

我已经走到这一步了:

function ajaxCall(type, url, data, dataType) {
  return Promise.resolve($.ajax({
    type: type,
    url: url,
    data: data,
    dataType: dataType,
  }));
}

但我不知道如何合并 promise 的其他特性/功能，它们是:.then() 和 .reject()。 据我了解，上面的 Promise 会自动解析，但是如果需要拒绝怎么办？也许我还在考虑 jQuery 的 .done()、.fail() 和 .always()。

But for the life of me, despite all the Googling I do, I cannot find how to fully incorporate all the functions of a plain JS Promise with a jQuery AJAX request.

因此，我请求 stackoverflow 社区深入了解这个问题。

谢谢。

Answer 1

所以 Promise 并不是真正的救世主。您遇到的问题是，您需要在使用 .done() 完成 AJAX 请求后调用 console.log('res =', res); 并.fail() 方法。

function ajaxCall(type, url, data, dataType) {
  return $.ajax({
    type: type,
    url: url,
    data: data,
    dataType: dataType,
  });
}

//this is inside $(document).ready - I just skipped some lines
$(document).on('click', '#submit', function(e) {
  var res = ajaxCall('POST', '/Login', { 'username': $('#username').val(), 'password': $('#password').val() }, 'json');
  res.done(function (data) {
    console.log('res =', data);
  });
});

如果你真的想使用真正的Promise，你可以这样做

function ajaxCall(type, url, data, dataType) {
  return new Promise(function (resolve, reject) {
    $.ajax({
      type: type,
      url: url,
      data: data,
      dataType: dataType,
    }).done(function (data) {
      resolve(data);
    }).fail(function (jqXHR, textStatus, errorThrown) {
      reject(errorThrown);
    });
  });
}

//this is inside $(document).ready - I just skipped some lines
$(document).on('click', '#submit', function(e) {
  var res = ajaxCall('POST', '/Login', { 'username': $('#username').val(), 'password': $('#password').val() }, 'json');
  res.then(function (data) {
    console.log('res = ', data);
  }).catch(function (err) {
    console.error(err);
  });
});