owned this note   changed 3 years ago  
Published Linked with GitHub

🏅 Day 5

非同步概念、async await

async 及 await 是執行非同步函式的一種寫法，此寫法可以讓非同步函式在閱讀上更接近同步函式

在非同步函式前加上 async 關鍵字，執行此函式時回傳值就會被轉為一個 Promise
在 async 非同步函式中，使用 await 接收回傳的結果，它會暫停此 async 函式的執行，並且等待 Promise 的解析，解析完之後會回傳解析值，並繼續此 async 函式的執行
也就是說在未等待到結果回傳前，不會執行到 await 之後的程式

範例：















function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}


async function add1(x) {
  const a = await resolveAfter2Seconds(20);
  const b = await resolveAfter2Seconds(30);
  return x + a + b;
}

參考資源

Async function / Await 深度介紹 | 卡斯伯 Blog - 前端，沒有極限
利用 async 及 await 讓非同步程式設計變得更容易 | MDN
async、await 再升級（章節影片）

題目（將答案寫在 CodePen 並提交至回報區）

流程：
批改作業 → 檢查獎勵 → 給予獎勵 → 退學或懲罰

// 批改作業
function correctTest(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const score = Math.round(Math.random()*100);
      if(score >= 60) {
        resolve({
          name,
          score
        })
      } else {
        reject("您已達退學門檻")
      }
    }, 2000)
  })
}
// 檢查獎勵
function checkReward(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(data.score >= 90) {
        resolve(`${data.name} 獲得電影票`);
      } else if (data.score >= 60 && data.score < 90) {
        resolve(`${data.name} 獲得嘉獎`);
      } else {
        reject(`您沒有獎品`)
      }
    }, 2000)
  })
}

將以下這段程式碼改寫為 async await 的寫法





 correctTest("小明")
  .then(data => checkReward(data))
  .then(reward => console.log(reward))
  .catch(error => console.log(error))

回覆範例：





const init = async function() {
 /* 在此填寫答案 */
}
init();

回報流程

請同學依照下圖教學觀看解答、回報答案:

回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)

回報區

報數 組別 / 名字 codepen / hackMD / 其他回饋
1 hsin yu https://codepen.io/tina2793778/pen/VwyzQjW?editors=0010
2 2 / Vic codepen
3 第 6 組/ Wendy Codepen
4 第 4 組 / 小宥 codepen
5 第 5 組 / Jin Codepen
6 第 9 組 / 黃士桓 Codepen
7 第 2 組 / Genos Codepen
8 第 3 組 / Hobby Codepen
9 第 3 組 / HedgehogKU Codepen
10 第 2 組 / peter Codepen
11 第 4 組 / sihle Codepen
12 第 7 組 / 程翔 Codepen
13 第 1 組 / Phoebe Codepen
14 第 8 組 / Hank Codepen
15 第 15 組 / 皓皓 Codepen
16 第 11 組 / Han Lai Codepen
17 第 3 組 / Justin Codepen
18 第 14 組 / 涼二 Codepen
19 第 3 組 / hiYifang Codepen
20 第13組 / KFC Codepen
21 第 14 組｜East Codepen
22 第 3 組 / Larry Codepen
23 Naiky Codepen @Naiky
24 第 8 組 / 陳暐中 Codepen
25 第 4 組 / Mischa Codepen_mischa_day5
26 第 5 組 / 灰塵貓 Codepen
27 第 4 組 / 苡安 Codepen
28 第 9 組 / konstante Codepen
29 第 1 組 / Jerry Huang Codepen
30 第 3 組 / Reynold Codepen
31 第 3 組 / Adam Hsu Codepen
32 第 1 組 / Claire Codepen
32 第 2 組 / wendy.li Codepen
33 第 15 組 / Chiu Codepen
34 第 6 組 / Ruta Codepen
35 第 1 組 / kimn Codepen
36 第 5 組 / Hazel Wu Codepen@HazelWu
37 海底藍 hackMD
38 第 1 組 / Ed Huang hackMD
39 第 6 組 / 謦麟 hackMD
40 第 2 組 / Rikkubook Codepen
41 第 2 組 / joe.chang Codepen
42 第 3 組 / 小葉 hackMD
43 0 / Aya Codepen
44 nick6303 Codepen
45 第 14 組 / Uniza Codepenn
46 第 11 組 / mandy Codepenn
47 第 1 組 / snow Codepen
48 第 10 組 / Otis Codepen
49 第 15 組 / yolala Codepen
50 第 5 組 / Nap Codepen
51 第 15 組 / Tofu Codepen
52 第 12 組 / Jimmy Codepen
53 第 5 組 / sihyun Codepen
54 第 6 組 / 馨云 Codepen
54 第 10 組 / 橘子 Codepen
55 第 10 組 / Butters Codepen
56 第 8 組 / Jordan Tseng Codepen
57 第 1 組 / Emily Hsi Codepen
58 第 8 組 / Albert Codepen
58 第 7 組 / jason06286 hackMD
59 第 5 組 / AmberCYT Codepen
60 第 5 組 / TracyChien Codepen
61 第 12 組 / Sylvia-H Codepen
62 第 14 組 / 皮皮 Codepen
Select a repo