如果您不解决或拒绝承诺会发生什么？

Question

我有一个场景，我正在返回一个承诺。 Promise 基本上是由 ajax 请求触发的。

在拒绝承诺时，它会显示一个错误对话框，提示存在服务器错误。

我想要做的是当响应代码是 401 时，我既不想解决承诺也不想拒绝它（因为它已经显示了错误对话框）。我想简单地重定向到登录页面。

我的代码如下所示：

function makeRequest(ur, params) {
  return new Promise(function (resolve, reject) {
    fetch(url, params).then((response) => {
      let status = response.status;    
      if (status >= 200 && status < 300) {
        response.json().then((data) => {
          resolve(data);
        });
      } else {
        if (status === 401) {
          redirectToLoginPage();
        } else {
          response.json().then((error) => {
            if (!error.message) {
              error.message = constants.SERVER_ERROR;
            }
            reject({ status, error });
          });
        }
      }
    });
  });
}

如您所见，如果状态为 401，我将重定向到登录页面。承诺既没有解决也没有被拒绝。

这段代码可以吗，还是有更好的方法来完成这个？

Answer 1

ECMAScript 规范解释了 Promise 的用途和new Promise()：

Promise 是一个对象，用作延迟（也可能是异步）计算的最终结果的占位符。

25.6.3.1 承诺（执行者）

注意 executor 参数必须是函数对象。调用它来启动并报告此 Promise 对象表示的可能延迟操作的完成。

您应该使用承诺来获得未来的价值。此外，为了让您的代码简洁直接，您应该只使用 Promise 来获取未来的值，而不是做其他事情。

由于您还将程序控制流（重定向逻辑）混合到您的 Promise 的“执行程序”逻辑中，因此您的 Promise 不再是“计算结果的占位符”；相反，它现在是一个伪装成 Promise 的 JavaScript 小程序。

因此，我建议不要将这个 JavaScript 程序包装在 new Promise() 中，而是像普通的 JavaScript 程序一样编写它：

async function makeRequest(url, params) {
  let response = await fetch(url, params);
  let { status } = response;
  if (status >= 200 && status < 300) {
    let data = await response.json();
    successLogic(data);
  } else if (status === 401) {
    redirectToLoginPage();
  } else {
    let error = await response.json()
    if (!error.message) {
      error.message = constants.SERVER_ERROR;
    }
    errorLogic({ status, error });
  }
}

Answer 2

Promise 只是 Javascript 中具有属性的对象。它没有魔法。因此，未能解决或拒绝承诺只是无法将状态从“待处理”更改为其他任何内容。这不会在 Javascript 中引起任何基本问题，因为 Promise 只是一个常规的 Javascript 对象。如果没有代码保留对 Promise 的引用，则 Promise 仍将被垃圾回收（即使仍处于挂起状态）。

这里的真正后果是，如果承诺的状态从未改变，这对承诺的消费者意味着什么？任何用于解决或拒绝转换的 .then() 或 .catch() 侦听器都不会被调用。大多数使用 Promise 的代码都希望它们在未来的某个时间解决或拒绝（这就是首先使用 Promise 的原因）。如果他们不这样做，那么该代码通常永远无法完成其工作。

您可能拥有一些其他代码来完成该任务的工作，并且承诺只是被放弃而没有做任何事情。如果你这样做的话，Javascript 中没有内部问题，但这不是 Promise 的设计方式，通常也不是 Promise 的消费者期望它们如何工作的方式。

如您所见，如果状态为 401，我正在重定向到登录页面。 承诺既没有解决也没有拒绝。

这段代码可以吗？或者有没有更好的方法来做到这一点。

在这种特殊情况下，一切正常，重定向是一种特殊且独特的情况。重定向到新的浏览器页面将完全清除当前页面状态（包括所有 Javascript 状态），因此可以使用重定向的快捷方式并留下其他未解决的问题。当新页面开始加载时，系统将完全重新初始化您的 Javascript 状态，以便清除任何仍待处理的承诺。

Answer 3

我认为“如果我们不解决拒绝会发生什么”已得到很好的回答 - 您可以选择添加 .then 或 .catch。

但是，这段代码可以吗？或者有没有更好的方法来完成这个。我想说有两点：

当没有必要并且 fetch 调用可能失败时，你在 new Promise 中包装了一个 Promise，你应该采取行动，这样你的调用方法就不会坐下来等待一个永远不会被解决的承诺。

这是一个示例（我认为这应该适用于您的业务逻辑，而不是 100% 肯定）：

const constants = {
  SERVER_ERROR: "500 Server Error"
};
function makeRequest(url,params) {
  // fetch already returns a Promise itself
  return fetch(url,params)
        .then((response) => {

            let status = response.status;

            // If status is forbidden, redirect to Login & return nothing,
            // indicating the end of the Promise chain
            if(status === 401) {
              redirectToLoginPage();
              return;
            }
            // If status is success, return a JSON Promise
            if(status >= 200 && status < 300) {
              return response.json();
            }
            // If status is a failure, get the JSON Promise,
            // map the message & status, then Reject the promise
            return response.json()
              .then(json => {
                if (!json.message) {
                    json.message = constants.SERVER_ERROR;
                }
                return Promise.reject({status, error: json.message});
              })
        });
}
// This can now be used as:
makeRequest("http://example", {})
  .then(json => {
    if(typeof json === "undefined") {
      // Redirect request occurred
    }
    console.log("Success:", json);
  })
  .catch(error => {
    console.log("Error:", error.status, error.message);
  })

相比之下，使用以下方式调用您的代码：

makeRequest("http://example", {})
  .then(info => console.log("info", info))
  .catch(err => console.log("error", err));

不会记录任何内容，因为对http://example 的调用将失败，但catch 处理程序将永远不会执行。

Answer 4

正如其他人所说，如果您不解决/拒绝承诺，这确实不是问题。无论如何，我会以不同的方式解决您的问题：

function makeRequest(ur,params) {

    return new Promise(function(resolve,reject) {

        fetch(url,params)
        .then((response) => {

            let status = response.status;

            if (status >= 200 && status < 300) {
                response.json().then((data) => {
                    resolve(data);
                })
            }
            else {
                reject(response);
            }
        })
    });
}

makeRequest().then(function success(data) {
   //...
}, function error(response) {
    if (response.status === 401) {
        redirectToLoginPage();
    }
    else {
        response.json().then((error) => {
            if (!error.message) {
                error.message = constants.SERVER_ERROR;
            }

            //do sth. with error
        });
    } 
});

这意味着我会拒绝所有不良响应状态，然后在您的 error handler 或 makeRequest 中处理。

Answer 5

它可以工作并且不是真正的问题，除非makeRequest 的调用者期望实现承诺。所以，你在那里违反了合同。

相反，您可以推迟承诺，或者（在这种情况下）使用状态码/错误拒绝。