async function

最新推荐文章于 2024-04-01 17:42:02 发布
最新推荐文章于 2024-04-01 17:42:02 发布
阅读量1.6w 收藏 28
点赞数 4
分类专栏： JavaScript 文章标签： async function
原文链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
版权

这篇文章多看几遍加深理解

async function 声明定义了一个异步函数，它返回一个AsyncFunction对象。异步函数 是指通过 事件循环（event loop） 异步执行的函数，通过返回一个隐式的 Promise 作为其结果。使用异步函数的代码的语法和结构更像使用标准同步功能。（The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. But the syntax and structure of your code using async functions is much more like using standard synchronous functions.
）

语法

async function name([param[, param[, ... param]]]) { statements }

参数：

  • name：函数名称
  • param：要传递给函数的参数。
  • statements：函数体语句。

返回值：返回一个promise对象，将返回异步函数返回的值（如果异步函数是resolved则返回resolved的值；如果抛出异常，则rejected从异步函数中抛出的异常）。（A Promise which will be resolved with the value returned by the async function, or rejected with an uncaught exception thrown from within the async function.）

异步函数可以包含await表达式，该表达式暂停异步函数的执行 并等待 Promise的执行结果返回，结果返回后就恢复异步函数的执行。

await 关键字只在异步函数（async functions）内有效。如果在异步函数外使用它，会抛出语法错误。
当异步函数暂停时，它调用的函数仍会继续执行。

举例一：

function resolveAfter5Seconds() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('resolved');
        }, 5000);
    });
}

async function asyncCall() {
    console.log('calling');
    let result = await resolveAfter5Seconds();
    console.log(result); // 5s之后输出结果
}

asyncCall(); //返回的是一个promise对象
// console.log(asyncCall()); // Promise { <pending> }

运行效果：
在这里插入图片描述
举例二：

let resolveAfter6Second = function () {
    console.log('start slow promise');

    return new Promise(resolve => {
        setTimeout(() => {
            resolve('slow');
            console.log('slow promise is done');
        }, 6000);
    })
}

let resolveAfter4Second = function () {
    console.log('start fast promise');

    return new Promise(resolve => {
        setTimeout(() => {
            resolve('fast');
            console.log('fast promise is done');
        }, 4000);
    })
}

let sequentialStart = async function () {
    console.log('sequential start');
    const slow = await resolveAfter6Second();
    console.log(slow);
    const fast = await resolveAfter4Second();
    console.log(fast);
}

sequentialStart()
//立即输出
// sequential start
// start slow promise
//再过6秒后输出
// slow promise is done
// slow
// start fast promise
//再过4秒后输出
// fast promise is done
// fast

运行效果：
在这里插入图片描述
换一种await的写法，结果完全不同：两个计时器被同时创建

let resolveAfter6Seconds = function () {
    console.log('start slow promise');
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('slow');
            console.log('slow promise is done');
        }, 6000);
    })
}

let resolveAfter4Seconds = function () {
    console.log('start fast promise');
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('fast');
            console.log('fast promise is done');
        }, 4000);
    })
}

let concurrentStart = async function () {
    console.log('concurrent start');
    let slow = resolveAfter6Seconds();
    let fast = resolveAfter4Seconds();
    console.log(await slow);
    console.log(await fast);
}

setTimeout(() => {
    concurrentStart();
}, 2000);

//2秒后执行
// concurrent start
// start slow promise
// start fast promise
//再过4秒后执行
// fast promise is done
//再过2秒后执行
// slow promise is done
// slow
// fast

运行效果：
在这里插入图片描述
在 concurrentStart 中，两个计时器被同时创建，接着执行await。等待的是 promise的resolve回调，resolve后面的代码（ console.log(‘fast promise is done’);）会继续执行。
这两个计时器同时运行。但是 await 仍旧是顺序执行的，第二个 await 还是得等待第一个执行完。在这个例子中，这使得先运行结束的输出出现在最慢的输出之后。
也可以把 concurrentStart 改写成如下，运行效果一样：

