js 异步转同步
在项目中有些逻辑或者请求依赖另一个异步请求,大家常用的方法是回调函数。现在有个高大上的解决方案:await async 。
async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。并且await 只能出现在 async 函数中,否则会报错。
async作用:
当调用一个 async
函数时,会返回一个 Promise
对象。当这个 async
函数返回一个值时,Promise
的 resolve 方法会负责传递这个值;当 async
函数抛出异常时,Promise
的 reject 方法也会传递这个异常值。
async
函数中可能会有 await
表达式,这会使 async
函数暂停执行,等待 Promise
的结果出来,然后恢复async
函数的执行并返回解析值(resolved)。
await作用:
await 表达式会暂停当前 async function
的执行,等待 Promise 处理完成。若 Promise 正常处理(fulfilled),其回调的resolve函数参数作为 await 表达式的值,继续执行 async function
。
若 Promise 处理异常(rejected),await 表达式会把 Promise 的异常原因抛出。另外,如果 await 操作符后的表达式的值不是一个 Promise,则返回该值本身。
来个栗子:
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
} async function asyncCall() {
console.log('calling1');
var result = await resolveAfter2Seconds();
console.log(result);
console.log('calling2');
// expected output: 'calling1','resolved','calling2'
} asyncCall();
结合实际:
function getData() {
return axios.get('/url')
}
async function asyncCall() {
var {data} = await getData();
console.log(data)
}
asyncCall();
需要注意的:
function getData1() {
console.log(new Date())
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
function getData2() {
console.log(new Date())
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved2');
}, 2000);
});
}
async function asyncCall() {
var data1 = await getData1();
var data2 = await getData2();
console.log(data1)
console.log(data2)
}
asyncCall();
结果:
Mon Apr 29 2019 14:42:14 GMT+0800 (中国标准时间)
Mon Apr 29 2019 14:42:16 GMT+0800 (中国标准时间)
resolved
resolved2
可以看出 getData2 在 getData1执行完后才执行,如果getData2不依赖getData1的返回值,会造成时间的浪费。可以改成下面这样:
function getData1() {
console.log(new Date())
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
function getData2() {
console.log(new Date())
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved2');
}, 2000);
});
}
async function asyncCall() {
var data1 = getData1();
var data2 = getData2();
data1 = await data1
data2 = await data2
console.log(data1)
console.log(data2)
}
asyncCall();
结果:
Mon Apr 29 2019 14:51:52 GMT+0800 (中国标准时间)
Mon Apr 29 2019 14:51:52 GMT+0800 (中国标准时间)
resolved
resolved2
最新文章
- [Unreal]学习笔记001
- web前端学习部落22群 明白何谓Margin Collapse
- macos开发pgsql数据库
- 【干货】微信场景之H5页面制作免费工具大集合
- 关于对inputstream流的复制
- 11 个 Linux 上最佳的图形化 Git 客户端
- android手机连接PC无法正常安装驱动
- 【shell】read
- hdu 2818 Building Block(加权并查集)2009 Multi-University Training Contest 1
- MySQL安装配置,命令,异常纪要
- MySQL入门转载
- Hibernate @Embeddable注解
- jQuery 操作 input 之 checkbox
- 小蚂蚁搬家<;贪心>;
- jvm学习006 jvm内存结构分配
- 【BZOJ1857】传送带(三分)
- 【总结】关于YUV-RGB格式转换的一些个人理解
- 利用arcserver 自带tomcat实现上传shapefile、cad等文件,然后用soe解析。
- UIProgressView进度条
- 开启Laravel之旅的标准姿势
热门文章
- Docker 跨主机网络方案分析
- PAT1017:Queueing at Bank
- Python题库
- 如何离线安装python的whl库
- Markdown编辑器editor.md的使用---markdown上传图片
- app后端设计(2)--xmpp的使用(2014.01.14更新)
- windows server 2012 R2汉化 -- 玩转Microsoft Azure
- 关于Kafka配额的讨论(2)
- java分割字符串用法
- BZOJ_2962_序列操作_线段树