javascript - 将 jQuery ajax 转换为 fetch

Question

我有一段调用函数的代码 getTableData并期待 Promise 的返回。

function populateTableRows(url) {
  successCallback = () => { ... };
  errorCallback = () => { ... };

  getTableData(url, successCallback, errorCallback).then(tableData => {
    // do stuff with tableData
  }
}

这在我的代码库中的许多地方都使用过，我希望在我不再使用 jQuery 的 ajax 时保持相同的行为。 (以及一般的 jQuery)
在 getTableData 中，我目前正在使用 $.ajax像这样

function getTableData(url, successCallback, errorCallback) {
  successCallback = successCallback || function() {};
  errorCallback = errorCallback || function() {};

  const ajaxOptions = {
    type: 'POST',
    url: url,
    dataType: 'json',
    xhrFields: {
      withCredentials: true
    },
    crossDomain: true,
    data: { // some data }
  };

  return $.ajax(ajaxOptions).done(successCallback).fail(errorCallback);
}

这当前为成功的请求返回一个 Promise。对于错误的请求，其中 fail被调用，似乎没有返回 Promise 并且 then不在调用函数中运行(在这种情况下没问题)。
将请求转换为使用 fetch 时，我有这样的事情

function getTableData(url, successCallback, errorCallback) {
  successCallback = successCallback || function() {};
  errorCallback = errorCallback || function() {};
  return fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    credentials: 'include',
    body: { // some data }
  })
  .then(response => {
    let json = response.json();
    if (response.status >= 200 && response.status < 300) {
      successCallback(json);
      return json;
    } else {
      return json.then(error => {throw error;});
    }
  }).catch((error) => {
    errorCallback(error);
    return
  });

成功的请求似乎与 ajax 的行为类似我目前拥有的代码，但现在是 then回调正在针对导致我的代码错误的错误请求运行。
有没有办法用 fetch模仿 fail jQuery 的行为，其中 Promise 似乎因错误请求而中止？我对使用 Promises 还很陌生，经过一些实验/搜索后，我还没有想出解决方案。

Answer 1

在您的 .catch您隐式返回 undefined 并因此“处理”错误。结果是一个新的 Promise 满足 至 undefined .

  .catch((error) => {
    errorCallback(error);
    return Promise.reject();
  });

应该足以让返回的 Promise 拒绝。
或者您将中间 Promise 分配给一个 var 并返回它，而不是将结果返回给失败处理:

  var reqPromise = fetch(url, {
    // ...
  })
  .then(response => {
    // ...
      return json.then(error => {throw error;});
  });
  
  reqPromise.catch((error) => {
    errorCallback(error);
    return
  });
  
  return reqPromise;