ES6 Promise-2

Demo of how to chain Promise

by Po-Jung Chen

JavaScript

/**
 * Promise 使用 .then 串接
 * 在 .then 裡面 revole(value) 的 value 一樣是 promise 物件，
 * 可以被傳到下一個 .then 中使用。
 **/

const chainPromise = new Promise((resolve, reject) => {
  console.log('In new Promise, start callback') // 立即執行
  setTimeout(() => {
    let data = 10
    resolve(data) // 1 秒後執行
  }, 1000)
})

// 在 .then 裡面在 return resolve 的 value
// 這個新的 value 會被傳到下一個 promise 的 resolver 內
chainPromise.then((value) => {
    console.log('first .then') // 被 resolve 後執行
    return value + 3
  })
  .then((value) => {
    // 得到上一個 .then return 的值後執行
    console.log('second .then')
    console.log('The final value is ' + value)
  })



/**
 * EXAMPLE1: 在 Promise 的 callback 中回傳另一個 Promise
 **/

const returnPromise = new Promise((resolve, reject) => {
  // 立即執行
  console.log('In first Promise, start callback')
  setTimeout(() => {
    let data = 10
    resolve(data) // 2 秒後執行
    console.log('In fist Promise, resovle data')
  }, 1500)
})

// 當前面 Promise 的 resolve 得到內容後，才會執行 .then
returnPromise.then((value) => {
  // 在.then 的 resolvedCallback 中，可以得到在 new Promise 中 resolve 內所得到的值（value）。
  console.log('In first then, the value is ' + value)
  // 如果在 .then 的 resolvedCallback 中 return 一個值，則這個值會以 Promise 物件的形式傳到下一個 .then
  return value + 3
})

.then((value) => {
  // 因此在這個 .then 的 resolvedCallback 中，可以取得上一個 .then 中 return 的值。
  console.log('In second then, the value is ' + value)
  console.log('In second Promise, start callback')
  
  // 如果我們在 .then 中是 return 另一個 new Promise
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 1.5 秒後再執行
      resolve(value + 3)
      console.log('In second Promise, resovle data')
    }, 1500)
  })
})

// 則下一個 .then 會等到這個 Promise 中的 resolve 得到值後才執行。
.then((value) => {
  // 在這個 .then 的 resolvedCallback 中，可以得到上一個 new Promise 中 resolve 的值
  console.log('In third then, the value is ' + value)
})
.catch((reason) => {
  console.log('Request Failed ' + reason)
})


/**
 * EXAMPLE2: Return a new Promise in a Promise
 **/

function...