async await 背後的原理

把以前的誤解給釐清。

簡述

首先 async 和 await 是一個 ES7 推出的語法糖，讓你可以用很像同步的方式來寫處理非同步。範例可以參考我以前寫的文章：Promise 的小技巧

總之再強調一次，async 和 await 只是「看起來很像同步」，但背後一樣是非同步。

根據我在網路上找的資料是說，其實背後也是用 Promise 包裝起來，也因為這個原因 await 一定要放在 async function 裡才能運作。

所以我寫了一段對應的程式碼，可以比較一下差異。

1. async 的寫法

// 包裝 xhr
const getData = (url) => {
  return new Promise(resolve => {
    const request = new XMLHttpRequest();
    request.open('GET', api200, true);
    request.onload = () => {
      resolve(JSON.parse(request.responseText))
    }; 
    request.send();
  })
}
// async / await
const sendAllRequestByAsync = async () => {
  const data1 = await getData(api200)
  console.log('1', data1);
  const data2 = await getData(api200)
  console.log('2', data2);
  const data3 = await getData(api200)
  console.log('3', data3);
}

2. Promise 的寫法

// 包裝 xhr
const getData = (url) => {
  return new Promise(resolve => {
    const request = new XMLHttpRequest();
    request.open('GET', api200, true);
    request.onload = () => {
      resolve(JSON.parse(request.responseText))
    }; 
    request.send();
  })
}
// Promise
const sendAllRequestByPromise = () => {
  getData(api200)
    .then(data => {
      const data1 = data
      console.log('1', data1)
      return getData(api200)
    })
    .then(data => {
      const data2 = data
      console.log('2', data2)
      return getData(api200)
    })
    .then(data => {
      const data3 = data
      console.log('3', data3)
      return getData(api200)
    })
}