ES6 18.异步Promise

要点:1.Promise介绍   2.实例测试 

一.Promise介绍

1.Promise,即异步通信编程的一种解决方案，比传统的回调式更强大

2.ES6之前非常多层次嵌套的同步、异步，执行顺序混乱且不好维护

3.Promise很好的解决了这些问题，下面为它的语法

// 创建一个Promise实例
let p =new Promise((resolve,reject)=>{
//   一顿异步通信操作之后，返回成功或失败
// 然后判断成功或失败去执行resolve或reject
if(false){
    // console.log('异步通信执行成功！');
    resolve('执行成功');
}else{
    // console.log('异步通信执行失败！');
    reject('执行失败');
}
})

// then方法可执行resolve的回调函数
// catch方法可执行 reject的回调函数
p.then((value)=>{
    console.log(value);
}).catch((reason)=>{
    console.log(reason);
})

 

ps:上面提供的方法会很清晰 ，它把多层嵌套的回调函数给分离出来，通过  then 和 catch 来实现

4.上面例子的语法，p作为Promise实例，可以进行连缀链式操作

5.当执行then方法后，本身依旧返回当前的Promise实例，方便链式

6.通过构造方法的两个参数去执行回调函数，并传递参数

7.catch ()方法还可以作为then 第二个参数进行存在，方便多层回调

// 一体化操作
p.then((value)=>{
    console.log(value);
},(reason)=>{
    console.log(reason);
})

 

二、实例测试

1.做一个模拟多层次异步通信的实例测试，要异步多个内容，并按照指定顺序执行

2.先给出不进行Promise异步，看它执行的顺序

// 模拟异步1
setTimeout(()=>{
    console.log('1.返回异步通信');
},3500);

// 模拟异步2
setTimeout(()=>{
    console.log('2.返回异步通信');
},800);

// 模拟异步3
setTimeout(()=>{
    console.log('3.返回异步通信');
},1500);

 

ps:这里不管怎么调节，最终输出结果总是：2，3，1 。需求顺序要：1，2，3；

3.将上面模拟异步通信，通过Promise进行改装，再看看执行效果

let p1=new Promise((resolve,reject)=>{
    // 模拟异步1
        setTimeout(()=>{
           resolve('1.异步');
        },3500);
})

let p2=new Promise((resolve,reject)=>{
    // 模拟异步2
        setTimeout(()=>{
            resolve('2.异步');
        },800);
})

let p3=new Promise((resolve,reject)=>{
    // 模拟异步3
        setTimeout(()=>{
            resolve('3.异步');
        },1500);
})

p1.then(value=>{
    console.log(value);
    return p2;
}).then(value=>{
    console.log(value);
    return p3;
}).then(value=>{
    console.log(value);
});

 

返回结果为  ：1.异步 2.异步 3.异步