JavaScript中async与await实现原理与细节

目录
  • 一、回调地狱
  • 二、Promise
  • 三、生成器(generator)
  • 四、使用生成器同步化promise
  • 五、async、await异步代码究极解决方案

一、回调地狱

在es6兴起之后许多人都开始使用promise,promise目的是解决es5中的回调地狱(callback hell),那么什么是回调地狱呢?先来提一个需求,现在需要发送n个request请求,第二个请求参数需要第一个请求的结果,第三个请求的参数需要第二个请求的结果,以此类推... ,在没有promise的条件下,我们不难使用callback写出如下的代码:

function ajax(url, callback) {
    setTimeout(() => {
        callback(Math.random() + url)
    }, 1000);
}

function request() {
    ajax('url1', (res1 => {
        ajax(`url2?random=${res1}`, (res2) => {
            ajax(`url3?random=${res2}`, (res3) => {
                ajax(`url4?random=${res3}`, (res4) => {
                    // do something
                })
            })
        })
    }))
}
request()

二、Promise

这样确实能实现我们的需求,但是这样子的代码有什么缺点呢?不难看出我们的request函数越来越像个三角形 ,代码集中在上部分,下半部分全都是我们的括号,代码阅读性极差! 这时候我们的promise应运而生了,使用promise我们可以这样重构我们的代码如下:

function ajax(url) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(Math.random() + url)
        }, 1000);
    })
}

function request() {
    ajax('url1').then(res1 => {
        ajax(`url2?random=${res1}`).then((res2) => {
            ajax(`url3?random=${res2}`).then((res3) => {
                ajax(`url4?random=${res3}`).then((res4) => {
                    // do something
                })
            })
        })
    })
}
request()

肯定有人说,这不还是像个三角形吗?这样使用promise有什么意义呢?此时我们可以借助promise的链式调用重构成下面这样:

function ajax(url) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(Math.random() + url)
        }, 1000);
    })
}

function request() {
    ajax('url1').then(res1 => {
        return ajax(`url2?random=${res1}`)
    }).then(res2 => {
        return ajax(`url3?random=${res2}`)
    }).then(res3 => {
        return ajax(`url4?random=${res3}`)
    }).then(res4 => {
        // do something
    })
}

request()

相对于之前的回调地狱,此时我们的代码是不是比较清晰了。但是!这还不够!这看上去还不够直观。我们想要的是阅读异步代码,类似于阅读同步代码的方式一样方便。

三、生成器(generator)

生成器是es6新增的语法,它是一个特殊的迭代器,它可以用来暂停我们函数的执行!这个功能非常强大! 生成器的语法是,在声明函数时在后面增加一个 * 号,那么这个函数就是生成器函数,直接调用该函数得到的是一个生成器句柄,该生成器是不会执行的,必须要调用生成器句柄的next()方法后,生成器才会执行,并且执行到我们的yield处(如果存在yield就执行到第一个yield,不存在则直接执行完毕),该方法的返回值一个对象,结构是 {done: true/false, value: 我们yield后面跟的值} ,如果执行到该生成器函数末尾则 done为true。 关于生成器的知识可以点此JavaScript中的迭代器和可迭代对象与生成器

function* foo() {
    console.log('======');
    const a = yield 1;
    console.log('a',a);
}

const g = foo()
console.log('11111111')
const res1 = g.next()
console.log(res1)
const res2 = g.next('22222')
console.log(res2)

上面代码打印顺序为:

11111111
======
{done: false, value: 1}
'a','22222'
{done: true, value: undefined}

细心的你一定看出了,我们在next方法中传的参数会赋值给生成器函数中的yield 左侧,并可以在生成器中拿到这个值后进行使用。

四、使用生成器同步化promise

掌握了生成器的知识我们就可以使用生成器来将我们的promise链式调用进行重构如下:

function ajax(url) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(Math.random() + url)
        }, 1000);
    })
}

