Day 07 - 非同步流程控制

如果有错误,欢迎留言指教~ Q_Q

callback,很重要!

外层的 component 一定拿不到内层的状态,除非有 callback

props 也是一种 callback ,当 render 时,就会 call

如果这个 callback 被当作一个 prop 传给下层的 component 的话,其他的 component 也许会做些多余的 re-render

useEffect 会在 component 渲染完成後执行,类似 callback function

callback

Promise

then 的函数是选用的,以及 catch(failureCallback) 是 then(null, failureCallback) 的简写。

doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => {
  console.log(`Got the final result: ${finalResult}`);
})
.catch(failureCallback);

好处

  1. 当次回圈结束前,callback 不会被呼叫
  2. 用 .then() 呼叫 callback,形成 async 非同步
  3. 很多的 callback 就用很多个 .then() 串接起来
  4. 最後可表示成功或是失败的物件

async / await

// es6  async/await
async function foo() {
  try {
    let result = await doSomething();
    let newResult = await doSomethingElse(result);
    let finalResult = await doThirdThing(newResult);
    console.log(`Got the final result: ${finalResult}`);
  } catch(error) {
    failureCallback(error);
  }
}

ref

  1. https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Using_promises

我其实没写完鸭 XDDD


<<:  [Day13] 介面篇 - 显示血条3

>>:  [Golang] Map

04
杂谈    

Re: 新手让网页 act 起来: Day06 - PropTypes

昨天我们介绍完如何建立一个元件,今天就来介绍 PropTypes,让建立的元件更加的完整吧! Pro...

[Day6] 开发环境建置

这节将介绍笔者这次的开发环境。 笔者这次选用Python做为开发的程序语言。 会选择Anaconda...

Day 18:「极速开发」- Vitawind

「闪电 + 疾风的组合吗? 不错不错!」 既然我们之前都说了要用 Vue + Tailwind 来...

Day23_控制项(A18遵循性) -2021/10/06

阿呜~第23天了,再撑一个星期~XDD" ▉A.18 Compliance 遵循性 所有的...

[Day 6] Button

Day 5 进到了网站中最常见需要做功能性的环节 Button <Button variant...