异步-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 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...
随机推荐
- laravel博客后台操作步骤
- 【原生JS】滑动门效果
效果图: 思路:通过每次鼠标移动至目标上使所有图片重置为初始样式再向左移动目标及其左侧每个图片隐藏部分距离即实现. HTML: <!DOCTYPE html> <html> & ...
- PL/SQL语言的学习笔记
一.PL/SQL简介1.什么是PL/SQL程序?(PL/SQL是对SQL语言的一个扩展,从而形成的一个语言) 2.PL/SQL语言的特点(操作Orcale数据库效率最高的就是PL/SQL语言,而不是C ...
- JPA 一对多双向映射 结果对象相互迭代 造成堆栈溢出问题方法
问题: JPA 在双向映射时,会相互包含对方的实例,相互引用,造成递归迭代,堆栈溢出(java.lang.StackOverflowError). 分析: 在后端向前端传递的时候会将数据序列化,转为j ...
- phpstorm 有的单词下有下划线,怎么去掉?
settings -> Editor -> Colors & Fonts -> General ->Errors and Warnings然后你会看见下面的示例代码.点 ...
- Ralasafe配置手册
Ralasafe访问控制(权限管理)中间件的配置工作非常少.因为项目发起人非常讨厌配置.因此,"己所不欲,勿施于人",Ralasafe的配置也非常少. Ralasafe配置工作只有 ...
- 2019-8-2-WPF-从文件加载字体
title author date CreateTime categories WPF 从文件加载字体 lindexi 2019-08-02 17:10:33 +0800 2018-2-13 17:2 ...
- python类中的双下划线方法
__getitem__,__setitem__和__delitem__ 实现了对象属性的字典化操作. class Person: def __init__(self, name, age, hobby ...
- python进阶之异常处理
异常处理 在代码运行时,会因为各种原因出现bug,而程序遇到bug就会中断运行,而在日常生产中程序是要长时间运行不能随意中断的.因此就需要我们提前做好异常处理. 异常 print(x) # 一般报错就 ...
- 【a602】最大乘积
Time Limit: 1 second Memory Limit: 32 MB [问题描述] 一个正整数一般可以分为几个互不相同的自然数的,如3=1+2,4=1+3,5=1+4=2+3,6=1+5= ...