Promise async await 总结

Promise

new Promise((resolve, reject) => {
    var param = 'Promise 执行完后返回的数据';
    var error = 'Promise 异步执行异常';
    if( error ) {
        reject(new Error('Promise 异步执行异常'));
    } else {
        resolve(param);
    }
}).then((res) => {
//  这里res就是Promise中的param参数
    console.log(res);  //  Promise 执行完后返回的数据
    var param = '第一个then 执行完后返回的数据';
    return param;
}).then((res) => {
//  这里的res就不是Promise中resolve的param参数了,而是上一个then中的返回值
    console.log(res);  //  第一个then 执行完后返回的数据
}).catch((error) => {
//  这里是Promise执行reject方法中的参数
    console.log(error); //  Promise 异步执行异常
});

第一个then()触发条件:是 Promise() 实例化时resolve()触发,resolve(param)

第二个及以后的then() 触发条件是第一个then()执行完成,并且将return值作为下一个then的参数。

catch()触发条件是执行了reject()
需要注意的是resolvereject只能执行一个。也就是说如果不加入判断的话,某一个先执行了,后面的就自动忽略了。


async & await

由于刚开始接触这方面的内容,仅做最简单的描述,可能存在很多误区,以后慢慢更正。

前端经常要和异步打交道,过去都是通过回调函数来处理异步数据。

var res = 0;

setTimeout(function () {
    res = 10;
}, 1000);

console.log(res);

上面是一个很典型的异步方法,其实这段代码我们想要的结果是 10;
但是由于异步的原因,导致结果还没有变更,我们已经把原始数据打印出来了。
那么,我们过去可能会通过回调的办法来解决这个问题。
把执行打印的代码放到回调函数中,在回调中处理数据。

var res = 0;

setTimeout(function () {
    res = 10;
    console.log(res);
}, 1000);

虽然这样不失为解决问题的办法,但是实际业务中各个异步返回的数据中可能互相之间有利用关系,那么各种嵌套回调的问题也就随之而来了。

var res1 = 0, res2 = 0, res3 = 0;

setTimeout(function () {
    res1 = 10;
    setTimeout(function () {
        res2 = 20;
        setTimeout(function () {
            res3 = 30;
            console.log(res1 + res2 + res3);
        }, 1000);
    }, 1000);
}, 1000);

像上面这样的情况在实际业务中很常见。
我们有3个数据接口,最终我们要将3个接口返回的数据合并,就只能一层一层的嵌套下去。
那么如果有5个、10个这样的接口呢?我想从代码的阅读方面就是个灾难吧。
当然我们可以把请求改为同步的,但是!同步就意味着阻塞。这里不做讨论。
终于到asyncawait 上场了......

;(async ()=> {
    var res1 = await new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(10);
        }, 1000);
    });
    var res2 = await new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve(20);
        }, 1000);
    });
    var res3 = await new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve(30);
        }, 1000);
    });
    console.log(res1 + res2 + res3);
})();

同样的结果,但是我们的代码仿佛变成的同步模式一样。再也没有无限嵌套了!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • title: promise总结 总结在前 前言 下文类似 Promise#then、Promise#resolv...
    JyLie阅读 12,309评论 1 21
  • 本文适用的读者 本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,...
    HZ充电大喵阅读 7,340评论 6 19
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,730评论 1 56
  • 一、Promise的含义 Promise在JavaScript语言中早有实现,ES6将其写进了语言标准,统一了用法...
    Alex灌汤猫阅读 841评论 0 2
  • 简单介绍下这几个的关系为方便起见 用以下代码为例简单介绍下这几个东西的关系, async 在函数声明前使用asyn...
    _我和你一样阅读 21,282评论 1 24