异步-promise、async、await
下面代码打印结果是?
setTimeout(()=>{
console.log(1)
})
new Promise((resolve,reject)=>{
console.log(2)
resolve()
})
.then(()=>{
console.log(3)
})
new Promise((resolve,reject)=>{
console.log(4)
resolve()
})
.then(()=>{
console.log(5)
})
setTimeout(()=>{
console.log(6)
})
console.log(7)
/*
2
4
7
3
5
1
6
*/
*解析这道题之前我们先了解几个知识点~~~~*
数据加载方案
- 同步加载
- 异步加载 : 事件 , 定时器 , ajax
js单线程语言
为什么是单线程语言?
dom操作
- 如果js是多线程语言,第一个线程执行把dom对象删除,另一个线程执行把dom对象添加
同步代码异步代码加载顺序 : event loop (事件循环)
- 先执行同步代码,异步任务挂起
setTimeout(function(){
console.log(1);
},0)
console.log(2);
//执行结果 : 2 , 1 -->先执行console,log(2) setTimeout异步挂起
宏任务和微任务
宏任务一般是:包括整体代码script,setTimeout,setInterval。
微任务:Promise,process.nextTick。
宏任务的异步 和微任务的异步同时都有 优先执行 微任务
了解了这些知识,我们回到第一题
1、首先:promise 的创建是同步的,then、catch是异步,所以先执行同步打印出2 4 7
2、异步的 1、3、5、6,进入事件队列。
3、setTimeout 为宏任务,promise为微任务,先执行微任务,所以3、5先被打印出来,1、6后被打印出来
promise 承诺 是一个对象
异步代码同步执行
1.三个状态 : pending (进行时) resolve (成功状态), reject(失败的状态).
2.使用时 需要实例化 new Promise()
3.Promise() 参数是一个回调函数
4.在回调函数中有两个参数
resolve reject
5.promise返回值为promise
6.promise的方法
- .then()
两个参数 都是回调函数
如果promise 执行resolve方法 执行为.then里面第一个回调
如果promise 执行reject方法 执行为.then里面第二个回调
- .catch()
当promise执行了reject方法的时候 执行的是.catch里面的回调
- .all()
- .race()
异步
js是单线程,防止被堵塞 node中将所有i/o变成异步
异步的过多嵌套会造成回调地狱
promise的链式调用可以解决回调地狱
async
- 可以修饰一个函数,被修饰的函数返回promise对象
- async 返回值可有也可以没有,返回的是返回的数据就是then 接收的数据,不返回数据相当于undefined
async function text(){
return true
}
text()
.then((data)=>{
console.log("ok")
})
.catch((err)=>{
console.log("err")
})
await
- 在async函数内部使用,将promise变成同步
- await关键字后面跟Promise对象
//求和操作
function num1(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(1)
},1000)
})
}
function num2(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(2)
},500)
})
}
async function sum(){
let res1=await num1()
let res2=await num2()
reyturn res1 + res2
}
sum()
.then((data)=>{
console.log(data)
})
- 使用async函数可以让代码简洁很多,不需要像Promise一样需要些then,不需要写匿名函数处理Promise的resolve值,也不需要定义多余的data变量,还避免了嵌套代码。
异步-promise、async、await的更多相关文章
- javascript异步编程 Async/await
Async/await Async/await 在学习他之前应当补充一定的 promise 知识 它是一种与 promise 相配合的特殊语法,目前被认为是异步编程的终级解决方案 值得我们每一个人学习 ...
- 异步编程Async/await关键字
异步编程Async \await 关键字在各编程语言中的发展(出现)纪实. 时间 语言版本 2012.08.15 C#5.0(VS2012) 2015.09.13 Python 3.5 2016.03 ...
- MVC+Spring.NET+NHibernate .NET SSH框架整合 C# 委托异步 和 async /await 两种实现的异步 如何消除点击按钮时周围出现的白线? Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法
MVC+Spring.NET+NHibernate .NET SSH框架整合 在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MV ...
- .net 异步函数 Async await
.net 异步函数 Async await 一旦为函数添加async关键字 该函数就是一个异步函数. 异步方法必须返回 void 或 Task<> 类型. public static ...
- vue使用技巧:Promise + async + await 解决组件间串行编程问题
业务场景描述 大家都通过互联网投递过简历,比如在智联.58.猎聘等平台.投递心仪的职位前一般都需要前提创建一份简历,简历编辑界面常规的布局最上面是用户的个人基本信息,如姓名.性别.年龄.名族等,接着是 ...
- 抓住异步编程async/await语法糖的牛鼻子: SynchronizationContext
长话短说,本文带大家抓住异步编程async/await语法糖的牛鼻子: SynchronizationContext 引言 C#异步编程语法糖async/await,使开发者很容易就能编写异步代码. ...
- 温故知新,CSharp遇见异步编程(Async/Await),聊聊异步编程最佳做法
什么是异步编程(Async/Await) Async/Await本质上是通过编译器实现的语法糖,它让我们能够轻松的写出简洁.易懂.易维护的异步代码. Async/Await是C# 5引入的关键字,用以 ...
- JavaScript异步编程——Async/Await vs Promise
兼容性 提醒一下各位,Node 现在从版本 7.6 开始就支持 async/await 了.而就在前几天,Node 8已经正式发布了,你可以放心地使用它. 如果你还没有试过它,这里有一堆带有示例的理由 ...
- js异步回调Async/Await与Promise区别 新学习使用Async/Await
Promise,我们了解到promise是ES6为解决异步回调而生,避免出现这种回调地狱,那么为何又需要Async/Await呢?你是不是和我一样对Async/Await感兴趣以及想知道如何使用,下面 ...
- angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )
Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库 在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...
随机推荐
- 2016年NOIP普及组复赛题解
题目涉及算法: 买铅笔:入门题: 回文日期:枚举: 海港:双指针: 魔法阵:数学推理. 买铅笔 题目链接:https://www.luogu.org/problem/P1909 设至少要买 \(num ...
- uni-app学习记录02-属性绑定.for循环
<template> <view class="content"> <text> 我是首页 </text> <!-- 输出纯字 ...
- [转]1.2 java web的发展历史
前言 了解java web的发展历史和相关技术的演进历程,非常有助于加深对java web技术的理解和认识. 阅读目录 1.Servlet的出现 2.Jsp的出现 3.倡导了MVC思想的Servlet ...
- [转]VsCode搭建Java开发环境(Spring Boot项目创建、运行、调试)
源码地址:https://github.com/YANGKANG01/Spring-Boot-Demo 安装扩展 安装如下两个主要扩展即可,这两个扩展已关联java项目开发主要使用的maven.spr ...
- webpack学习(一)项目中安装webpack
如何在项目中安装webpack,webpack-cli? 前提:电脑安装了 node和npm包管理工具 1 创建项目文件夹或者在已有的项目中打开终端 输入相关命令: npm init 因为已经安装好 ...
- P1106 细胞分裂
题目描述 Hanks博士是BT(Bio-Tech,生物技术)领域的知名专家.现在,他正在为一个细胞实验做准备工作:培养细胞样本. Hanks博士手里现在有 \(N\) 种细胞,编号从 \(1\) 到 ...
- BoundsChecker下载
首先,单独的BoundsChecker已经没了,被收购了,整合进了DevPartner 其次,DevPartner是收费软件,属于Borland的.官方地址:http://www.borland.co ...
- Callable Objects
We learned in 7.11 that there are "array-like" objects that are not true arrays but can be ...
- RocketMQ(消息重发、重复消费、事务、消息模式)
分布式开放消息系统(RocketMQ)的原理与实践 RocketMQ基础:https://github.com/apache/rocketmq/tree/rocketmq-all-4.5.1/docs ...
- linux 禁止所有中断
如果你需要禁止所有中断如何? 在 2.6 内核, 可能关闭在当前处理器上所有中断处理, 使用任一个下面 2 个函数(定义在 <asm/system.h>): void local_irq_ ...