Introduction to yield in es5 and aysnc/await in es6 (with examples)

The content of this article is about the introduction of yield in es5 and aysnc/await in es6 (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

In my spare time recently, I have been reading books related to js, ​​and I also bought front-end related columns on Geek Time. For a non-jser person, I always have a feeling: the js community is real. Radical and impetuous, these rule makers never seem to know what restraint is. Sometimes inherent things can be dealt with, but they prefer to artificially create some concepts and syntax sugar, artificially building one after another. Gaoshan, it seems that you are just a "rookie" if you haven't crossed it

Please forgive my viciousness, when I read "JS Language Essence", this feeling was very strong. The author is a big name in the industry, and he also formulated json, but each chapter also quotes a quote from Shakespeare at the beginning, "It seems irrelevant and there is a hidden philosophy". Many contents in the book always have one meaning: it is obvious that the words can be divided into 10 points to make an ordinary person understand. I can understand it clearly, but I can’t. I only say 6 points, and you can understand the rest by yourself. There are many regular things that are not understood through understanding, but are suddenly enlightened by explaining their essence in a few words.

In the past, I would have thought that this person was a huge mountain to worship. In recent years, although my skills are still not that good, I still like to think about some inner things, and I am working harder to improve it little by little. The worship of authority in my heart has been removed. When I see these again, the "..." punctuation marks are easily imprinted in my mind. I feel that this is not just one or two people, but most likely the entire js circle is like this.

Going back to the title, apart from reading books, reading columns, and looking for information, I still haven’t fully understood generators and async/await for a long time, so I tried to sort out the entire running process

Generator

I first try not to follow anything after yield. You can copy it directly to the console output

function *f0(param) {
    console.log('n: ' + param);
    yield;
    console.log('i');
    let l = yield;
    console.log('l: ' + l);
}
let v0 = f0('p');
console.log(v0.next(1)); // 输出  n: p  和  {value: undefined, done: false}
console.log('----');
console.log(v0.next(2)); // 输出  i  和  {value: undefined, done: false}
console.log('----');
console.log(v0.next(3)); // 输出  l: 3  和  {value: undefined, done: true}
console.log('----');
console.log(v0.next(4)); // 输出 {value: undefined, done: true}
console.log('----');
console.log(v0.next(5)); // 输出 {value: undefined, done: true}

Based on the above, give the method return value

function *f1() {
    console.log('n');
    yield;
    console.log('i');
    let l = yield;
    console.log('l: ' + l);
    return '?';
}
let v1 = f1();
console.log(v1.next(1));     // 输出  n  和  {value: undefined, done: false}
console.log('----');
console.log(v1.next(11));    // 输出  i  和  {value: undefined, done: false}
console.log('----');
console.log(v1.next(111));   // 输出  l: 111  和  {value: '?', done: true}
console.log('----');
console.log(v1.next(1111));  // 输出 {value: undefined, done: true}
console.log('----');
console.log(v1.next(11111)); // 输出 {value: undefined, done: true}

Then I try to add content after yield

function *f2(param) {
    console.log('0: ' + param);
    let f = yield 1;
    console.log('1: ' + f);
    let s = yield f + 2;
    console.log('2: ' + s);
    let t = yield (s + 3);
    console.log('3: ' + t);
    let fo = (yield s) + 4;
    console.log('4: ' + fo);
}
let v2 = f2('p');
console.log(v2.next('N')); // 输出  0: p  和  {value: 1, done: false}
console.log('----');
console.log(v2.next('I')); // 输出  1: I  和  {value: "I2", done: false}
console.log('----');
console.log(v2.next('L')); // 输出  2: L  和  {value: "L3", done: false}
console.log('----');
console.log(v2.next('S')); // 输出  3: S  和  {value: "L", done: false}
console.log('----');
console.log(v2.next('H')); // 输出  4: H4  和  {value: undefined, done: true}
console.log('----');
console.log(v2.next('I')); // 输出  {value: undefined, done: true}
console.log('----');
console.log(v2.next('T')); // 输出  {value: undefined, done: true}

Finally, based on the above, give the method return value

function *f3() {
    console.log('0');
    let y1 = yield 1;
    console.log('1: ' + y1);
    let y2 = yield y1 + 2;
    console.log('2: ' + y2);
    let y3 = yield (y2 + 3);
    console.log('3: ' + y3);
    let y4 = (yield y3) + 4;
    console.log('4: ' + y4);
    return '??';
}
let v3 = f3();
console.log(v3.next('N')); // 输出  0  和  {value: 1, done: false}
console.log('----');
console.log(v3.next('I')); // 输出  1: I  和  {value: "I2", done: false}
console.log('----');
console.log(v3.next('L')); // 输出  2: L  和  {value: "L3", done: false}
console.log('----');
console.log(v3.next('S')); // 输出  3: S  和  {value: "S", done: false}
console.log('----');
console.log(v3.next('H')); // 输出  4: H4  和  {value: "??", done: true}
console.log('----');
console.log(v3.next('I')); // 输出  {value: undefined, done: true}
console.log('----');
console.log(v3.next('T')); // 输出  {value: undefined, done: true}

The operation logic of yield is roughly clear. Based on the above f3 is an example. Looking at the output above, it actually divides a method into several sections for execution.

// 下面  五行一起的竖线(|)  用一个大括号表示出来会更直观一点
function *f3() {
    // 调用第 1 次 next('N') 时运行的代码
    console.log('0');
    let y1 = yield 1;
    return 1;                          // | 封装成 {value: 1, done: false} 返回
                                       // |
                                       // | 这两行等同于 let y1 = yield 1;
    // 调用第 2 次 next('I') 时运行的代码 // |
    let y1 = 'I';                      // |
    console.log('1: ' + y1);
    return y1 + 2;                     // | 封装成 {value: "I2", done: false} 返回
                                       // |
                                       // | 这两行等同于 let y2 = yield y1 + 2;
    // 调用第 3 次 next('L') 时运行的代码 // |
    let y2 = 'L';                      // |
    console.log('2: ' + y2);
    return y2 + 3;                     // | 封装成 {value: "L3", done: false} 返回
                                       // |
                                       // | 这两行等同于 let y3 = yield (y2 + 3);
    // 调用第 4 次 next('S') 时运行的代码 // |
    let y3 = 'S';                      // |
    console.log('3: ' + y3);
    return y3;                         // | 封装成 {value: "S", done: false} 返回
                                       // |
                                       // | 这两行等同于 let y4 = (yield y3) + 4;
    // 调用第 5 次 next('H') 时运行的代码 // |
    let y4 = 'H'                       // |
    console.log('4: ' + y4);
    return '??';                       // 封装成 {value: "??", done: true} 返回
}

If you think about it again, you will know that the first time you run next('N') When, the N passed in will be ignored, because the value passed by next() for the first time is not received by yield. Whether you read a book or read the article you found, the value passed by next() for the first time will not be received. No parameters have been passed

It feels like yield is just for iteration. You can just use for for iteration, but it is so rounded. I don’t know why! I can just make a new one. for of is really fun, because every time next() is executed, that section will be executed, and it is also called "we can finally be asynchronous"

async/await

And then es7 I had these two keywords at the beginning. I read an interview question from a major manufacturer. In order to deepen my understanding of these two keywords, I changed them to the following

async function async1() {
    console.log('A');
    console.log(await async2());
    return 'B';
}
async function async2() {
    console.log('C');
    return 'D';
}
console.log('E');
setTimeout(function() {
    console.log('F');
}, 0);
async1().then(function(r) {
    console.log(r);
});
new Promise(function(resolve, reject) {
    console.log('G');
    resolve();
}).then(function() {
    console.log('H');
});
console.log('I');

. The output at the bottom of chrome 73.0.3683.75 is :

// 这个 undefined 的意思应该主要是用来分隔宏任务的, 也就是前面的主线和任务队列是在一起的
E  A  C  G  I  D  H  B  undefined  F

The output under firefox 60.5.1

// 这个 undefined 的意思应该只是用来分隔主线的, 任务队列和宏任务在一起了
E  A  C  G  I  undefined  H  D  B  F

The output under opera 58.0.3135.107 is:

// 这个 undefined 应该跟 chrome 里面是一样的
E  A  C  G  I  H  D  B  undefined  F

Obviously D H B is more reasonable. In firefox and There is obviously a problem in the implementation of opera. It is conceivable that a lower version of chrome may also be the result. Being able to play so many tricks (of course, this can be said to be caused by historical issues)

To be honest, I think this is more for: "Other languages ​​have it, of course an avant-garde language like ours should Yes!"

...

Such a language can actually become as popular as it is now. I can only say that this world is really amazing

This article is here It’s all over here. For more exciting content, you can pay attention to the

JavaScript Tutorial Video

column on the PHP Chinese website!

The above is the detailed content of Introduction to yield in es5 and aysnc/await in es6 (with examples). For more information, please follow other related articles on the PHP Chinese website!