function* request() {
    const res1 = yield ajax('url1')
    const res2 = yield ajax(`url2?random=${res1}`)
    const res3 = yield ajax(`url3?random=${res2}`)
    const res4 = yield ajax(`url4?random=${res3}`)
    //    do something
    console.log(res4);
}
// 开始调用我们的生成器
const generator = request();
generator.next().value.then(res1 => {
    generator.next(res1).value.then(res2 => {
        generator.next(res2).value.then(res3 => {
            generator.next(res3).value.then(res4 => {
                generator.next(res4)
            })
        })
    })
})

可以看到我们的生成器还是三角形,优化一下成链式调用如下:

generator.next().value.then(res1 => {
    return generator.next(res1).value
}).then(res2 => {
    return generator.next(res2).value
}).then(res3 => {
    return generator.next(res3).value
}).then(res4 => {
    generator.next(res4)
})

此时,我们的主函数已经非常像同步代码了,但是缺点是我们目前必须手动调用该生成器,并且request主函数里面我们不知道有多少次yield调用,因此我们的生成器也不能手动调用多次,这时,我们将该生成器调用代码进行重构,重构成可以自动执行我们的生成器的函数,不需要关心request内部有多少次yield使用,重构如下:

function ajax(url) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(Math.random() + url)
        }, 1000);
    })
}
function* request() {
    const res1 = yield ajax('url1')
    const res2 = yield ajax(`url2?random=${res1}`)
    const res3 = yield ajax(`url3?random=${res2}`)
    const res4 = yield ajax(`url4?random=${res3}`)
    //    do something
    console.log(res4);
}
function execGenerator(generatorFn) {
    const generator = generatorFn();
    function exec(res) {
        const { done, value } = generator.next(res)
        if (!done) {
            value.then(exec)
        }
    }
    exec()
}
execGenerator(request)

我们增加了一个自动执行函数execGenerator,该函数接受一个生成器参数,并且在内部自动进行递归调用,直至返回值的 done 属性为 true,此时我们的使用方式只需要定义一个request生成器函数,并且执行一下我们的自动执行函数 execGenerator ,我们的request就能像同步代码一样盘跑起来了,并且看起来非常直观。

五、async、await异步代码究极解决方案

其实async与await是我们上面生成器的语法糖而已,在内部做的事情跟我们使用生成器做的事情是一样的,使用方式如下:

function ajax(url) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(Math.random() + url)
        }, 1000);
    })
}

async function request() {
    const res1 = await ajax('url1')
    const res2 = await ajax(`url2?random=${res1}`)
    const res3 = await ajax(`url3?random=${res2}`)
    const res4 = await ajax(`url4?random=${res3}`)
    //    do something
    console.log(res4);
}

看起来是不是跟我们的生成器request函数非常类似呢?使用asyncawait可以让我们省去写execGenerator函数的步骤,更加方便了我们的开发!

到此这篇关于JavaScript中async与await实现原理与细节的文章就介绍到这了,更多相关JS 中async与await 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-09-16

JavaScript Canvas实现噪点滤镜回忆童年电视雪花屏

目录 引言 正文 初始化渲染 雪花屏动画 帧动画播放 引言 相信很多人80,90后的同学对童年里电视机的突然出现刺啦刺啦的雪花屏记忆犹新,本期将用 pixi.js 来完成一个电视机播放动漫然后突然出现雪花屏的动画,里面主要讲解了如何使用pixi.js播放帧动画和如何用噪点滤镜制造雪花屏. 正文 初始化渲染 import * as PIXI from "pixi.js" const GAME_WIDTH = 800; const GAME_HEIGHT = 600; export def

JavaScript中的canvas 实现一个圆环渐变倒计时效果

目录 前言 1.效果图展示 2.需求分析 3.实现的技术 4.实现的过程 1. HTML 部分 2. SASS部分 3. JavaScript部分 5.全部源码 1.index.html 2. style.scss 3. index.js 前言 内容: 效果图 需求分析 实现技术 实现过程 全部源码 1.效果图展示 随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止. 2.需求分析 可以自定义倒计时结束的时间 圆环的颜色是渐变的 倒计时的动画在视觉上是流畅运行, 而

JS实现羊了个羊小游戏实例

