Promise in JavaScript

maxresdefault.jpg

Promise in JavaScript

通过下面代码来初步了解下promise

• Promise是一个构造函数，它接收一个回调函数，这个回调函数有两个argument,resolve和reject
• Promise保存了一个异步处理的结果，可能是resolve,也可能是reject
• 通过then,catch,finally,all等api去处理异步处理结果，实现链式调用

故事1

有一天小明的妈妈下班回到家，发现家里被小明弄得乱七八糟，满地垃圾，小明见妈妈很生气，就Promise(承诺/保证)在十分钟之内把房间打扫干净。

let promiseToCleanTheRoom = new Promise(function (resolve, reject) {
  
  //小明正在努力打扫房间
  //cleaning the room

  
  let isClean = true;

  //无论成功还是失败，小明得勇敢的说出来
  if(isClean){
    resolve('Clean')
  } else{
    reject('not Clean')
  }
})

// 十分钟后妈妈来检查 小明承诺 的结果
promiseToCleanTheRoom.then(function (fromResolve) {
  //从resolve中 获取了 打扫干净  成功的消息
  console.log('the room is' + fromResolve)
}).catch(function (fromReject) {
  //从reject中 获取了 打扫干净  失败的消息
  console.log('the room is' + fromReject)
})

故事2

小明一家三口国庆旅游回到家中，发现家里满是灰尘，妈妈就对小明说：“小明，如果你在十分钟内把房间打扫干净，并且把垃圾处理了，我就给你买一个冰淇淋吃”

// 任务1 打扫房间
let cleanRoom = function() {
    return new Promise(function(resolve, reject) {
        resolve('Clean the Room' + '\n')
    })
}
// 任务2 清理垃圾
let removelGarbage = function(message) {
    return new Promise(function(resolve, reject) {
        resolve(message + 'Romove the garbage' + '\n')
    })
}
// 任务3 获取冰淇淋奖励
let winIcecream = function(message) {
    return new Promise(function(resolve, reject) {
        resolve(message + 'won a icecream' + '\n')
    })
}

cleanRoom()
    .then((fromResolve) => {
        return removelGarbage(fromResolve)
    })
    .then((fromResolve) => {
        return winIcecream(fromResolve)
    })
    .then((fromResolve) => {
        console.log(fromResolve)
    })

// --------------****Promise.all()和Promise.race()***-------------
//promise chain all resolved
Promise.all([cleanRoom(),removelGarbage(),winIcecream()]).then(()=>{
  console.log('all finished')
})

//one of promise chain resolved
Promise.race([cleanRoom(),removelGarbage(),winIcecream()]).then(()=>{
  console.log('one of them is finished')
})

通过上述两个例子，你会发现，通过promise处理异步，代码会变得很干净，回调嵌套也变得简单明了，只有当上一个回调处理完了，我才能根据返回的消息，执行下一次回调，基本上解决了回调地狱的问题