文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

js中怎么用async和await实现同步

2023-06-29 08:18

关注

这篇“js中怎么用async和await实现同步”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“js中怎么用async和await实现同步”文章吧。

首先我们假设有一方法 readFile 可以读取文件内容,  但是它是异步的。

var gen = function* (){    var a = yield readFile('./a.txt');    console.log(a.toString());    var b = yield readFile('./b.txt');    console.log(b.toString());};

首先我们看下上面的代码,如果我们将function 后面的 * 改成 async,将yield 改成 await,也就是下面的代码

var gen = function async (){    var a = await readFile('./a.txt');    console.log(a.toString());    var b = await readFile('./b.txt');    console.log(b.toString());};

是不是就是我们想要的同步写异步操作了,第一种写法就是 es6 中新支持的特性,Generator 函数,那什么是 Generator 函数呢,简单来说Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。上面的官方解释看不懂没关系。我们下面用例子演示下。

function* func(){     console.log("one");     yield '1';     console.log("two");     yield '2';     console.log("three");     return '3'; }var f = func();f.next(); // one // {value: "1", done: false} f.next(); // two // {value: "2", done: false} f.next(); // three // {value: "3", done: true} f.next(); // {value: undefined, done: true}

上面的代码我们第一次调用 f.next() 时,函数 func 开始执行,并在执行到第一个 yield 时停住,并返回 yield 后面表达式的值,格式就是 {value: "1", done: false}  这种格式,value就是 yield 表达式的值
done 表示func函数是否执行完毕,此时如果我们如果接着调用 f.next(),类推将返回第二 yield 后面表达式的值,也就是 {value: "2", done: false}。我们可以继续调用 f.next() 直至 done 变成 true, 它表示func函数执行完了。

function* func(){    var a = yield '1';    console.log(a);    var b = yield '2';    console.log(b);}var f = func();f.next(); f.next('1');

f.next('2');我们继续改造 func 函数为上面这种,在 next 分别传入 1 和 2,我们会发现 console.log(a) 打印 1 ,console.log(b) 打印 2,也就是我们可以传值到 Generator 函数中。
现在我们回到下面这段代码上面来,然后重新设计下,并实现  readFile 函数。

var gen = function* (){    var a = yield readFile('./a.txt');    console.log(a.toString());    var b = yield readFile('./b.txt');    console.log(b.toString());};var readFile = function (fileName){    return new Promise((resolve)=>{        fs.readFile(fileName, (err, data)=>{            resolve(data);        })    });};function run(fn) {    var gen = fn();    function next(data) {        var result = gen.next(data);        if (result.done) return;        result.value.then((data)=>{            next(data);        })    }    next();}run(gen);

看上面的代码我们用 promise  实现  readFile 函数,此时我们 yield 的返回值就是一个 promise 对象了,我们就可以使用, result.value.then((data)=>{next(data);})将 yield 返回的 value 值重新传回 Generator 函数,这样我们的 console.log(a.toString()); 就可以获取到 a.txt 文件中的内容了, if (result.done) return; 可以用了判断 Generator 函数 是否已执行完毕,用来结束循环调用。所以如果我们单独去看 gen 函数,是不是就是将异步操作写成同步语法了,如果我们将function 后面的 * 改成 async,将yield 改成 await也就是我们常用语法了。

以上就是关于“js中怎么用async和await实现同步”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