let resolveAfter6Seconds = function () {
    console.log('start slow promise');
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('slow');
            console.log('slow promise is done');
        }, 6000);
    })
}

let resolveAfter4Seconds = function () {
    console.log('start fast promise');
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('fast');
            console.log('fast promise is done');
        }, 4000);
    })
}

let concurrentPromise = async function () {
    console.log('concurrent start');
    return Promise.all([resolveAfter6Seconds(), resolveAfter4Seconds()]).then((messages) => {
        console.log(messages[0]); // slow
        console.log(messages[1]); // fast
    });
}

setTimeout(() => {
    concurrentPromise();
}, 2000);
//2秒后输出
// concurrent start
// start slow promise
// start fast promise
//再过6秒后输出
// fast promise is done
//再过2秒后输出
// slow promise is done
// slow
// fast

并行执行两个或更多的任务，如下例所示：

let resolveAfter6Seconds = function () {
    console.log('start slow promise');

    return new Promise(resolve => {
        setTimeout(() => {
            resolve('slow');
            console.log('slow promise is done');
        }, 6000);
    })
}

let resolveAfter4Seconds = function () {
    console.log('start fast promise');
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('fast');
            console.log('fast promise is done');
        }, 4000);
    })
}

let parallel = async function () {
    console.log('start paralel');
    
    await Promise.all([
        (async () => console.log(await resolveAfter6Seconds()))(),
        (async () => console.log(await resolveAfter4Seconds()))()
    ]);
}

setTimeout(parallel, 2000);
//2秒后输出
// start paralel
// start slow promise
// start fast promise
//再过4秒后输出
// fast promise is done
// fast
//再过2秒后输出
// slow promise is done
// slow

运行效果：
在这里插入图片描述
如果希望并行执行两个或更多的任务，你必须像在parallel中一样使用await Promise.all([job1(), job2()])

也可以把parallel改写成如下，运行效果一样：

let resolveAfter6Seconds = function(){
    console.log('start slow promise');
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('slow');
            console.log('slow promise is done');
        }, 6000);
    });
}

let resolveAfter4Seconds = function(){
    console.log('start fast promise');
    return new Promise(resolve =>{
        setTimeout(() => {
            resolve('fast');
            console.log('fast promise is done');
        }, 4000);
    })
}

let parallelPromise = function(){
    console.log('parallelPromise start');
    resolveAfter6Seconds().then(msg => console.log(msg));
    resolveAfter4Seconds().then(msg => console.log(msg));
}

setTimeout(() => {
    parallelPromise();
}, 2000);
//2秒后输出
// parallelPromise start
// start slow promise
// start fast promise
//再过4秒后输出
// fast promise is done
// fast
//再过2秒后输出
// slow promise is done
// slow

async/await和Promise#then对比以及错误处理：
大多数异步函数（async functions ）也可以使用 Promises函数 编写。然而，当涉及到错误处理时，异步函数不太容易出错。
上面例子中的concurrentStart函数和concurrentPromise函数在功能上都是等效的。在concurrentStart函数中，如果任一awaited调用失败，它将自动捕获异常，异步函数执行中断，并通过隐式返回Promise将错误传递给调用者。
在Promise例子中这种情况同样会发生，函数必须负责返回一个捕获函数完成的Promise。在concurrentPromise函数中，这意味着它从Promise.all([]).then()中返回一个Promise。事实上，在此示例的先前版本忘记了这样做！
但是，async函数仍有可能然可能错误地忽略错误。
以parallel异步函数为例。 如果它没有等待await（或 return）Promise.all([])调用的结果，则不会传播任何错误。
虽然parallelPromise函数示例看起来很简单，但它根本不会处理错误！ 这样做需要一个类似于return Promise.all([])处理方式。（详见）

