Promise

4 min readJan 6, 2021

先認識AJAX 和 Promise有什麼不一樣？

Ajax 的語法

axios.get('/api/user/5')
  .then( res => {
    console.log(res.data); // { "name": "jayson" }
  });

Promise 的語法

Promise.resolve(5)
  .then( num => {
    console.log(num); // 5
  });

從語法上來看，除了第一行之外，其他部分其實幾乎都相同。

從功能上來看大致上可以這樣看

AJAX :

利用 JavaScript 從遠端以非同步的方式取得資料不一定要使用 Promise

Promise:

處理非同步行為的語法，專司流程控制常見於 AJAX

Promise 很難，因為寫法很多元，這裡介紹兩個常用的起手式

(1)

new Promise((resolve, reject) => {
  resolve(47);
});

(2)

Promise.resolve(47); // static method

上述兩個基本上是相同，尤其是起手式(1)的callback function裡如果只有一行resolve code，其實可以直接用方法(2)。

起手式之後，就可以用then接結果：

Promise.resolve(47)
  .then( num => { 
    console.log(num); // 47
  });

或是宣告變數，由變數接手結果：

const promise = Promise.resolve(47);promise.then( num => {
  console.log(num); // 47
});

接下來是串接的應用：

每個 return 都是 return 新的 promise
return 什麼，then 的 callback function 的 input 就接什麼

Promise.resolve(47)
  .then( num => {
    console.log(num); // 47
    return 5; // return Promise.resolve(5)
})
.then(num => {
  console.log(num); // 5
});

除了 then，也會使用 catch 接例外

Promise.resolve(47)
  .then( num => {
    throw 5; // return Promise.reject(5)
  })
  .then(num => {
    console.log('不會走到這行');
  })
  .catch(err => {
    console.log(err); // 5
  });

借用 JSONPlaceholder 網站提供的 Fack API，以及使用 axios 做為ajax的library

先宣告兩個 getTodo 和 getUser 這兩個 function 接我們的API.

onst BASE_URL = 'https://jsonplaceholder.typicode.com';const getTodo = (todoid) => {
  return axios.get(`${BASE_URL}/todos/${todoid}`);
}const getUser = (userid) => {
  return axios.get(`${BASE_URL}/users/${userid}`);
}

我們取得 todo ID 為 1 的todo，從這個 todo 取得 user ID後，再繼續用這個 user ID 取得 user 的 detail (email, name, username …)

getTodo(1)
  .then(res => {
    const { userId } = res.data;
    return getUser(userId); 
  })
  .then( res => {
    const { email, name, username } = res.data;
    console.log('show user info', email, name, username);
  });

上面的 promise 可以進階再用 async / await 改寫

(async function() {
  const res1 = await getTodo(1);
  const { userId } = res1.data; 
  const res2 = await getUser(userId);
  const { email, name, username } = res2.data;
  console.log('show user info', email, name, username);
})();

Promise

Written by Jayson Chiang