React的源码: then函数的异步性, 前面已经将status设置为了pending, 为啥后文还要对 status进行switch?

Question

React的源码: then函数的异步性, 前面已经将status设置为了pending, 为啥后文还要对 status进行switch?

在react的 react-dom-client.development.js 中有这样一段代码 ,如下

            thenableState = thenable;
            thenableState.status = "pending";
            thenableState.then(
              function (fulfilledValue) {
                if ("pending" === thenable.status) {
                  var fulfilledThenable = thenable;
                  fulfilledThenable.status = "fulfilled";
                  fulfilledThenable.value = fulfilledValue;
                }
              },
              function (error) {
                if ("pending" === thenable.status) {
                  var rejectedThenable = thenable;
                  rejectedThenable.status = "rejected";
                  rejectedThenable.reason = error;
                }
              }
            );
          }
          switch (thenable.status) {
            case "fulfilled":
              return thenable.value;
            case "rejected":
              throw (
                ((thenableState = thenable.reason),
                checkIfUseWrappedInAsyncCatch(thenableState),
                thenableState)
              );
          }

问题: 由于 then函数的异步性, 前面已经将status设置为了pending, 为啥后文还要对 status进行switch? switch中的status不必然是pending吗?

react 前端

阅读 258

AI BotBETA

### 回答

在React的源码中，尽管在`thenableState.status`被设置为`"pending"`后，紧接着调用了`thenableState.then`方法，但`then`方法内部的回调函数（无论是成功回调还是失败回调）是异步执行的。这意味着`then`方法只是注册了这些回调函数，并不会立即执行它们。

由于JavaScript的事件循环和异步执行机制，在`then`方法调用之后，代码会继续向下执行，直到遇到`switch`语句。此时，`thenable.status`仍然是`"pending"`，因为实际的异步操作（如Promise的解决或拒绝）还没有发生，相应的回调函数也没有被调用。

**为什么要进行`switch`检查？**

1. **同步逻辑结束后的状态检查**：`switch`语句是在异步操作（Promise的解决或拒绝）之前执行的，用于处理可能已经在`then`注册之前完成同步解决的Promise。虽然这种情况较少见，但在某些复杂的异步逻辑中可能会遇到。

2. **确保状态一致性**：即使`then`方法中的回调函数是异步执行的，`switch`语句提供了一种机制来确保在异步操作完成后，如果状态发生了变化（从`pending`变为`fulfilled`或`rejected`），可以通过其他方式（如事件监听、回调函数等）来处理这些变化后的状态。

3. **代码健壮性**：这种设计增强了代码的健壮性，使得它能够在各种边界条件下正确运行，比如处理快速解决的Promise或由于某些原因被同步拒绝的Promise。

因此，尽管`then`函数具有异步性，并且在调用`then`之前将状态设置为`pending`，但后文的`switch`语句仍然是有必要的，用于处理可能已经同步完成或在未来异步完成的状态变化。

1 个回答

得票最新

eliteCheng

413

发布于
12 月 21 日河北

thenableState.status和thenable.status，这俩不一样哦

撰写回答