ECMA Script 6_异步编程之 Promise

时间 2019-11-08

标签 ecma script 异步编程 promise 繁體版

原文原文链接

Promise 对象编程

异步编程方案，已同步的方式表达异步的代码，解决回调地狱的问题数组

比传统的解决方案——回调函数和事件——更合理和更强大promise

是一个容器，里面保存着某个将来才会结束的事件（一般是一个异步操做）的结果。异步

从语法上说，Promise 是一个对象，从它能够获取异步操做的消息。异步编程

Promise 提供统一的 API，各类异步操做均可以用一样的方法进行处理函数

基本使用

const promise = new Promise(function(resolve, reject) {
    // ... some code

    if (/* 异步操做成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});

promise
    .then(
        ()=>{
            console.log('成功的回调');
        },
        ()=>{
            console.log('失败的回调');
        },
    );
console.log('主线程执行完了');




/**** 等同于 ****/ const promise = new Promise((resolve, reject)=>{ /* resolve 解决 成功 将 Promise 对象的状态 由初始化变成成功 reject 拒绝 失败 将 Promise 对象的状态 由初始化变成失败 Promise 三种状态 初始化状态 成功状态 失败状态 */ setTimeout(function(){
 const result = 202; console.log('请求成功了'); resolve(result); // 触发成功的回调
    }, 1000); }); promise.then(result=>{ console.log('成功的回调'+result); }).catch((result)=>{ console.log('失败的回调'+result); }); console.log('主线程执行完了');

Promise.resolve() 和 Promise.reject() 建立对象，状态为成功和失败
Promise.all([要检测的对象数组]); // 在全部的 promise 都触发 resolve 回调，才会成功。
成功时接收 resolve ，失败只接收 reject。结果为数组
实例

/**** 简单 独立异步任务 ****/
    const a = new Promise((resolve, reject)=>{
        setTimeout(function(){
            resolve("成功！");
        }, 1000);
    });
    
    const aa = new Promise((resolve, reject)=>{
        setTimeout(function(){
            resolve("成功！");
        }, 2000);
    });
    
    const aaa = new Promise((resolve, reject)=>{
        setTimeout(function(){
            resolve("成功！");
        }, 3000);
    });
    
    Promise.all([a, aa, aaa]).then(result=>{
        console.log(result);    // 接收到数组是 每一个 Promise 发送过来的结果
    }).catch(result=>{
        console.log(result);
    });
    
    console.log('主线程执行完了！');
    
/**** 复杂 分线程关联任务 ****/
    const b = new Promise((resolve, reject)=>{
        setTimeout(function(){
            console.log("Done1"+"First");
            resolve("Done1"+"First");
        }, 1000);
    });
    
    b.then(result=>{
        return  new Promise((resolve, reject)=>{
                    setTimeout(function(){
                        console.log("Done2"+result);
                        resolve("Done2"+result);
                    }, 2000);
                });
    }).catch()
     .then(result=>{
        return  new Promise((resolve, reject)=>{
                    setTimeout(function(){
                        console.log("Done3"+result);
                        resolve("Done3"+result);
                    }, 3000);
                });
    }).catch()
     .then(result=>{
        console.log("All Done!"+result);
    }).catch()
    
    console.log('主线程执行完了！');