[疑問] 關於 promise, async 寫一個 fake fetch 含 call back

benson00077 commented 3 years ago

背景解釋

想寫一個 fake fetch function 並在 fetch 之後呼叫 callback function，但不如預期

我想模仿 axios 寫一個 promise-based 的函數，如下

const fakeFetch = () => {
  return new Promise((res, rej)=> {
    console.log("data fetching...")
    setTimeout(() => {
      res("Execute after 0.3 sec")
    }, 300)
  })
    .then(res => console.log(res))
    .catch(err => console.log(err))
}

且想在呼叫時利用 async 關鍵字，並避免 try ... catch chain，因此有個 HOF 如下

const asyncHandler = fn => {
  Promise
    .resolve(fn)
    .catch(err => console.log(err))
}

利用 async 關鍵字呼叫後，呼叫一個 call back，三種 test case 範例如下 (cb for callback function)

// --- 1 ---
async function myAsync1(options = {}, cb) {
  const executer = () => {
    if (options.two) fakeFetch()
  }

  if (options.one) await executer()

  if (typeof cb === "function") cb()
}

// --- 2 --- 
async function myAsync2(options = {}, cb) {
  const executer = async () => {
    if (options.two) await fakeFetch()
  }

  if (options.one) await executer()

  if (typeof cb === "function") cb()
}

// --- 3 --- 
async function myAsync3(options = {}, cb) {

  if (options.two) await fakeFetch()

  if (typeof cb === "function") cb()
}

// --- 用 HOF 包起來 ---
const test1 = (...args) => asyncHandler(myAsync1(...args))
const test2 = (...args) => asyncHandler(myAsync2(...args))
const test3 = (...args) => asyncHandler(myAsync3(...args))

最後是在別的檔案中呼叫這三個 test case ，如下

const options = {
  one: true,
  two: true
}

test1(options, console.log("This sentence show at the end"));
test2(options, console.log("This sentence show at the end"));
test3(options, console.log("This sentence show at the end"));

問題

test1, 2 ,3 log 出的順序都是 "This sentence show at the end" → "data fetching..." → "Execute after 0.3 sec"，我以為至少會是 "data fetching..." → "This sentence show at the end" 。原因是我的 fakeFetch() 有問題嗎？
如果要達到上點預期的順序，fakeFetch() 要怎麼改才好？
補充，我自己寫用 axios 時 test 1 貌似本來就會達不到預期，test 2 可以。不太懂為什麼，也許等 fakeFetch() 寫好後比較好釐清這個問題 (先解決1.2問題後我再發問這點)。

dreamline2 commented 3 years ago

原因是因為你 callback 傳進去的不是一個 function 而是 console 所以直接執行。改成是 () => console.log("This sentence show at the end") 就會如預期是在最後 console
同上。補充兩點，第一點：在寫 promise function 的時候，你會預期是回傳 promise 因此會在 wrapper 做 chain 裡面就不使用 then, catch 第二點：asyncHandler 本身使用的 Promise.resovle 是讓 promise 確認回傳，因此不用接 catch，換句話說這一個 async handler 沒有其意義（？
Method1 使用的 executer 是同步的，這意味者會直接執行。Method2 使用的 executer 是非同步的，這意味著會執行完在執行 callback function，因此 test1 不會達到預期是正常的

benson00077 commented 3 years ago

整理一下，也接續問一下。

釐清 Async, await 關鍵字

當我把 Test 修正為傳遞 cb 而不是呼叫之後

test1(options, () => console.log("This sentence show at the end"))
//  "data fetching..." → "This sentence show at the end" → "Execute after 0.3 sec"

test2(options, () => console.log("This sentence show at the end"));
//  "data fetching..." → "Execute after 0.3 sec" → "This sentence show at the end"

test3(options, () => console.log("This sentence show at the end"));
//  "data fetching..." → "Execute after 0.3 sec" → "This sentence show at the end"

到這裡我就不懂為何 myAsync1, myAsync3 會不一樣了。讀了一次 await 官方文件後，我可不可以說：

3-1. 因為 myAsync1 內的 executor ~~本身並非一個 Promise~~ ，所以直接被 converted to a resolved Promise 導致沒有 block / pending?
- 🡪 executor 並未回傳 Promise ，所以 await 後面會 converted 沒錯
3-2. 所以 myAsync1 這個 await 關鍵字是不是冗員？有放跟沒放一樣。
- 🡪 yes
3-3. 我看 myAsync2 中可以 await asyncExecutor() ，是因為當 async 函式被呼叫時，它會回傳一個 Promise ，所以有 block / pending 的過程
- 🡪 yes，見下方回覆。
3-4. 如果 myAsync2 改成下面這樣(executer 前面 await 拿掉)，順序又變得跟 test1 一樣。目前理解為 await 也有他的作用範圍。
- 🡪 沒錯，如文件：await 運算子可被用來等待 Promise，只能在 async function內使用。

async function myAsync2(options = {}, cb) {
  const executer = async () => {
    if (options.two) await fakeFetch()
  }

  if (options.one) executer()

  if (typeof cb === "function") cb()
}

test2(options, () => console.log("This sentence show at the end"));
//  "data fetching..." → "This sentence show at the end" → "Execute after 0.3 sec"

Err handler w/o try catch block

感謝你第二點的補充，有讓我稍微懂了些。

2-1. 我嘗試改成在 wrapper 做 chain，並改成 rejected promsie，如下

const fakeFetch = () => {
return new Promise((res, rej)=> {
console.log("data fetching...")
setTimeout(() => {
  rej("Message after 0.3 sec")  // reject
}, 300)
})
}

2.2. 然後想寫一個 HOF 避免 try...catch ，網路上有參考資料，我先記在這邊。
2.3. 補充一下 asyncHandler 本來是想學這裡的寫法。...write a helper function that wraps our express routes to handle rejected promises. 因為 express 的 middleware有 next() 所以好像可以這樣 wrap...。如果要模仿是不是等於要再設計出類似 express middleware 的 next() 機制的東東...。

其他資料

Async, Promise 只是描述的角度不同
Technically, all languages are synchronous, even Javascript. However, Javascript works a lot better in an asynchronous design because it was designed to be single threaded. ...ref

dreamline2 commented 3 years ago

首先，需要先理解一件事情， async function 表示回傳是 promise，Test1 的 executer 不是 promise所以無法儲存狀態停止去等待它完成，因此變成先執行了。For your reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function#description
因為你寫的 asyncHandler 沒有回傳值。在文章中他是回傳一個 middleware 的函數，意味者他是可以把 try..catch..的錯誤包給下一個函數（next 是下一個函數的意思，因此不用設計這個東東）

benson00077 commented 3 years ago

補充 async await

benson00077 commented 2 years ago

補充 Generator ，跟 Promise & async await 關聯，也與協程概念關聯。 Generator 內的關鍵字 yield ，查了一下字典，這個字也有停車讓道、讓出放棄的意思，像是 Generator 函數把執行所有權讓給別人先執行一樣，蠻有趣的。參考：JavaScript中的协程

benson00077 / dag_graph