Day12-救世主Promise

前言

在ES6之前,要使用非同步并且正确输出资料必须透过callback,然而callback不好学习与麻烦,甚至还会有不经意的callback hell,让开发不舒服。

於是Promise的出现,更直觉的方式解救了苍生!!!

来学习Promise!!!

docs

promise需要带入两个参数,通常会被定义为resolve和reject

promise有三种状态,当promise动作开始会进入pending,完成时会执行reject或fulfill

• pending:
• fulfill
• reject

const promise = new Promise(function(resolve, reject){
  let result = false
  setTimeout(() => {
    result = true
    if(result){
    resolve('OK status 200')
  }   
    reject('error status 500')
  },1000)
})

然後我们会使用到.then .catch去接受promise的回传值

• 当回传false即会被catch抓住回报错误
• 而正确即被then继续串接

.then((res) => console.log(res))
.catch((error) => console.log(error))

最後再使用一定会执行的函式finally,结束动作

.then((res) => console.log(res))
.catch((error) => console.log(error))
.finally(() => console.log('end'))

完整程序码

const promise = new Promise(function(resolve, reject){
  let result = false
  setTimeout(() => {
    result = true
    if(result){
    resolve('OK status 200')
  }   
    reject('error status 500')
  },1000)
})
.then((res) => console.log(res))
.catch((error) => console.log(error))
.finally(() => console.log('end'))

/*
OK status 200
end
*/

补充说明: .then可以一值串接,就跟callback一样

Promise.all

all method需要等Promise都完成,才会继续执行

const promise1 = new Promise(function(resolve, reject){
  let result = false
  setTimeout(() => {
    result = true
    if(result){
    resolve('OK status 200')
  }   
    reject('error status 500')
  },1000)
})
const promise2 = new Promise(function(resolve, reject){
  let result = false
  setTimeout(() => {
    result = true
    if(result){
    resolve('OK status 200')
  }   
    reject('error status 500')
  },3000)
})
const promiseAll = Promise.all([promise1,promise2])
.then((res) => console.log(res))
//[ 'OK status 200', 'OK status 200' ]

若我们把其中一个改成false

const promise1 = new Promise(function(resolve, reject){
  let result = false
  setTimeout(() => {
    result = true
    if(result){
    resolve('OK status 200')
  }   
    reject('error status 500')
  },1000)
})
const promise2 = new Promise(function(resolve, reject){
  let result = false
  setTimeout(() => {
    result = false
    if(result){
    resolve('OK status 200')
  }   
    reject('error status 500')
  },3000)
})
const promiseAll = Promise.all([promise1,promise2])
.then((res) => console.log(res))
.catch((error) => console.log('error')) //error

就会被catch抓住!!!