async异步函数
async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例, 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。
Async函数是generator函数的语法糖,在generator函数的基础上添加了一些更加方便用户操作的新特性。Async函数的执行和普通函数一致,只需要一行代码即可,因为他具有内置的执行。async与await对比*与yield有更好的语义。
await关键字只在async函数内有效。如果你在async函数体之外使用它,就会抛出语法错误 SyntaxError 。async/await的目的为了简化使用基于promise的API时所需的语法。async/await的行为就好像搭配使用了生成器和promise。async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise,那么它将会被隐式地包装在一个promise中。
例如,如下代码:
//async函数返回一个 Promise 对象。 async function foo() { return 1 }
等价于:
function foo() { return Promise.resolve(1) }
异步函数示例:
async function foo() { const result1 = await new Promise((resolve) => setTimeout(() => resolve('1'))) const result2 = await new Promise((resolve) => setTimeout(() => resolve('2'))) } foo();
项目中常用:
async function foo(){ return await $.get("http://47.106.244.1:8099/manager/category/findAllCategory"); } let f = foo(); // f就是获取到的后台接口的数据
面试题:异步操作为什么要进行同步化?
我们希望程序异步执行,就是为了 “跳过” 阻塞,较少时间花销,或者避免回调地狱。关于异步方案,
ES6
使用了 基于状态管理的Promise
。但与之相反的是,如果需要一系列的异步 “串行”,我们应该怎样很好的进行编程?如果说
Promise
主要解决的是异步回调问题,那么async + await
主要解决的就是将异步问题同步化,降低异步编程的认知负担。当需要保证信息/消息的顺序性时,就需要异步操作进行同步化,例如多个ajax的请求需要按照队列返回再依次处理,保证客户端的请求与响应顺序。
async function getTitle(url) { let response = await fetch(url); let html = await response.text(); return html.match(/<title>([\s\S]+)<\/title>/i)[1]; } getTitle('https://tc39.github.io/ecma262/').then(console.log) // "ECMAScript 2017 Language Specification"
上面代码中,函数
getTitle
内部有三个操作:抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成,才会执行then
方法里面的console.log
。面试题:如果不存在继发关系的异步操作,如何让他们同时出发?
let foo = await getFoo(); let bar = await getBar();
上面代码中,
getFoo
和getBar
是两个独立的异步操作(即互不依赖),被写成继发关系。这样比较耗时,因为只有getFoo
完成以后,才会执行getBar
,完全可以让它们同时触发。// 写法一 let [foo, bar] = await Promise.all([getFoo(), getBar()]); // 写法二 let fooPromise = getFoo(); let barPromise = getBar(); let foo = await fooPromise; let bar = await barPromise;
上面两种写法,
getFoo
和getBar
都是同时触发,这样就会缩短程序的执行时间。
ES6:async异步函数
最新推荐文章于 2024-08-16 11:35:39 发布