Promise 筆記

印出剪貼的文字

navigator.clipboard.readText()
  .then(text => console.log(text))

new Promise

resolve, rejcet 都是 function

ES5 function 寫法

function init(resolve, reject) {
  reject(3)
}
const myPromise = new Promise(init)
myPromise
  .then((data) => console.log('data', data))
  .catch(err => console.log('err', err))

全部 arrow function

const myPromise = new Promise((resolve, reject) => resolve(3))

myPromise
  .then((data) => console.log('data', data))
  .catch(err => console.log('err', err))

Promise 裡面寫 setTimeout()

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
  }, 3000)
})

myPromise
  .then((data) => console.log('data', data))
  .catch(err => console.log('err', err))

建立兩個 Promise 並於不同階段回傳不同的 Promise 物件

const myPromise = new Promise((resolve, reject) => {
  resolve(123)
})

const p2 = new Promise((resolve, reject) => {
  resolve(456)
})

myPromise
  .then(data => { 
    console.log('data1', data)
    return p2 
  })
  .then(data => { 
    console.log('data2', data)

  })
  .catch(err => console.log('err', err))

將 XMR 改寫成 Promise

const myPromise = new Promise((resolve, reject) => {
  var request = new XMLHttpRequest();
  request.open('GET', 'https://run.mocky.io/v3/c7a74184-01b8-48c1-8714-1206ccc77c51', true);

  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      var data = JSON.parse(this.response)
      resolve(data)
    }
  }
  request.onerror = function(err) {
    reject(err)
  }
  request.send();
})

myPromise
  .then(data => { 
    console.log('myPromise data', data)
  })
  .catch(err => console.log('err', err))

更多 Promise 裡 setTimeout 寫法

setTimeout 第一個參數是 callback function

三秒之後呼叫 resolve 這個 function

const myPromise = new Promise((resolve, rejsect) => {
  setTimeout(resolve, 3000)
})

myPromise
  .then(data => { 
    console.log('myPromise data', data)
  })
  .catch(err => console.log('err', err))

sleep 是一個 function，故執行完後回傳 Promise

function sleep(ms) {
  const myPromise = new Promise((resolve, rejsect) => {
    setTimeout(resolve, ms)
  })
  return myPromise
}

sleep(1500)
  .then(data => { 
    console.log('myPromise data', data)
  })
  .catch(err => console.log('err', err))

改成箭頭函式

// 稍微簡化
// const sleep = ms => new Promise((resolve, rejcet) => {
//   setTimeout(resolve, ms)
// })

// 最簡化
const sleep = ms => 
  new Promise(resolve => setTimeout(resolve, ms))

sleep(1500)
  .then(data => { 
    console.log('myPromise data', data)
  })
  .catch(err => console.log('err', err))

回傳 sleep()

const sleep = ms => 
  new Promise(resolve => setTimeout(resolve, ms))

sleep(1500)
  .then(data => { 
    console.log('myPromise data', data)
    return sleep(500)
  })
  .then(data => {
    console.log('data2', data)
  })
  .catch(err => console.log('err', err))

async, await

promise 版本

const sleep = ms => 
  new Promise(resolve => setTimeout(resolve, ms))

function mainPromise() {
  console.log('enter main')
  sleep(1000).then(() => {
    console.log('exit main')
  })
}

mainPromise()

async, await 版本

const sleep = ms => 
  new Promise(resolve => setTimeout(resolve, ms))

async function main() {
  console.log('enter main')
  await sleep(1000)
  console.log('exit main')
}

main()

以 fetch 的方式拿到資料

function getData() {
  const api500 = 'https://run.mocky.io/v3/7b8f483c-dd45-42c1-a745-f0a622ed1c6a'
  const api200 = 'https://run.mocky.io/v3/c7a74184-01b8-48c1-8714-1206ccc77c51'
  const lidemy = 'https://lidemy.com'
  const data = {
    name: 'yo'
  }
  return fetch(api200, {
    method: 'POST',
    body: JSON.stringify(data),
  })
    .then(response => response.json())
  }

const sleep = ms => 
  new Promise(resolve => setTimeout(resolve, ms))

async function main() {
  console.log('enter main')
  await sleep(1000)
  try {
    // async, await 的語法糖把 promise 執行完的結果放到 result 
    const result = await getData() // Promise
    console.log('result', result)
  } catch(err) {
    console.log(err)
  } 
}

main()

asyn, await 總結

• 加上 async, await 的關鍵字，就可以非同步執行，不會 block mainstream
• function call 要「回傳 (return)」 promise 物件才能用 async, await