Promise

in js with 2 comments views: 823 times

Promise 出现的原因

为了解决地狱回调

Promise的创建

let p = new Promise(function(resolve, reject){
    if(/* 异步操作成功 */){
        resolve(data)
    }else{
        reject(err)
    }
})

Promise的创建需要一个函数(我们叫它执行器)作为参数,该函数有两个参数————resolve和reject,这两个参数也是函数(由js引擎提供),我们可以在Promise内部调用,当异步操作成功时,调用resolve,否则reject。

Promise的状态

Promise中的方法

resolve/reject 方法

resolve方法可以将pending转为fulfilled,reject方法可以将pending转为rejected。

then方法

通过给Promise示例上的then方法传递两个函数作为参数,可以提供改变状态时的回调,第一个函数是成功的回调,第二个则是失败的回调。

p.then(function(data){ // resolve方法会将参数传进成功的回调
    console.log(data)  
}, function(err){      // reject方法会将失败的信息传进失败的回调
    console.log(err)
})

示例:

var p = new Promise(function (resolve, reject) {
  var num = Math.random();
  setTimeout(function () {
    if (num > 0.5) {
      resolve(num)
    } else {
      reject(num)
    }
  })
})
p.then(function (num) {
  console.log('resolve', num)
},function(num){
  console.log('reject',num)
})

// resolve 0.72133339349872
// reject 0.2961330470649516

在Promise执行器中我们进行了一次异步操作,并在我们觉得合适的时候调用成功或失败的回调函数,并拿到了想要的数据以进行下一步操作

链式调用

每一个then方法都会返回一个新的Promise实例(不是原来那个),让then方法支持链式调用,并可以通过返回值将参数传递给下一个then

p.then(function(num){
    return num
},function(num){
    return num
}).then(function(num){
    console.log('大于0.5的数字:', num)
},function(num){
    console.log('小于等于0.5的数字', num)
})

catch方法

catch方法等同于.then(null, reject),可以直接指定失败的回调(支持接收上一个then发生的错误)

Promise.all()

这可能是个很有用的方法,它可以统一处理多个Promise,Promise.all能将多个Promise实例包装成一个Promise实例

let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})

let p = Promise.all([Promise1, Promise2, Promise3])

p.then(funciton(){
  // 三个都成功则成功  
}, function(){
  // 只要有失败,则失败 
})

这个组合后的Promise实例和普通实例一样,有三种状态,这里有组成它的几个小Promise的状态决定:

Promise.race()

与all方法类似,也可以将多个Promise实例包装成一个新的Promise实例
不同的是,all是大Promise的状态由多个小Promise共同决定,而race时由第一个转变状态的小Promise的状态决定,第一个是成功态,则转成功态,第一个失败态,则转失败态

Promise.resolve()

可以生成一个成功的Promise

Promise.resolve('成功')

// 等同于

new Promise(function(resolve){
    resolve('成功')
})

Promise.reject()

可以生成一个失败的Promise

Promise.reject('出错了')
//等同于
new Promise((resolve, reject) => reject('出错了'))

参考:https://juejin.im/post/5ab20c58f265da23a228fe0f


Responses
  1. yang

    请问,你这个评论样式是如何实现的?

    Reply
    1. @yang

      这个是主题自己带的样式

      Reply