Promise

為什麼需要 Promise

Promise很常用來處理AJAX的行為。

常見的非同步問題（不限於 Ajax）：
1. 回呼地獄(巢狀結構一直重複)
2. 寫法不一致(有的用 done，有的用 success)
3. 無法同時執行（jQuery 有並行寫法，但不直覺）

如以下範例：

使用範例前，要先載入以下cdn：
<script src=”https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

const url = 'https://randomuser.me/api/';
let data = {};
$.ajax({
  url: url,
}).done(function (res) {
  console.log(res);
  const seed = res.info.seed;
  console.log(seed, res);
  $.ajax({
    url: `${url}?seed=${seed}`,
  }).done(function(res2) {
    console.log(res2);
  })
});

Promise 很常用來處理非同步問題。

1. 使用 return 來串接回呼
2. 寫法一致(一律使用then)
3. 使用 Promise.all 可以解決無法同時執行的問題

const url = 'https://randomuser.me/api/';
axios.get(url)
  .then((res) => {
    console.log(1, res)
    const seed = res.data.info.seed;
    return axios.get(`${url}?seed=${seed}`) 
    →(這個結果，會在下一個then傳進來)
  })
  .then((res) => {
    console.log(2, res)
  });
Promise.all([axios.get(url), axios.get(url)])
  .then(([res1, res2]) => {
    console.log(res1, res2)
  })