async和await原理

generator

async和await是generator的语法糖,想要搞清楚async和await必须知道generator;那么咱们先来看看generator函数;promise

function * getAge() {
    yield 1;
    yield 2;
}
let gen = getAge();
console.log(gen.next());//{ value: 1, done: false }
console.log(gen.next());//{ value: 2, done: false }
console.log(gen.next());//{ value: undefined, done: true }

generator和普通函数的区别:
1.generator声明函数以前要加*
2.函数中有yield,能够控制函数的运行babel

generator传参问题
function * getAge() {
    let a = yield 1;
    console.log(a);//444
    yield 2;
}
let gen = getAge();
console.log(gen.next());
console.log(gen.next(444));

generator传参能够将参数传在next函数中,给a赋值,可是第一个next()函数永远是undefined;以下异步

function * getAge(xxx) {
    let a = yield 1;
    console.log(a);//undefined
    yield 2;
}
let gen = getAge();
console.log(gen.next(444));
console.log(gen.next());
generator函数运行过程

image.png

generator实现读取异步函数

如今有一个name和age的txt文件,咱们经过name.txt读取age.txt里的内容;我这里的name中写的是age.txt,age.txt中写的是18;async

let {promisify} = require('util');
let fs = require('fs');
let read = promisify(fs.readFile);
function * getAge() {
    let name = yield read(`${__dirname}name.txt`, 'utf-8');
    let age = yield read(`${__dirname}${name}`, 'utf-8');
}
let it = getAge();
let {value} = it.next();//返回的是读取name.txt的promise函数
value.then(data => {
    let {value} = it.next(data)//将读取name文件的内容做为参数赋值给getAge函数中的name,同时这里的value是读取age.txt的promise函数
    value.then(data => {
        console.log(data)//18
    })
});

async和await

上面层层嵌套看着很乱尤为是嵌套多的状况下,那么咱们使用async和await实现一下这里只是将generator函数中的*换成了async,将yield换成了await函数

async function getAge1() {
    let name = await read(`${__dirname}name.txt`, 'utf-8');
    let age = await read(`${__dirname}${name}`, 'utf-8');
    console.log(age);
}
getAge1()

咱们将上面函数进行babel转义成es2015,就是将generaotr+promise结合起来实现了async和await函数ui

1 将async函数转换成generator
2.第一次执行next传参为undefined,上面咱们也提到了第一次next的值是undefined
3.将上一次的返回值传递给下面的next函数,递归实现找打最后便可
let {promisify} = require('util');
let fs = require('fs');
let read = promisify(fs.readFile);
function asyncGeneratorStep(gen, resolve, reject, _next, key, arg) {
    try {
        var info = gen[key](arg);
        var value = info.value;
    } catch (error) {
        reject(error);
        return;
    }
    if (info.done) {
        resolve(value);
    } else {
    //为了防止value是个普通值(不是promise),使用Promise.resolve包一层
        Promise.resolve(value).then(_next);
    }
}
function _asyncToGenerator(fn) {
    return function () {
        return new Promise(function (resolve, reject) {
            var gen = fn();
            function _next(value) {
                asyncGeneratorStep(gen, resolve, reject, _next, "next", value);
            }
            _next(undefined);
        });
    };
}
function getAge1() {
    return _getAge();
}
function _getAge() {
    _getAge = _asyncToGenerator(function* () {
        let name = yield read(`${__dirname}name.txt`, 'utf-8');
        let age = yield read(`${__dirname}${name}`, 'utf-8');
    });
    return _getAge();
}
getAge1(); //让函数执行
相关文章
相关标签/搜索