程序猿头头(async与await的原理)

async与await的原理

async与await的原理
异步函数，也称为async/await（语法关键字），是ES8规范新增的。这个特性从行为和语法上都增强了JavaScript，能够以同步的方式执行异步代码。最明显就是解决了“回调地狱”的问题。

let data = await new Promise((res, rej) => {$.ajax({url: 'getUserById',data: {id: 1},success(data) {res(data);}});
});
data = await new Promise((res, rej) => {$.ajax({url: 'getRightsByRoleId',data: {id: data.id},success(data) {res(data);}});
});
data = await new Promise((res, rej) => {$.ajax({url: 'getPagesByRrights',data: {rights: data.rights},success() {console.log('终于获取完了');}});
});

async关键字用于声明异步函数。这个关键字可以用在函数声明、函数表达式、箭头函数和方法上。

async function foo() {}
let bar = async function() {};
let baz = async () => {};
class Qux {async qux() {}
}

await因为异步函数主要针对不会马上完成的任务，所以自然需要一种暂停和恢复执行的能力。使用await关键字可以暂停异步函数代码的执行，等待Promise执行完成。

let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3));
p.then(console.log); //只是通过回调通知接收了结果，并不知道何时调用完成，所以后续的操作要放在回调函数中
console.log(await p); //使用await就得等待Promise执行完成才能进行下一步
console.log('上一次的Promise完成了，可以继续接下来的事了');

函数里出现await则必须有async。

async function foo() {await Promise.resolve(); //合法
}function foo() {await Promise.resolve(); //非法
}

下面我们用一段代码来给大家更加直观的理解
async函数会返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的代码。

 function getNum(num) {return new Promise((resolve, reject) => {setTimeout(() => {resolve(num + 1)}, 1000)})}debuggerconst func = async () => {const f1 = await getNum(1)const f2 = await getNum(f1)// 输出3 }func()

就拿上面的代码来说，回调函数中没有赋值，就不会执行，继续向下查找，在f1中找到getNum，但是f1中有await，就会先返回，执行上面的代码，此时的f1已经num+1，就会重新赋值为2，一步操作完成，继续执行后面的代码，在f2中再次找到getNum赋值为f1，也就是赋值为2，遇见await就会继续返回，num再次+1，也加是3，打印出来也就是3了。

程序猿头头(async与await的原理)相关推荐

微信小程序如何使用async和await
微信小程序如何使用async和await 首先微信小程序不支持ES7的语法,在新版的小程序开发工具中你需要勾选增强编译选项才可以使用. 我想到的是直接在方法前面加一个async,然后await接受参数 ...
掌握JavaScript中的迭代器和生成器，顺便了解一下async、await的原理
掌握JavaScript中的迭代器和生成器,顺便了解一下async.await的原理目录掌握JavaScript中的迭代器和生成器,顺便了解一下async.await的原理前言 1.迭代器(It ...
面试官问 async、await 函数原理是在问什么？
大家好,我是若川.这是源码共读活动<1个月,200+人,一起读了4周源码> 第四期,纪年小姐姐的第四次投稿.纪年小姐姐通过本次学习提早接触到generator,协程概念,了解了async ...
程序猿爱上了经济学《经济学原理》
在大段经济学内容之前,先举出几个很有意思的现象.观点和问题: 1.安全带减少了每次车祸的死亡人数,但却增加了车祸的次数.净结果是司机死亡人数变动很小,而行人死亡人数增加了. 2.设想你对看一场 ...
nodejs全局变量第一次没赋值要第二次才有是为什么_【NodeJS】async 和 await 的本质...
对于许多新接触 NodeJS 的人而言,async 和 await 的原理是比较难理解的.本文将从零"构建"出 async 和 await 关键字,从而帮助理清 async 和 a ...
异步编程初探：async和await
前言:前面有篇从应用层面上面介绍了下多线程的几种用法,有博友就说到了async, await等新语法.确实,没有异步的多线程是单调的.乏味的,async和await是出现在C#5.0之后,它的出现给了 ...
Async和Await异步编程的原理
1. 简介从4.0版本开始.NET引入并行编程库,用户能够通过这个库快捷的开发并行计算和并行任务处理的程序.在4.5版本中.NET又引入了Async和Await两个新的关键字,在语言层面对并行编程给 ...
小程序高级电商前端第2周深入理解REST API开发规范开启三端分离编程之旅＜二＞----scroll-view组件的灵活应用、async和await问题探讨、spu-scroll自定义组件
前言: 转眼距离上一次写博文又过去一个月了,今年的博文节奏已经彻底被打破了: 真的是有心无力了,其原因在之前也提到过,组织架构调整,各种考核(跨领域性质的考核)实行末尾淘汰制,说不出的酸楚,不过换个心 ...
promise 、async/await 的原理及实现
前言事件循环机制由于 javascript 引擎是采用单线程运行机制,执行耗时过大的操作时会造成页面的阻塞,为了解决页面的阻塞问题,js 将任务分为同步任务.异步任务,随之而来的是异步带来的执行 ...
promise原理与async 及 await
promise原理与async 及 await 1.1 Promise是一个构造函数 1.2 Promise优缺点 1.3 async 及 await 1.4 相较于 Promise,async/aw ...

程序猿头头(async与await的原理)

async与await的原理

程序猿头头(async与await的原理)相关推荐

最新文章

热门文章