Promise

Posted on

定义

MDN定义
1 Promise对象用作异步计算
2 一个Promise代表一个现在、将来或者永不可能可用的值
3 可将异步操作队列化，使其按照期望的额顺序执行，并返回符合预期的结果
4 可在对象直接传递和操作promise,帮助我们处理队列

Why Promise

异步操作常见语法
1 事件侦听与响应 addEventListener
2 回调 如ajax

###
1 回调地狱，调试不方便，不好维护
2 无法使用 try catch错误处理机制 throw return
3 无法正常检索堆栈信息，每一次回调都是在系统层面的调用
4 多个回调函数之前难以建立联系

Promise详解

new Promise(function(resove,reject){
//执行器函数
//一段耗时很长的异步操作
resolve();//数据处理完成
reject();//数据处理出错
//resolve reject会改变promise实例的状态，如果数据处理完成则调用then的第一个函数，出错则会调用then()的第二个响应函数
}).then(function(A){
//成功 下一步
},function(){
//失败
})

Promise三个状态
pending 初始状态
fulfilled 成功
rejected 失败
promise状态发生改变就会触发then promise状态一经改变不会发生改变

注意：如果在then中不直接返回promise实例对象，将会执行下一步操作，即使返回值为false，false将会作为返回值传递到相应的then函数中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
console.log("go!")
new Promise(resolve => {
    setTimeout(() => {
      resolve('hello')
},2000)
})
.then((a) => {
    console.log(a);
   (function () {
    return new Promise(resolve =>{
        setTimeout(()=>{
        resolve('world')
           console.log("merrry")
    },2000)
    })
    }());
    return false;
})
.then(a=>{
    console.log(a+"yes")
})
//go!
//hello
//falseyes
//merrry 间隔2s

then()

接收两个函数作为参数分别代表 fulfilled rejected
then()可以返回一个新的promise实例，所以可以链式调用
当前面的promise状态改变时，then()根据其最终状，选择响应函数执行。

状态响应函数可以返回新的promise或者其他值
如果返回新的promise 那么下一级.then()会在新的promise状态改变之后执行
如果返回其他任何值，则会立即执行下一级then()

then()里面有then(),则外面的then会等里面的then()全部执行完才执行
then()如果参数不符合规范则会被忽略，执行后面的步骤

错误处理

promise会自动捕获内部异常，并交给reject执行

两种方法：
1 reject(‘error’) .then(null,message=>{})

1
2
3
4
5
6
new Promise((resolve,reject)=>{
    reject('errr')
})
.then(null,message=>{
    console.log(message)
})

2 throw new Error(‘error’) .catch(message=>{})

catch()也会产生一个promise实例
catch()可以与then()连用
建议在最后都加一个catch操作以便处理错误。

Promise.all()

接收一个数组，返回一个新的promise，数组里可以是promise对象，也可以是别的值，只有promise会等待状态改变
当所有子promise都完成，返回值是全部promise返回值的组成的数组
当有任何一个结果失败，则该promise失败，返回值是第一个失败的子promise的结果

Promise.race()

接收一个数组，当任一个promise完成则状态改变

Promise一旦创建立刻执行

Promise.resolve()

1 参数为空，返回一个状态为fulfilled的promise实例
2 参数是一个跟promise无关的值，则同上，但是fulfilled函数为接收到这个参数
3 若参数为promise实例，则返回该实例，不做任何修改。
4 若参数为thenable则立即执行

Promise.reject

类似Promise.resolve返回一个状态为rejected的promise实例