#### 什麼是同步代碼
1. 單線程的程式執行方式
2. 每行程式會像排隊依樣依序執行，此方式可能會造成當有程式卡住時後面程式也會跟著卡住，需要花很長的時間進行等待

#### 什麼是非同步代碼
1. 非單線程執行方式
2. 程式執行的時候會調用callback. function 在任務的背後運轉，其他的程式會繼續往下執行，等到callback. function完成任務，會回傳結果

#### 什麼是AJAX
Asynchronous JavaScrupt And XML(AJAX)
使用異步的方式與web sever進行動態資料請求。在不需要加在頁面的情況下就可以做資料的更新。
XML是一種數據格式，用於數據的傳輸，現今已經沒有API再使用XML格式，都是使用json格式。

XML Http Request function

const req = new XMLHttpResuest();
req.open('GET', 'https://restcountries.eu/rest/v2')
req.send()
//發出請求 send request

req.addEventListener('load', ()=>{
console.log(this.responseText)
    //輸出的內容是json
    
    //將json資料解析為object格式
const data=JSON.parse(this.responseText)
console.log(data)
})

---

### Promise
Promise 是在 ES6 出現的新功能，並且是用來優化過去回調函式的寫法。

Promise 照英文上的意思，是約定、承諾，它代表的意涵是這個約定請求會在未來每個時刻返回數據給調用者。在 MDN 文件中， Promise 是用來表示一個異步操作的最终完成（或失敗）及其结果值。

優點：
1. 使用Promise讓我們可以**不在需要依賴事件和回調函數來處理異步結果**，如此可以避免事件和回調函數有時會得到不可預測的結果。
2. Promise使用**異步操作鏈(Promise chain)**，不會造成callback hell

#### Promise Lifecycle

一個 Promise 中會有三種狀態，會影響`.then` `.catch` 的執行結果
1. **Pending**: 當建立一個Promise會處於Pending初始狀態，此時 Promise 還沒有任何結果。在 Pending 狀態下， then 和 catch都不會執行，直到狀態改變。
2. **Fulfilled**: Promise成功獲取一個值時的狀態，此時 Promise 會呼叫`result`函式來傳遞這個值，`catch`方法的參數會被執行。
3. **Rejected**: Promise獲取失敗時的狀態，此時 Promise 會呼叫`reject`函式來傳遞這個值，`then`方法的參數會被執行。

#### Consuming Promise
指使用 promise 物件的程式碼，也就是要等待 promise 物件的結果的程式碼。通常會使用 `then` 和 `catch `方法來呼叫callback function，這些函式會在 promise 物件實現(resolve)或拒絕(reject)時被呼叫，並接收 promise 物件的值或錯誤。程式碼可以用來處理非同步操作的結果，例如發送網路請求、讀取檔案、設定計時器等。

const lotteryPromise = new Promise((resolve, reject) => {
  console.log("Lotter draw is happening 🔮");
  setTimeout(() => {
    if (Math.random() >= 0.5) {
      resolve("You Win 💰");
    } else {
      reject(new Error("You lost 💩"));
    }
  }, 2000);
});

lotteryPromise
  .then((ress) => console.log(ress))
  .catch((err) => console.error(err));

//---promise 的setTimeout

const wait = function (ss) {
  return new Promise((resolve) => {
    setTimeout(resolve, ss * 1000);
  });
};

wait(1)
  .then(() => {
    console.log("1 second");
    return wait(1);
  })
  .then(() => {
    console.log("2 second");
    return wait(1);
  })
  .then(() => {
    console.log("3 second");
    return wait(1);
  })
  .then(() => {
    console.log("4 second");
    return wait(1);
  });

#### Promise語法糖 -async await

更詳細內容[另一篇筆記](https://)