目录 引言 rem布局方案 popbox.js使用原理 html代码 样式代码 javascript代码 导入图片素材列表 startHandler函数实现 randomList 工具方法 clickHandler函数内部 createShadow方法 startHandler后续的逻辑 引言 这两天火爆全场的<羊了个羊>游戏,相信大家都玩过了,那么在玩这个游戏的同时,我想大家都会好奇这个游戏的实现,本文就带大家使用css,html,js来实现一个动物版的游戏. 首先我用到了2个插件,第一个插

js&nbsp;实现验证码输入框示例详解

目录 前言 思路 遇到的问题 HTML CSS JS 前言 验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验还不错,分享给大家. 思路 我在实现之前肯定也是上网搜了一下的,网上的方式大多是使用多个input标签来实现,但我觉得不太优雅,就自己想了一个方法.使用了6个div标签和一个input标签.验证码长度一般是4位或6位,我这里用6位做演示. 先将6个div使用flex布局平铺. 再将input使用绝对定位

js基于div丝滑实现贝塞尔曲线

目录 引言 分析 实现 布局 如何计算y的偏移量 Math.sin() 和 Math.cos() 正弦曲线 余弦曲线 计算更多信息 完善剩余 完成跑马灯制作 贝塞尔曲线 简单封装一下方法 完整示例 style SCript 引言 今天遇到朋友发来的一个ui图,询问我如何实现下图这样的效果[vue项目],(听说是类似LED灯的展示效果),于是便有了今天的小demo,要实现一个类似下图的动效,上面的灯会一直重复滚动,但是这个并不是什么难点,主要在于如何实现这种平滑的曲线,日常我们的开发的div在我们

js&nbsp;实现Material&nbsp;UI点击涟漪效果示例

目录 正文 HTML CSS JS 实现效果 正文 我个人而言还是挺喜欢Material UI这套设计风格的.一些细节方面做的还不错.就比如今天要给大家分享的点击涟漪效果.Material UI里面叫做Ripples.好了,话不多说,开始吧. HTML <div class="example">Click me</div> CSS .example { position: relative; width: 300px; height: 300px; line-h

JS简单封装的图片无缝滚动效果示例【测试可用】

本文实例讲述了JS简单封装的图片无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="

JS实现物体带缓冲的间歇运动效果示例

本文实例讲述了JS实现物体带缓冲的间歇运动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <titl

JS实现的DIV块来回滚动效果示例

本文实例讲述了JS实现的DIV块来回滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="t

JS实现的邮箱提示补全效果示例

本文实例讲述了JS实现的邮箱提示补全效果.分享给大家供大家参考,具体如下: 现在要实现的是类似网易登录时的邮箱提示框的效果,不过这里我打算稍微改变一下,就是在输入@的时候再出现邮箱提示列表 实现提示的原理是采用正则进行匹配 效果图如下: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>邮箱补全提示</title> <sty

原生JS实现多个小球碰撞反弹效果示例

本文实例讲述了原生JS实现多个小球碰撞反弹效果.分享给大家供大家参考,具体如下: 实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y值增加,以上的思路可以实现小球的碰壁反弹 小球与小球之间的碰撞,要判断小球在被撞小球的哪个方向,从而判断小球该向哪个方向移动,同样的改变小球的坐标值,来实现小球的反弹 实现代码: <!doctype html> &l

JS实现的简单折叠展开动画效果示例

本文实例讲述了JS实现的简单折叠展开动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE = html> <html> <head> <title>www.jb51.net JS折叠展开动画</title> <style> body{ margin: 0px; padding: 0px; } .red{ background-color:red; width:200px; height:200px; position:rel

JS实现的新闻列表自动滚动效果示例

本文实例讲述了JS实现的新闻列表自动滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #box{width:260px;height:100px;margi

JS实现的小火箭发射动画效果示例

本文实例讲述了JS实现的小火箭发射动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小火箭发射</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .big

js实现移动端导航点击自动滑动效果

本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js]. 废话不多说直接上代码: /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js] */ (function ($) { $.

JS实现的缓冲运动效果示例

本文实例讲述了JS实现的缓冲运动效果.分享给大家供大家参考,具体如下: 缓冲需要用到数值取整,向上取整:Math.ceil()  向下取整Math.floor() 移动的速度慢慢减慢的效果,移动速度=(终点位置 - 当前位置) / 一个数 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d