首页天道酬勤JS里的async与await异步编程及await应用圈套源码分析

JS里的async与await异步编程及await应用圈套源码分析

admin 05-09 07:30 339次浏览
这篇文章“JS里的async与await异步编程及await应用圈套源码分析”文章内容重点知识绝大多数人都不太明白,因此小编为大家归纳了以下几点,具体内容详尽,流程清楚,具有一定的参考使用价值,愿大家阅读文章完本文能得到收获,下面我们一起来看看这篇文章“JS里的async与await异步编程及await应用圈套源码分析”这篇文章。

ECMA2017中澳加入2个关键词async与await

简单的说他们都是基于promise以上的语法糖,能让异步操作变得更加简洁明了

首先我们要要用async关键词,将函数公式标记为异步函数

async function f() {

}
f()

异步函数是指:传参为promise对象函数公式
比如需要用到的fetch()就是一个异步函数,返回是promise

在异步函数中,我们能启用其它的异步函数,不过大家无需再应用then,反而是使用一个await。

await会等候Promise进行后直接回到最后的结果

所以在这里的response已经是一个缺少对象的相应数据信息了

async function f() {
    const response = await fetch("http://....")
}
f()

尽管await看起来会中止函数的实行,但等待的过程中,js同样也可以解决别的任务

主要是因为await最底层都是基于promise与事件循环(event loop)体制达到的

await应用后的圈套:

1、第一个圈套
例如:人们各自去await这俩异步操作

async function f() {
    const a = fetch("http://..../post/1")
    const b = fetch("http://..../post/2")
}
f()

虽然没有存有逻辑错误
但这样会摆脱这俩fetch()操控的并行处理
只要我们会直到第一个任务执行完毕之后才实行第二个每日任务

这儿更高效的方法是把所有的Promise用Promise.all组合在一起,然后去await:

改动以后的开发效率就会直接提高一倍

async function f() {
    const promiseA = fetch("http://..../post/1")
    const promiseB = fetch("http://..../post/2")

    const [a, b] = await Promise.all([promiseA,promiseB])
}
f()

2、第二个圈套

假如我们应该在循环中实行异步操作,是不可以立即启用forEach或是map这一类方式的,虽然我们在调用函数中写await也没用。

这个地方的forEach会立刻回到,它并不能直到每一个异步操作都执行完毕

async function f() {
   [1,2,3].forEach(async (i) => {
    await someAsyncOperation();
   })
   console.log("done")

}
f()

假如我希望等候循环系统里的异步操作都一一完毕之后才执行

我们应应用传统for循环

async function f() {
    for( let i of [1,2,3]){
        await someAsyncOperation();
    }
   console.log("done")
}
f()

假如我希望每一个程序流程并发执行,一种更酷炫书写就是采用for await

这儿的for循环仍旧会直到每一个异步操作都进行以后才会再次往后实行

JS中的async与await异步编程及await使用陷阱源码分析

3、第三个圈套

我们不应该在全局性或是一般函数中直接用await关键词

await只有用于异步函数(async function)中

假如他们想要在外层中应用await,那就需要先理解一个异步函数:

JS中的async与await异步编程及await使用陷阱源码分析

应用await async能够让我们写下更清楚,更容易接受的异步代码

以上就是“JS里的async与await异步编程及await应用圈套源码分析”本文内容,想必大家都有了一定的了解,希望小编分享的内容对于大家也有帮助,若想要了解更多这方面的知识具体内容,欢迎关注花开半夏领域文化频道。

JS里的async与await异步编程及await应用圈套源码分析
Java监听器三种实现方法代码解析 Spring Security整合Oauth2实现流程详解
相关内容