关于前端:如何让-useEffect-支持-asyncawait

本文是深入浅出 ahooks 源码系列文章的第六篇，该系列已整顿成文档 - 地址。感觉还不错，给个关注反对一下哈，Thanks。

本文已收录到集体博客中，欢送关注~

大家在应用 useEffect 的时候，如果回调函数中应用 async…await… 的时候，会报错如下。

看报错，咱们晓得 effect function 应该返回一个销毁函数（effect：是指 return 返回的 cleanup 函数），如果 useEffect 第一个参数传入 async，返回值则变成了 Promise，会导致 react 在调用销毁函数的时候报错。

useEffect 作为 Hooks 中一个很重要的 Hooks，能够让你在函数组件中执行副作用操作。
它可能实现之前 Class Component 中的生命周期的职责。它返回的函数的执行机会如下：

首次渲染不会进行清理，会在下一次渲染，革除上一次的副作用。
卸载阶段也会执行革除操作。

不论是哪个，咱们都不心愿这个返回值是异步的，这样咱们无奈预知代码的执行状况，很容易呈现难以定位的 Bug。所以 React 就间接限度了不能 useEffect 回调函数中不能反对 async…await…

居然 useEffect 的回调函数不能应用 async…await，那我间接在它外部应用。

做法一：创立一个异步函数（async…await 的形式），而后执行该函数。

useEffect(() => {const asyncFun = async () => {setPass(await mockCheck());
  };
  asyncFun();}, []);

做法二：也能够应用 IIFE，如下所示：

useEffect(() => {(async () => {setPass(await mockCheck());
  })();}, []);

既然晓得了怎么解决，咱们齐全能够将其封装成一个 hook，让应用更加的优雅。咱们来看下 ahooks 的 useAsyncEffect，它反对所有的异步写法，包含 generator function。

思路跟下面一样，入参跟 useEffect 一样，一个回调函数（不过这个回调函数反对异步），另外一个依赖项 deps。外部还是 useEffect，将异步的逻辑放入到它的回调函数外面。

function useAsyncEffect(effect: () => AsyncGenerator<void, void, void> | Promise<void>,
  // 依赖项
  deps?: DependencyList,
) {
  // 判断是 AsyncGenerator
  function isAsyncGenerator(val: AsyncGenerator<void, void, void> | Promise<void>,): val is AsyncGenerator<void, void, void> {
    // Symbol.asyncIterator: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator
    // Symbol.asyncIterator 符号指定了一个对象的默认异步迭代器。如果一个对象设置了这个属性，它就是异步可迭代对象，可用于 for await...of 循环。return isFunction(val[Symbol.asyncIterator]);
  }
  useEffect(() => {const e = effect();
    // 这个标识能够通过 yield 语句能够减少一些检查点
    // 如果发现以后 effect 曾经被清理，会进行持续往下执行。let cancelled = false;
    // 执行函数
    async function execute() {// 如果是 Generator 异步函数，则通过 next() 的形式全副执行
      if (isAsyncGenerator(e)) {while (true) {const result = await e.next();
          // Generate function 全副执行实现
          // 或者以后的 effect 曾经被清理
          if (result.done || cancelled) {break;}
        }
      } else {await e;}
    }
    execute();
    return () => {
      // 以后 effect 曾经被清理
      cancelled = true;
    };
  }, deps);
}

async…await 咱们之前曾经提到了，重点看看实现中变量 cancelled 的实现的性能。
它的作用是 中断执行。

通过 yield 语句能够减少一些检查点，如果发现以后 effect 曾经被清理，会进行持续往下执行。

试想一下，有一个场景，用户频繁的操作，可能当初这一轮操作 a 执行还没实现，就曾经开始开始下一轮操作 b。这个时候，操作 a 的逻辑曾经失去了作用了，那么咱们就能够进行往后执行，间接进入下一轮操作 b 的逻辑执行。这个 cancelled 就是用来勾销以后正在执行的一个标识符。

能够看到下面的 useAsyncEffect，外部的 useEffect 返回函数只返回了如下：

return () => {
  // 以后 effect 曾经被清理
  cancelled = true;
};

这阐明，你 通过 useAsyncEffect 没有 useEffect 返回函数中执行革除副作用的性能。

你可能会感觉，咱们将 effect(useAsyncEffect 的回调函数)的后果，放入到 useAsyncEffect 中不就能够了？

实现最终相似如下：

function useAsyncEffect(effect: () => Promise<void | (() => void)>, dependencies?: any[]) {return useEffect(() => {const cleanupPromise = effect()
    return () => { cleanupPromise.then(cleanup => cleanup && cleanup()) }
  }, dependencies)
}

这种做法在这个 issue 中有探讨，下面有个大神的说法我示意很同意：

他认为这种 提早革除机制 是不对的，应该是一种 勾销机制。否则，在钩子曾经被勾销之后，回调函数依然有机会对外部状态产生影响。他的实现和例子我也贴一下，跟 useAsyncEffect 其实思路是一样的，如下：

实现：

function useAsyncEffect(effect: (isCanceled: () => boolean) => Promise<void>, dependencies?: any[]) {return useEffect(() => {
    let canceled = false;
    effect(() => canceled);
    return () => { canceled = true;}
  }, dependencies)
}

Demo:

useAsyncEffect(async (isCanceled) => {const result = await doSomeAsyncStuff(stuffId);
  if (!isCanceled()) {// TODO: Still OK to do some effect, useEffect hasn't been canceled yet.}
}, [stuffId]);

其实归根结底，咱们的革除机制不应该依赖于异步函数，否则很容易呈现难以定位的 bug。

因为 useEffect 是在函数式组件中承当执行副作用操作的职责，它的返回值的执行操作应该是能够预期的，而不能是一个异步函数，所以不反对回调函数 async…await 的写法。

咱们能够将 async…await 的逻辑封装在 useEffect 回调函数的外部，这就是 ahooks useAsyncEffect 的实现思路，而且它的范畴更加广，它反对的是所有的异步函数，包含 generator function。

关于前端:如何让-useEffect-支持-asyncawait

背景

React 为什么要这么做？

useEffect 怎么反对 async…await…

自定义 hooks

还能够反对 useEffect 的革除机制么？

总结与思考