20190611-对async和await的一点理解

xiaolinbang 发布于2019-08-23 18:04 / 2233人阅读

摘要：异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的返回其结果。返回值返回对象的处理结果。当请求必须要请求完成后，才能根据请求的结果，进行是否继续请求的时候根据所有请求完成后，进行统计请求成功失败数量等异步操作最后的回调

首先看下这段代码：

async function submit(){
    console.log("请求开始！")
    
    let data = await fetch("127.0.0.1:8888")
        .then(res => res.json())
        .then(res => {
            console.log("请求成功！")
            return res
        })
        
    console.log("请求结束")；
}

console.log("请求成功了么？")；

执行这这段代码，你会发现控制板输出的数据顺序

"请求成功了么？"
"请求开始！"
"请求成功！"
"请求结束！"

async 定义

MDN:

async function 声明用于定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。但是如果你的代码使用了异步函数，它的语法和结构会更像是标准的同步函数。

通俗的讲，就是「异步」。让这个fn支持异步继续，所以首先打印出来的是

"请求成功了么？"

async利用了影藏的promise对象，来控制函数异步进行，所以你在执行async中，console会出来一个promise对象。

同时需要搭配await来阻塞内部异步，来讲操作

await 定义

MDN：

await表达式会暂停当前「async function」的执行，等待Pormise处理完成，若Promise正常处理，则回调的resolve函数作为await表达式的值，继续进行async function。

表达式

一个 Promise 对象或者任何要等待的值。

返回值

返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。

所以上面代码，内部的执行顺序是

async function submit(){
    // 开始执行
    console.log("请求开始！")
    
    // 遇到await，等待处理结果
    let data = await fetch("127.0.0.1:8888")
        .then(res => res.json())
        .then(res => {
            // 处理完成，返回处理结果
            console.log("请求成功！")
            return res
        })
    
    // 等待await处理完成后，执行。
    console.log("请求结束")；
}

注意：如果返回值不是Promise，则把该值转换为已经常处理的Promise，等待处理结构（就是抛出该值）

async function f2() {
  var y = await 20;
  console.log(y); // 20
}
f2();

应用场景

await可以阻塞主函数，直到后面的Promise对象处理完成，这就很容易的解决了按顺控制异步操作。

当B请求必须要A请求完成后，才能根据A请求的结果，进行是否继续请求B的时候

根据所有请求完成后，进行统计请求成功、失败数量等

异步操作最后的回调

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104621.html

【全栈之路】JAVA基础课程二_数据类型和垃圾回收机制（20190611v1.0）

摘要：，用于调用垃圾收集器，在调用时，垃圾收集器将运行以回收未使用的内存空间。然而调用附带一个免责声明，无法保证对垃圾收集器的调用。所以并不能说是完美主动进行了垃圾回收。欢迎进入JAVA基础课程博客地址：https://blog.csdn.net/houjiyu...本系列文章将主要针对JAVA一些基础知识点进行讲解，为平时归纳所总结，不管是刚接触JAVA开发菜鸟还是业界资深人士，都希...

big_cat 2019-08-16 18:04 评论0 收藏0
如何正确合理使用 JavaScript async/await ！

摘要：想阅读更多优质文章请猛戳博客一年百来篇优质文章等着你引入的在的异步编程中是一个极好的改进。可能会产生误导一些文章将与进行了比较，并声称它是下一代异步编程风格，对此作者深表异议。结论引入的关键字无疑是对异步编程的改进。 showImg(https://segmentfault.com/img/bVbjFP0?w=800&h=450); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇...

trigkit4 2019-08-23 14:27 评论0 收藏0
深入前端-JavaScript异步编程

摘要：缺点无法取消当处于状态时，无法得知目前进展到哪一个阶段错误不能被生成器什么是函数是提供的一种异步编程解决方案，语法行为与传统函数完全不同函数有多种理解角度。 JavaScript的执行机制在上篇文章中进行了深入的探讨，那么既然是一门单线程语言，如何进行良好体验的异步编程呢回调函数Callbacks 当程序跑起来时，一般情况下，应用程序（application program）会时常通...

2json 2019-08-02 15:37 评论0 收藏0
深入前端-JavaScript异步编程

摘要：缺点无法取消当处于状态时，无法得知目前进展到哪一个阶段错误不能被生成器什么是函数是提供的一种异步编程解决方案，语法行为与传统函数完全不同函数有多种理解角度。 JavaScript的执行机制在上篇文章中进行了深入的探讨，那么既然是一门单线程语言，如何进行良好体验的异步编程呢回调函数Callbacks 当程序跑起来时，一般情况下，应用程序（application program）会时常通...

raise_yang 2019-08-26 10:22 评论0 收藏0