iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

以 React 為主的那些前端事系列 第 7

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


上一篇
Day 06 - 那些~幫助開發的套件
下一篇
Day 08 - 那些在 component 裡的 Props 與 State
系列文
以 React 為主的那些前端事30

尚未有邦友留言

立即登入留言