从 CallBack 到 Promise，React 框架异步开发学习心得
引入 说起 React，我印象最深刻的是，在 React 中，数据是向下流动的（react 为什么是单向数据流）——越高层级的组件，获得着越多的数据，而低层级组件数据的获取和更新，大多都通过组件属性传递以及回调函数方式得到。这就意味着，高层组件刷新会同时刷新低层组件，而低层组件刷新往往不会带动高层组件刷新，于是更多的状态和逻辑会出现在比较高层级的组件里，在 React 中叫做状态提升 。例如对话框的打开与关闭更应该是对话框组件的属性，而不是对话框组件的状态——对话框的操作往往与高层数据相关，如果把状态放在低层级，则很难把当前的状态和数据与高层级组件交互。 在这种数据流的模式下，为了使得基本组件“动起来”，高层级组件里总会有大大小小的许多状态，以便控制基本组件的开/关、显示/隐藏等等。此外，除了控制基本组件的状态以外，高层级组件本身可能还承担着数据通信的功能，例如我们本次提到的异步请求和发送数据。在 React 中，状态state的更新会使得组件重新进行渲染（见State & 生命周期），有的时候我们只希望重新渲染这个组件的一部分组件（例如刚才所说的对话框），而有的时候我们希望重新请求数据（数据同步、表格翻页）全部刷新，于是我们通常会使用 useEffect 钩子对一些刷新操作添加限定，仅仅在某些变量修改的时候，才会重新执行该部分代码逻辑（在 React 官方文档中叫做关注点分离）。 问题 所以对于一个又需要刷新数据，又需要控制对话框，而且获取数据要请求两次 api 的组件，就会变成这个样子（CallBack 版本）： export default function Component(props) { let [dialogState, setDialogState] = useState(false); // some states for dialogs let [renderData, setRenderData] = useState(null); // some states for rendering let [page, setPage] = useState(1); // some states which force data refresh useEffect(() => { fetchSomeData("url", {params: "Some Params"}, {config: "Some Configurations"}, (data) => { // callback for success let someProps = getSomeProps(data); fetchSomeData("url2", {params: someProps}, {config: "Some Configurations"}, (data) => { // funciton for process setRenderData(processing(data)); }, () => {}); }, (error) => { // callback for failure }); }, [page]); // fetch data only when page changes if (renderData === null) return null; return ( <> {/* equals to <React.Fragment> */} <Dialog someStates={dialogState}/> <Others data={RenderData}/> </> {/* equals to </React.Fragment> */} ); } 于是这个组件的执行流程是这样子的： 组件第一次渲染：执行useEffect，开启异步数据请求，此时并没有任何有效数据用于渲染，于是返回null不加载模型； 组件收取到信息：执行回调函数，对数据进行处理，并更新组件状态，此时仍未执行组件刷新，数据不变； 组件状态得到更新：组件状态变化，组件刷新，但不再执行useEffect； （中间可能的）对话框状态变化：组件状态变化，组件刷新，但不再执行useEffect。 这样存在的问题在于， 回调函数过于复杂——函数体量太大在合作时难以理解，包装起来可能涉及数据传递的问题 回调函数嵌套——有可能在收到某些信息，还要基于这些信息继续发请求，那么回调函数可能嵌套多层 Promise 的意义 我感觉理解 JavaScript Promise这篇文章写的还是不错的，使用 Promise 构造一个函数，这个 Promise 就可以管理这个函数的状态，以便后续任务在这个函数执行完毕后使用。所以现代的 fetch 函数都尽可能返回一个 Promise，以便我们使用 Promise.then() 这个方法以便对数据进行处理。 所以上面的代码或许可以改成这个样子： export default function Component(props) { ... useEffect(() => { fetchSomeData("url", {params: "Some Params"}, {config: "Some Configurations"}).then((data) => { // funciton for process let someProps = getSomeProps(data); return fetchSomeData("url2", {params: someProps}, {config: "Some Configurations"}); }).then((data) => { // funciton for process setRenderData(processing(data)); }).catch((error) => { // function for failure }); }, [page]); // fetch data only when page changes ... } 那么这样有没有实质性的减少代码层数？减少了，原先存在的嵌套调用现在变成了连续使用 .then()函数，使得硕大的处理层变得轻松的多。 Async 和 await 与上一节一样，先挂出一个链接用于学习：【学习笔记】深入理解 async/await。 await 的出现带来了什么呢？await 使得获取的结果直接提取了出来，不再需要额外套一层函数用于执行。这样函数嵌套会更加少，而且也可以像同步的函数一样处理数据了。于是我们的代码会变得更加清楚，不会再像原来一样晦涩难懂。 于是我们的代码可能变成这样子，如果想分开处理异常可以套两个 try-catch块： export default function Component(props) { ... useEffect(async () => { try { let data = await fetchSomeData("url", {params: "Some Params"}, {config: "Some Configurations"}); // funciton for process let someProps = getSomeProps(data); let anoData = await fetchSomeData("url2", {params: someProps}, {config: "Some Configurations"}); // funciton for process setRenderData(processing(anoData)); } catch (error) { // function for failure } // try-catch block is unnecessary if no error exist }, [page]); // fetch data only when page changes ... } 但是这样 Eslint 组件是会报警告的—— ESLint: Effect callbacks are synchronous to prevent race conditions. Put the async function inside: 如果版本早于 React 16，可能会直接报错误—— An effect function must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => …) or returned a Promise. Instead, write the async function inside your effect and call it immediately 这是因为 useEffect是需要返回值来解决组件销毁/重建时的副作用清除的，而我们加上 async 关键字则会让这个函数返回一个 Promise，所以应该建一个普通的函数，然后在函数里面创建带有async关键字的函数，并立即调用。详见 hooks 学习之 useEffect。 export default function Component(props) { ... useEffect(() => {(async () => { ... })()}, [page]); // fetch data only when page changes ... } 并行的数据请求 我们的请求可能没有前置要求，那么异步的数据获取我们怎么进行处理呢？一般来说，我们对于数据请求，难免存在请求失败的情况，所以常见的策略是哪部分到了先加载哪部分，报错的部分再进行重试或请求备用数据源，以免用户等待太着急。于是我们就可以建造多个useEffect函数，分别进行数据请求和处理，加上 React 的关注点分离策略，我们就可以实现部分数据的渲染。 export default function Component(props) { let [dataA, setDataA] = useState(null); // data for Component A let [dataB, setDataB] = useState(null); // data for Component B useEffect(() => { fetchSomeData("urlA", {params: "Some Params"}, {config: "Some Configurations"}).then((data) => setDataA(data)); }, [page]); useEffect(() => { fetchSomeData("urlB", {params: "Some Params"}, {config: "Some Configurations"}).then((data) => setDataB(data)); }, [page]); return ( <> {/* equals to <React.Fragment> */} { dataA && <A data={dataA}/> } { dataB && <B data={dataB}/> } </> {/* equals to </React.Fragment> */} ); } 如果我们对数据正确性有非常高的要求，要求必须所有数据到齐才能渲染的话，可以使用Promise.all()函数。 export default function Component(props) { let [dataA, setDataA] = useState(null); // data for Component A let [dataB, setDataB] = useState(null); // data for Component B useEffect(() => { let remoteA = fetchSomeData("urlA", {params: "Some Params"}, {config: "Some Configurations"}); let remoteB = fetchSomeData("urlB", {params: "Some Params"}, {config: "Some Configurations"}); Promise.all([remoteA, remoteB]).then((dataArray) => { let [first, second] = dataArray; setDataA(first); setDataB(second); }).catch((error) => someFunction(error)); }, [page]); return ( <> {/* equals to <React.Fragment> */} { dataA && <A data={dataA}/> } { dataB && <B data={dataB}/> } </> {/* equals to </React.Fragment> */} ); }