Promise:

Promise为了解决异步回调地狱而生的,其解决方法就是链式调用promise.then()或promise.all();

Promise有两个参数,resolve和reject,第一个代表正确的返回处理,第二个代表异常的返回处理!

                        function promise1(){
let num = 0;
return new Promise((resolve,reject)=>{
setTimeout(()=>{
num++;
resolve(num);
},3000);
});
} promise1().then((num)=>{
console.log(num);
});

  3秒后输出结果是1。

then方法里有两个参数,第一个是resolve,第二个是reject,resolve可以返回一个promise,也可以直接返回一个data,直接返回的data会作为接下来的then里的resolve的形参传递。

            function promise1(){
let num = 0;
return new Promise((resolve,reject)=>{
setTimeout(()=>{
num++;
resolve(num);
},3000);
});
} function promise2(num){
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
num+=3;
resolve(num);
},3000);
});
return p;
} function promise3(num){
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
num *= num;
resolve(num);
},3000);
});
return p;
} promise1().then((num)=>{
console.log(num);
return promise2(num);
}).then((num)=>{
console.log(num);
return promise3(num);
}).then((num)=>{
console.log(num);
return 3;
}).then((num)=>{
console.log(num);
}).then((num)=>{
console.log(num);
});

输出结果

第4个then直接返回第三个then返回的数字3,而最后一个num形参没有传递任何数据,故是undefined。

Promise的all方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调,注意这个类似是静态方法,直接通过Promise.all关键词调用

Promise.all([promise1(),promise2(2),promise3(6)]).then((result)=>{
console.log(result);
});

结果:

用Promise.all来执行,all接收一个数组参数,里面的值最终都返回Promise对象。这样,三个异步操作的并行执行的,等到它们都执行完后才会进到then里面。那么,三个异步操作返回的数据哪里去了呢?都在then里面呢,all会把所有异步操作的结果放进一个数组中传给then,就是上面的results

还有个race方法,all方法的效果实际上是「谁跑的慢,以谁为准执行回调」,那么相对的就有另一个方法「谁跑的快,以谁为准执行回调」,这就是race方法,这个词本来就是赛跑的意思。

promise的这种链式调用可以很好的解决回调地狱的问题!

async、await

这两个玩意解决异步回调简直是完美!

async只能放到函数前面,await只能出现在标有async的函数里,意思就是等待!async函数和正常的function一样使用,如果内部有await 那么可以抛出错误处理

async function timeout(){
let cc = await func();
}
timeout().catch(error){
console.log(error);
}

await可以使当前代码暂停执行,等到await 后的代码处理完后再继续向下执行,await后的方法返回的是Promise对象,也可以是自己定义的含有then方法的对象

function promiseAwt(num){
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
let cnt = 0;
while(num > 0){
cnt += num;
num--;
}
resolve(cnt);
},num);
});
return p;
} async function timeout(){
let cc = await promiseAwt(3000);
console.log('道德经');
let dd = await promiseAwt(1000);
console.log("天之道");
let ee = await promiseAwt(2000);
console.log(`cc:${cc}\ndd:${dd}\nee:${ee}`);
} timeout();
console.log("我先执行");

输出结果

如果现场试验你会发现,先输出 “我先执行” 等待3秒输出“道德经”,再等待1秒输出‘天之道’,再等待2秒输出累加的和 cc、dd、ee,程序在执行await的时候等待了!

await 最后得到的值就是promise的resolve传递过来的参数!

下面是综合测试:

function promise1(){
let num = 0;
return new Promise((resolve,reject)=>{
setTimeout(()=>{
num++;
resolve(num);
},3000);
});
} function promise2(num){
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
num+=3;
resolve(num);
},3000);
});
return p;
} function promise3(num){
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
num *= num;
resolve(num);
},3000);
});
return p;
} Promise.all([promise1(),promise2(2),promise3(6)]).then((result)=>{
console.log(result);
}); function promiseAwt(num){
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
let cnt = 0;
while(num > 0){
cnt += num;
num--;
}
resolve(cnt);
},num);
});
return p;
} async function timeout(){
let cc = await promiseAwt(3000);
console.log('道德经');
let dd = await promiseAwt(1000);
console.log("天之道");
let ee = await promiseAwt(2000);
console.log(`cc:${cc}\ndd:${dd}\nee:${ee}`); promise1().then((num)=>{
console.log("sssss:"+num);
return promise2(num);
}).then((num)=>{
console.log("nnnn:"+num);
return promise3(num);
}).then((num)=>{
console.log("hello world----"+num);
});
} timeout();
console.log("我先执行");

输出结果