使用async函数重写 promise 链

返回 Promise的 API 将会产生一个 promise 链，它将函数分解成许多部分。例如下面的代码：

function getProcessedData(url) {
    return downloadData(url)// returns a promise
        .catch(e => {
            return downloadFallbackData(url);// returns a promise
        })
        .then(v => {
            return processDataInWorker(v);// returns a promise
        })
}

可以重写为单个async函数：

async function getProcessedData(url) {
    let v;
    try {
        v = await downloadData(url);
    } catch (e) {
        v = await downloadFallbackData();
    }
    return processDataInWorker(v);
}

在上述示例中，return 语句中没有 await 操作符，因为 async function 的返回值将被隐式地传递给 Promise.resolve。

return await promiseValue; 与 return promiseValue;的比较

返回值隐式的传递给Promise.resolve，并不意味着return await promiseValue;，只是在功能上等同于返回return promiseValue;。
重写的上面代码，在processDataInWorker抛出异常时返回null：

async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url);
  } catch(e) {
    v = await downloadFallbackData(url);
  }
  try {
    return await processDataInWorker(v); // 注意 `return await` 和单独 `return` 的比较
  } catch (e) {
    return null;
  }
}

简单地写上return processDataInworker(v);将导致在processDataInWorker(v)出错时function返回值为Promise而不是返回null。

return foo;和return await foo;有一些细微的差异：
return foo;不管foo是promise还是rejects都将会直接返回foo。相反地，如果foo是一个Promise，return await foo;将等待foo执行(resolve)或拒绝(reject)，如果是拒绝，将会在返回前抛出异常。

