同步事件&非同步事件

同步事件

同步事件跟字面上的意思相反，指的是做完一程序後才繼續往下做另一件事。換句話說，當一個程序在執行時，其他程序必須等待，直到這個程序完成後才能開始執行下一個程序。

非同步事件

非同步事件指的是不同程序可以同時進行。這種方式允許多個程序並行運行，提高了效率。

promise&then

定義

Promise 是一個表示非同步運算的最終完成或失敗的物件。

建立promise

Promise 是一種物件，它的建構函式接受一個執行函式 (executor)，用來定義非同步行為。執行函式會被馬上呼叫並傳入兩個參數：(resolve, reject)。Promise 物件的初始狀態為 pending，當我們完成了非同步流程，在執行函式中呼叫 resolve()，會將 Promise 的狀態轉變成 resolved。當錯誤發生時，我們呼叫 reject() 會將 Promise 的狀態轉變為 rejected。

範例:

function test() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve("操作成功");
      } else {
        reject("操作失敗");
      }
    }, 1000);
  });
}

使用promise

.then():

Promise具有 .then() 方法，用來定義非同步行為完成後的動作。.then() 方法接受一個 callback function 作為參數，當 promise 轉變成 resolved 狀態時，這個 callback function 會被執行。

範例:

function test() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve("操作成功");
      } else {
        reject("操作失敗");
      }
    }, 1000);
  });
}

// 呼叫 test 函數並鏈式處理結果和錯誤
test()
  .then(result => {
    console.log(`結果: ${result}`);
  })

.catch():

Promise具有 .catch() 方法，用來定義非同步行為完成後的動作。.then() 方法接受一個 callback function 作為參數，當 promise 轉變成 rejected 狀態時，這個 callback function 會被執行。

範例:


function test() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve("操作成功");
      } else {
        reject("操作失敗");
      }
    }, 1000);
  });
}
test().catch(error => {console.log(`結果:${error}`);})

promise Chaining

.then() 方法也會回傳一個新 Promise，其 resolve 的值等於 .then() 的callback function 的回傳值。所以我們可以不斷地用 .then() 方法串接非同步流程

範例:

function test() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve("操作成功");
      } else {
        reject("操作失敗");
      }
    }, 1000);
  });
}

test()
  .then(result => {
    console.log(`第一次呼叫結果:${result}`)
  })
  .catch(error => {
    console.log(`第一次呼叫結果:${error}`)
  })
  .then(() => {
    return test(); // 第二個Promise
  })
  .then(result => {
    console.log(`第二次呼叫結果:${result}`)
  })
  .catch(error => {
    console.log(`第二次呼叫結果:${error}`)
  });

async&await

定義

在 ES7 裡頭 async 的本質是 promise 的語法糖，只要 function 標記為 async，就表示裡頭可以撰寫 await 的同步語法，而 await 顧名思義就是「等待」，它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( reject ) 後才會進行下一步，當 async function 的內容全都結束後，會返回一個 promise，這表示後方可以使用.then語法來做連接。

範例:

function test() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve("操作成功");
      } else {
        reject("操作失敗");
      }
    }, 1000);
  });
}

async function example() {
  try {
    const firstResult = await test();
    console.log(`第一次呼叫結果: ${firstResult}`);
  } catch (error) {
    console.log(`第一次呼叫結果: ${error}`);
  }

  try {
    const secondResult = await test();
    console.log(`第二次呼叫結果: ${secondResult}`);
  } catch (error) {
    console.log(`第二次呼叫結果: ${error}`);
  }
}

// 调用 async 函数
example();

參考資料:

https://www.shubo.io/javascript-promise/#google_vignette https://www.oxxostudio.tw/articles/201908/js-async-await.html https://andyyou.github.io/2017/06/27/js-promise/

wdOq / ES6-note