promise,await,async小论的更多相关文章

  1. yield 异步 并行 Promise await async

    yield方式转移执行权的协程之间不是调用者与被调用者的关系,而是彼此对称.平等的 http://www.geeksforgeeks.org/use-yield-keyword-instead-ret ...

  2. 【ES6】 Promise / await / async的使用

    为什么需要在项目中引入promise? 项目起因:我们在页面中经常需要多次调用接口,而且接口必须是按顺序串联调用 (即A接口调用完毕,返回数据后,再调用B接口) 这样就会造成多次回调,代码长得丑,而且 ...

  3. node.js异步控制流程 回调,事件,promise和async/await

    写这个问题是因为最近看到一些初学者用回调用的不亦乐乎,最后代码左调来又调去很不直观. 首先上结论:推荐使用async/await或者co/yield,其次是promise,再次是事件,回调不要使用. ...

  4. promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解

    * promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的 ...

  5. 重构:从Promise到Async/Await

    摘要: 夸张点说,技术的发展与历史一样,顺之者昌,逆之者亡.JS开发者们,赶紧拥抱Async/Await吧! GitHub仓库: Fundebug/promise-asyncawait 早在半年多之前 ...

  6. Promise, Generator, async/await的渐进理解

    作为前端开发者的伙伴们,肯定对Promise,Generator,async/await非常熟悉不过了.Promise绝对是烂记于心,而async/await却让使大伙们感觉到爽(原来异步可以这么简单 ...

  7. 异步操作之 Promise 和 Async await 用法进阶

    ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖都可以更好解决多层回调问题, 详细用法可参考:https://www.cnblogs.com/cckui/p/99 ...

  8. Promise及Async/Await

      一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...

  9. callback vs async.js vs promise vs async / await

    需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = functio ...

  10. 详解promise、async和await的执行顺序

    1.题目和答案 一道题题目:下面这段promise.async和await代码,请问控制台打印的顺序? async function async1(){ console.log('async1 sta ...

随机推荐

  1. PTA(Basic Level)1026.程序运行时间

    要获得一个 C 语言程序的运行时间,常用的方法是调用头文件 time.h,其中提供了 clock() 函数,可以捕捉从程序开始运行到 clock() 被调用时所耗费的时间.这个时间单位是 clock ...

  2. 面向服务架构之RPC原理与实例

    1.RPC概述 RPC(Remote Procedure Call)即远程过程调用,允许一台计算机调用另一台计算机上的程序得到结果,而代码中不需要做额外的编程,就像在本地调用一样.主要是为了应对当前互 ...

  3. LOJ526「LibreOJ β Round #4」子集

    题目 算是比较裸的题吧. 首先我们把符合要求的\((i,j)\)建一条边,那么我们要求的就是最大团. 转化为补图的最小独立集. 然后我们来证明补图是一个二分图. \((u,v)\)有边\(\Leftr ...

  4. P3376 网络流-最大流模板题(Dinic+当前弧优化)

    (点击此处查看原题) Dinic算法 Dinic算法相对于EK算法,主要区别在于Dinic算法对图实现了分层,使得我们可以用一次bfs,一次dfs使得多条增广路得到增广 普通的Dinic算法已经可以处 ...

  5. 2018.07.17【省赛模拟】模拟B组 比赛总结

    题目 [GDKOI2003]最大公共子串 [题目描述] 从一个给定的串中删去(不一定连续地删去)0个或0个以上的字符,剩下的字符按原来的顺序组成的串是该串的字串.例如:"", &q ...

  6. python 运算和流程控制

    写在之前 今天突发奇想,想要弄一个微信自动抢红包的程序,首先去百度这个,找到了有两种方法 一种是安装「pocoui」这个第三方库,但没有给出详细代,我就没有使用这个方法. 我用使用的是第二种借助「Ai ...

  7. Codeforces 1190B. Tokitsukaze, CSL and Stone Game

    传送门 不妨把每一堆按照石头数量从小到大排序 注意到每次只能拿一个石头,那么不论何时每堆石头的排名都是一样的 那么最终所有堆的状态一定就是 $0,1,2,...,n-1$,现在每一堆最终的石头数量都确 ...

  8. FastDFS集群部署(转载 写的比较好)

    FastDFS集群部署   之前介绍过关于FastDFS单机部署,详见博文:FastDFS+Nginx(单点部署)事例 下面来玩下FastDFS集群部署,实现高可用(HA) 服务器规划: 跟踪服务器1 ...

  9. Js 将图片的绝对路径转换为base64编码(3)

    图片文件改变一方法:$('#file').change(function(){var oFReader = new FileReader();oFReader.readAsDataURL(this.f ...

  10. linux 软件安装目录详解

    我一般会在/opt目录下创建 一个software目录,用来存放我们从官网下载的软件格式是.tar.gz文件,或者通过 wget+地址下载的.tar.gz文件 执行解压缩命令,这里以nginx举例 t ...