印刷順序による血相

印刷順序による血相
非同期プログラミングはJSの中で重要なモジュールです.先日B駅をぶらつきました.このような質問を利用して、研究してみます.

let promise1 = Promise.resolve()
    .then(res => console.log(1))
    .then(res => console.log(2))

let promise2 = new Promise(resolve => {
    setTimeout(() => {
        console.log(6)
        resolve()
    })
}).then(res => console.log(3))

async function main() {
    console.log(4)
    console.log(await Promise.all([promise2, promise1]))
    console.log(5)
    return { obj: 5 }
}

let promise3 = Promise.resolve()
    .then(res => console.log(8))
    .then(res => console.log(9))

console.log(typeof main())

変数オブジェクト宣言
まず変数オブジェクトを作成します.関数と変数を宣言します.関数の宣言優先度は変数より高いです.になります

VO = {
  main: reference async function(){},
  promise1: undefined,
  promise2: undefined,
  promise3: undefined,
}

次にコードの実行段階では、まず変数に値を割り当てます.
promise 1にとって:Promise.resolve() すぐに実行されます. 本輪に入るミニタスクがあります.
promise 2にとってsetTimeoutマクロタスクを開始し、その後のthenはマクロタスクが終了した後のセカンドマイクロタスクで実行されます.
promise 3にとって:then(res => console.log(1)).then...は即座にPromise.resolve()を実行して本輪に入れるマイクロタスクを実行します.
main関数に入ります.実行then(res => console.log(8)).then... 実行console.log(4) このステップは関数全体の一番重要なところです.
async...await実行手順
async...awaitはgeneratorの文法飴です.本質はgenerator+coライブラリで、関数実行器を内蔵しています.各yeildは自動的に実行されます.最後に実行した結果をPromise resoliveの方式で投げ出します.チェーンコールが便利です.私たちはコードをbabelで翻訳して、下のコードの中の注釈の1、2つのところを見ることができます.

"use strict";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { 
  try { 
    var info = gen[key](arg); 
    var value = info.value; 
  } catch (error) { 
    reject(error); return; 
  } 
  if (info.done) { 
    resolve(value); 
  } else { 
    Promise.resolve(value).then(_next, _throw); 
  } 
}

function _asyncToGenerator(fn) { 
  return function () { 
    var self = this, 
    args = arguments; 
    // 2.    async        promise
    //           Promise     executor   
    return new Promise(function (resolve, reject) { 
      var gen = fn.apply(self, args); 
      function _next(value) { 
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); 
      } 
      function _throw(err) { 
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } 
        _next(undefined); 
    });
  }; 
}

var promise1 = Promise.resolve().then(function (res) {
  return console.log(1);
}).then(function (res) {
  return console.log(2);
});
var promise2 = new Promise(function (resolve) {
  setTimeout(function () {
    console.log(6);
    resolve();
  });
}).then(function (res) {
  return console.log(3);
});

function main() {
  
  return _main.apply(this, arguments);
}

function _main() {
  // 1. main            _asyncToGenerator
  _main = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    // 3. regeneratorRuntime      facebook   regenerator   ，     generator   
    // mark                  next、throw、return    
    // wrap       ， next          context
    //          regenerator   
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            console.log(4);
            _context.t0 = console;
            _context.next = 4;
            return Promise.all([promise2, promise1]);

          case 4:
            _context.t1 = _context.sent;

            _context.t0.log.call(_context.t0, _context.t1);

            console.log(5);
            return _context.abrupt("return", {
              obj: 5
            });

          case 8:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));
  return _main.apply(this, arguments);
}

var promise3 = Promise.resolve().then(function (res) {
  return console.log(8);
}).then(function (res) {
  return console.log(9);
});
console.log(typeof(main()));

console.log(await Promise.all([promise2, promise1]))の実行が完了するのを待って、この行は迷いがあります.promise 1とpromise 2の実行前にトリガされました.ここでは彼らの非同期が全部実行されるのを待つだけです.その後の実行は同期操作です.
この後の出力順序は以下の通りです.

 4
'object' //async     
 1
 8
 2
 9
 6
 3
[undefined, undefined]
 5

レゲナート
レゲナートモジュールの参考資料について、興味のあるものは以下の資料を知ることができます.
1、
https://www.iteye.com/blog/schifred-2369320
2、
https://juejin.cn/post/6844903701908291592