js异步之async和await实现同步写法

来源：jb51　　时间：2022/3/2 13:43:11　　对本文有异议

首先我们假设有一方法 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同步内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

友情链接：直通硅谷　点职佳　北美留学生论坛