异步-promise、async、await
2024-09-06 14:57:28
下面代码打印结果是？
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变量，还避免了嵌套代码。
最新文章
- 个人项目制作（PSP）
- 关于HTML5你必须知道的28个新特性,新技巧以及新技术
- 2017 New Year’s Greetings from Sun Yat-sen University
- 多次drawRect，显示重叠，需要设置背景颜色
- js undefine,null 和NaN
- 使用text存储hash类型的数据 Use text filed to store the hash map
- python 基础理解...
- Nim教程【四】
- java浮点类型计算
- 斐波那契数列 Php练手
- socket.io 入门篇（二）
- Regasm
- Swift3.0 自定义tableView复用cell 的写法，与CollectionViewCell的不同,数据model
- kubernetes1.9中部署dashboard
- 有关Java 锁原理
- Maven的特点、优点-功能摘要
- HTML5 defer和async的区别
- python3 装饰器应用举例
- Tomcat服务器端口的配置
- Markdown入门简介