本文是深入浅出 ahooks 源码系列文章的第六篇，该系列已整顿成文档-地址。感觉还不错，给个 关注 反对一下哈，Thanks。
本文已收录到集体博客中，欢送关注~
背景
大家在应用 useEffect 的时候，如果回调函数中应用 async...await... 的时候，会报错如下。
看报错，咱们晓得 effect function 应该返回一个销毁函数（effect：是指return返回的cleanup函数），如果 useEffect 第一个参数传入 async，返回值则变成了 Promise，会导致 react 在调用销毁函数的时候报错。
React 为什么要这么做？
useEffect 作为 Hooks 中一个很重要的 Hooks，能够让你在函数组件中执行副作用操作。
它可能实现之前 Class Component 中的生命周期的职责。它返回的函数的执行机会如下：
- 首次渲染不会进行清理，会在下一次渲染，革除上一次的副作用。
- 卸载阶段也会执行革除操作。
不论是哪个，咱们都不心愿这个返回值是异步的，这样咱们无奈预知代码的执行状况，很容易呈现难以定位的 Bug。所以 React 就间接限度了不能 useEffect 回调函数中不能反对 async...await...
useEffect 怎么反对 async...await...
居然 useEffect 的回调函数不能应用 async...await，那我间接在它外部应用。
做法一：创立一个异步函数（async...await 的形式），而后执行该函数。
useEffect(() => { const asyncFun = async () => { setPass(await mockCheck()); }; asyncFun();}, []);做法二：也能够应用 IIFE，如下所示：
useEffect(() => { (async () => { setPass(await mockCheck()); })();}, []);自定义 hooks
既然晓得了怎么解决，咱们齐全能够将其封装成一个 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 就是用来勾销以后正在执行的一个标识符。
还能够反对 useEffect 的革除机制么？
能够看到下面的 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。