JavaScript(React)寫了一個await被老鳥嗆爆....

javascript js react

jojoman 2023-06-06 18:59:49 ‧ 3144 瀏覽

分享至

如題，小弟在專案寫了一個接API的async function，程式碼很簡單，如下面的圖(該圖是截取某個國外YT的)

我如圖裡的示範，在圈起來的位置寫了一個await，結果被老鳥嗆爆，他說前面fetch時是回傳Promise所以用await，但後面res已經回來了，不是Promise的處理不要亂用await...
就我對async await的理解 await除了處理Promise，應該也可以被理解為'這個動作做完才做下一個動作'，所以應該不影響該程式的執行，雖然圈起來的那個await拔掉確實不影響程式，但因為看蠻多國外的YT教學，好像那些資深的老手都習慣在fetch後res的後續動作加上await(不知道是否是因為程式碼理解上的考量)，還請各位大大指點一下，是否這裡加上await是習慣問題還是真的有其他用意呢？

看更多先前的討論...收起先前的討論...

小哈片刻 iT邦研究生 5 級 ‧ 2023-06-06 20:38:10 檢舉

你的前輩可能誤會了
res.json() 回傳的也是promise，所以用await是正確的。

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2023-06-06 21:01:17 檢舉

不~~~你要注意一下。
他的res 已經是 await 了。

後面的 await 的確是多餘的。沒用的。且也沒意義。

除非那個JSON()又是一種請求。
不過一般很少人會這樣處理。

DanSnow iT邦好手 1 級 ‧ 2023-06-06 21:13:41 檢舉

那個 json 是回傳 Promise https://developer.mozilla.org/en-US/docs/Web/API/Response/json

我自己的理解是這邊的 API 設計是讓你有機會用 stream 的型式去處理 response body ，所以 response 拿到時，不代表 API 的 body 已經完全回來了，所以 json 才設計成是 promise 讓你可以等 body 完全回來並解析