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实现同步写法的文章就介绍到这了,更多相关js async和await同步内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • async/await让异步操作同步执行的方法详解

    一.前言 我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的顺序,原因一般是由于异步操作引起的,所以呢,我们需要一种解决方案来处理这种问题,从而使得异步操作按照同步的方式来执行,这样我们就可以控制异步操作输出结果的顺序了 二.异步操作会带来什么问题 异步操作可能会许多的问题,下面是常见的两种 1.函数执行的结果并不是按照顺序返回 function fn1(){ console.log(111) setTimeout(function(){ console.log('wait

  • 详解ES6之async+await 同步/异步方案

    异步编程一直是JavaScript 编程的重大事项.关于异步方案, ES6 先是出现了 基于状态管理的 Promise,然后出现了 Generator 函数 + co 函数,紧接着又出现了 ES7 的 async + await 方案. 本文力求以最简明的方式来疏通 async + await. 异步编程的几个场景 先从一个常见问题开始:一个for 循环中,如何异步的打印迭代顺序? 我们很容易想到用闭包,或者 ES6 规定的 let 块级作用域来回答这个问题. for (let val of [

  • vue如何使用async、await实现同步请求

    这篇文章主要介绍了vue如何使用async.await实现同步请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 以下是vue method的demo: loadTableData : async function() { var reses = await $.ajax({ type:'post', url:'/linewell/system/user/queryPageList.do'/*, }); console.log("reses&q

  • 微信小程序中使用Async-await方法异步请求变为同步请求方法

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async-await方法属于ES7语法,在小程序开发工具中如果勾选es6转es5, 会报错: ReferenceError: regeneratorRuntime is not defined 避免报错,可以引入 regenerator 在根目录下创建 lib 文件夹,并将 https://github.c

  • 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,将y

  • 详解Node.js中的Async和Await函数

    在本文中,你将学习如何使用Node.js中的async函数(async/await)来简化callback或Promise. 异步语言结构在其他语言中已经存在了,像c#的async/await.Kotlin的coroutines.go的goroutines,随着Node.js 8的发布,期待已久的async函数也在其中默认实现了. Node中的async函数是什么? 当函数声明为一个Async函数它会返回一个 AsyncFunction 对象,它们类似于 Generator 因为执可以被暂停.唯

  • Node.js中的async 和 await 关键字微任务和宏任务

    目录 async 和 await 关键字 async 关键字 await关键字 async 和 await 解决回调地狱 JS执行机制(事件循环) 微任务和宏任务 宏任务 微任务 宏任务和微任务执行机制 async 和 await 关键字 async 和 await 是 ES2017 中提出来的,async 和 await 两个关键字的出现,简化的 Promise 的使用. async 关键字 async关键字使用比较简单,所以 async 的使用注意以下三点即可 : async 用于修饰一个

  • vue中异步函数async和await的用法说明

    vue中异步函数async和await的用法说明

    目录 异步函数async和await用法 async/await为什么叫异步 外异内同 异步函数async和await用法 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async函数 async function timeout() { return 'hello world'; } 语法很简单,就是在函数前面加上async关键字,来表示它是异步的,那怎么调用呢?

  • .NET实现异步编程async和await

    .NET实现异步编程async和await

    await和async是.NET Framework4.5框架.C#5.0语法里面出现的,await和async是语法糖. 注意: 1.async出现在方法的声明里面,任何一个方法都可以增加async. 2.await放在Task前面,async和await是成对出现的,只有async是没有意义的,只有await是报错的. 只有async是没有意义的. 只有await是报错的. 3.await 只能放在task前面,不推荐void返回值,使用Task来代替.Task和Task<T>能够使用aw

  • JS中的async与await怎么使用

    目录 一.async 二.await: 三.综合应用 一.async async创建一个异步函数来定义一个代码块,在其中运行异步代码; 怎样变成异步函数呢?以 async 这个关键字开始,它可以被放置在一个函数前面 async function f() { return 1; } f().then(alert); // 1 //上下结果一样 async function f() { return Promise.resolve(1); } f().then(alert); // 1 //也可以用

  • JS异步错误捕获的一些事小结

    引入 我们都知道 try catch 无法捕获 setTimeout 异步任务中的错误,那其中的原因是什么.以及异步代码在 js 中是特别常见的,我们该怎么做才比较? 无法捕获的情况 function main() { try { setTimeout(() => { throw new Error('async error') }, 1000) } catch(e) { console.log(e, 'err') console.log('continue...') } } main(); 这

  • Javascript的promise,async和await的区别详解

    终于把promise, async, await的区别和联系弄清楚了,看下面代码 写法1,2是promise的写法 写法6是async和await的写法 主要看第2种写法和第6中写法即可, 第2种写法是promise的典型写法,第6中写法是async, await的典型写法 // 以下三个请求依次执行 req1 = () => { return fetch("http://example.com/api/v1/get")} req2 = () => { return fet

  • JS异步堆栈追踪之为什么await胜过Promise

    概述 async/await和Promise的根本区别在于await fn()暂停当前函数的执行,而promise.then(fn)在将fn调用添加到回调链后,继续执行当前函数. const fn = () => console.log('hello') const a = async () => { await fn() // 暂停 fn 的执行 } // 调用 a 时,才恢复 fn 的执行 a() // "hello" const promise = Promise.r

随机推荐