Promise特点

Promise的使用特点

1.Promise的状态一旦改变就无法更改

new Promise(function(resolve,reject){
        resolve();
        reject();
}).then(function(res){

}).catch(function(){

})

只会执行then中的方法，不会执行catch中的

2.then方法的参数期望是函数，传入非函数则会发生值穿透

new Promise(function(resolve,reject){
       resolve(123);
}).then('ASDASDAS').then(function(res){
       console.log(res)
})

会执行第二个then的回调

3.promise的回调是同步的，then是异步的

new Promise(function(resolve,reject){
        console.log(1);
        resolve();
}).then('ASDASDAS').then(function(res){
        console.log(2)
})
console.log(3)

输出结果为 1 3 2

4.链式调用then,上一个then的返回值是下一个then接收到的参数，如果抛出错误，会返回一个状态为reject的promise

new Promise(function(resolve,reject){
        resolve();
}).then(function(){
        return 123
}).then(function(last){
        console.log(last)
})

打印123

new Promise(function(resolve,reject){
     resolve();
}).then(function(){
      throw new Error("I'm error ")
}).then(function(last){
      console.log(last)
}).catch(function(error){
      console.log("error:"+error)
})

打印Error: I'm error

如果是then的回调中return new Error() 还是要进入下一个then中，要throw抛出错误才会进入到catch中

5.如果返回的是promise 那么会等待promise的异步执行，根据异步执行的是resolve，还是reject再进入then或者catch

new Promise(function(resolve,reject){
     resolve();
}).then(function(){
    return new Promise(function(resolve,reject){
         setTimeout(function(){
            resolve("go to then")
          },3000)
      })
}).then(function(last){
      console.log(last)
}).catch(function(error){
      console.log("error:"+error)
})

三秒之后打印：go to then

JS执行顺序

事件循环机制参考：译文：JS事件循环机制（event loop）之宏任务、微任务

image.png
1.每次执行时先执行主线程，执行主线程的过程中会碰到宏任务、微任务，各自放到各自的队列当中。
2.主线程执行完毕之后执行微任务
3.微任务执行完毕之后将一个宏任务放到主线程中执行
4.此时再根据主线程添加宏、微任务到对应的任务队列

//promise 为微任务
//setTimeout 为宏任务
setTimeout(function(){//setT1
    console.log('set1')
    //加到宏任务队列
})
var p1 = new Promise(function(resolve,reject){
    console.log('promise1')
    resolve(2)
})
setTimeout(function(){//setT2
    console.log('set2')
    //加到宏任务队列
})
p1.then(function(){
    console.log('then1')
})
console.log(2)

promise1
2
then1
set1
set2

过程分析：
主线程：[p1=new Promise(),console.log(2)]
微任务队列：[p1.then]
宏观任务队列：[setT1,setT2]

由于3.promise的回调是同步的，then是异步的
所以promise的回调是放在主线程中执行的，then放在微线程中

//promise 为微任务
//setTimeout 为宏任务
setTimeout(function(){//setT1
    console.log('set1')
    var p2= new Promise(function(resolve,reject){
      console.log('promise2')
      resolve(2)
    }).then(function(){
          console.log('then2')
    })
    //加到宏任务队列
})
var p1 = new Promise(function(resolve,reject){
    console.log('promise1')
    resolve(2)
})
setTimeout(function(){//setT2
    console.log('set2')
    //加到宏任务队列
})
p1.then(function(){
    console.log('then1')
})
console.log(2)

promise1
2
then1
set1
promise2
then2
set2
过程分析：
主线程 [p1=new Promise，2]
微 [p1.then]
宏 [setT1,setT2]

---

setT添加到主线程中
主线程 [console.log('set1'),p2=new Promise]
微 [p2.then]
宏 [setT2]