背太阳的牧羊人
关注
  • 4
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
在 Node.js 中使用 async 函数的方法
10-18
利用 async 函数，你可以把基于 Promise 的异步代码写得就像同步代码一样。一旦你使用 async 关键字来定义了一个函数，那你就可以在这个函数内使用 await 关键字。下面通过本文给大家分享Node.js 中使用 async 函数...
Async Function: 异步编程的新时代
男神的专栏
12-29 1411
Async Function是一种强大的异步编程工具，它通过让异步操作看起来像同步操作从而解决了JavaScript世界中的异步盲区。Async Function相较于其他的异步处理方式，更加优雅简洁、易于错误处理，并且更好的语义化，使用场景也很广泛。同时，我们也需要注意它的一些限制，这样才能更好地使用它来解决异步问题。
【JavaScript】async function和await的介绍和使用
最新发布
qq_2511276124的博客
04-01 1645
async/await是现在常用的一套处理异步函数的方式，更确切的是它们是用来处理Promise的方式。 **async/await 的目的在于简化使用基于 promise 的 API 时所需的语法。**
async function_async的理解
weixin_39566773的博客
12-01 644
前言重温了阮老师写的的async这一章，对文中用generator去实现async, await很感兴趣，所以想用此文梳理下自己的理解。刚开始看到这个实现的时候也是没有什么耐心，因为头一眼看上去并不直观，其中掺杂了各种API，比如Promise，Generator。细心的一步一步调试之后，觉得逻辑还是很清楚的。好，废话不多说，接下来就一步步拆解这个实现。预备因为要用generator去实现asyn...
你不知道的并发/继发请求操作
liusixsixsix的博客
12-08 334
你需要知道的知识 async是 Generator 函数的语法糖，总是返回一个promise。 async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。 正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。 继发请求 使用 for循
async 函数的含义和用法
笔记
09-04 502
异步操作是 JavaScript 编程的麻烦事，麻烦到一直有人提出各种各样的方案，试图解决这个问题。 从最早的回调函数，到 Promise 对象，再到 Generator 函数，每次都有所改进，但又让人觉得不彻底。它们都有额外的复杂性，都需要理解抽象的底层运行机制。 异步I/O不就是读取一个文件吗，干嘛要搞得这么复杂？异步编程的最高境界，就是根本不用关心它是不是异步。 async 函数就是隧道尽头的亮光，很多人认为它是异步操作的终极解决方案。 二、async 函数是什么？ 一句话，async
JS async 函数的含义和用法实例总结
10-15
async function functionName() { // 函数体 } ``` 在函数声明前加上`async`关键字，使得函数成为一个`async`函数。函数体内可以使用`await`关键字。 3. `await`关键字： - `await`关键字只能在`async`函数...
async
03-19
async function readFileAsync() { try { const data = await fs.promises.readFile('example.txt', 'utf8'); console.log('File content:', data); } catch (error) { console.error('An error occurred:', ...
async/await异步处理demo
06-27
async function myAsyncFunction() { // 函数体 } ``` `await`关键字只能在异步函数内部使用，用于等待一个Promise的结果。当它前面的表达式是一个Promise时，`await`会暂停当前异步函数的执行，直到Promise解析并...
vue-async-function:Vue异步功能
03-14
async function fetchData() { const response = await axios.get('https://api.example.com/data') data.value = response.data } onMounted(fetchData) // 在组件挂载后执行异步函数 return { data } } }...
ES6：async异步函数
qq_51066068的博客
05-12 937
async异步函数 async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例， 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。 Async函数是generator函数的语法糖，在generator函数的基础上添加了一些更加方便用户操作的新特性。Async函数的执行和普通函数一致，只需要一行代码即可，因为他具有内置的执行。async与awai.
async 函数的使用
chengRantianxia的博客
03-11 1923
JavaScript 编程中，经常使用到异步交互，因为逻辑嵌套或者请求嵌套，所以出现了 许多延时、数据不同步的问题。从最早的回调函数，到 Promise 对象，再到 Generator 函数，每次都有所改进，但又都有额外的复杂性，都需要理解抽象的底层运行机制。 async函数就是为了解决异步交互的问题而出现的。 async 函数对 Generator 函数的改进，体现在内置执行器、更好的语义及...
ES2017 新特性：Async Functions (异步函数)
大灰狼的小绵羊哥哥的博客
08-01 5615
小编推荐：掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握.. 本章介绍 Brian Terlson 提议的 ECMAScript 2017 新特性 Async Functions(异步函数) 。 概述 async(异步) 函
async function_Async方法学习与理解
weixin_39745013的博客
11-30 1298
作为一名前端开发，无论是面试或者在实际工作中，更好地理解async方法都会让我们如虎添翼。本文参考在学习过程中觉得写得最清楚明白的一篇文章，进行总结梳理，并加入自己的理解，有不足之处望指正。原文链接：Async functions - making promises friendly​developers.google.comAsync是高级浏览器兼容的一种异步方法，让coders以看起来同步的方...
异步函数async
baidu_39009276的博客
08-22 9692
异步函数async
异步函数（async）
热门推荐
lyz_707的博客
08-26 1万+
在Fabric Tx的执行函数中使用了大量的异步函数async,因此将其内容简单总结一下： 异步函数的概念 异步函数是与同步函数相对的一种函数； （1）同步函数：具有顺序性，当调用函数的未返回值前不能执行后续行为； （2）异步函数：无顺序性，调用的函数会立即返回，不影响执行后续的行为，其中调用函数的真实执行情况是在另一个线程中发生； async function asyncLoadDat...
async function_如何简单理解 JavaScript 的 Async 和 Await？
weixin_39960793的博客
11-19 289
关注前端达人，与你共同进步文章参考来源：https://www.oxxostudio.tw/articles/201908/js-async-await.html原文作者：oxxostudio由于网页为繁体内容，术语描述和话术与我们有差异的问题，笔者在保证不改变原意的基础上做了调整，并在此基础上进行了错误校正，如发现问题，欢迎你的指正开篇自从Async 和Await 出现后，大幅简化Ja...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值