Parallel Serial problem in async/await

there are two functions 

var a = function () {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve("a")
    }, 3000)
  })
}
var b = function () {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve("b")
    }, 2000)
  })
}

if executed in this way 

;(async()=>{
  console.time("test")
  var aa = await a()
  var bb = await b()
  console.log(`$(aa)-${bb}`)
  console.timeEnd("test")
})()

the result is 

$(aa)-b
test: 5010.7548828125ms  //

but if you execute

like this 
;(async()=>{
  console.time("test")
  var promiseA = a()
  var promiseB = b()
  var aa = await promiseA
  var bb = await promiseB
  console.log(`$(aa)-${bb}`)
  console.timeEnd("test")
})()

the result is 

$(aa)-b
test: 3001.277099609375ms  //

Why is this?

Javascript
Mar.10,2021

in fact, this kind of grammatical candy does not quite understand the principle. It is recommended that you read the code after converting it to ES5 through babel, which is easy to understand.
such as the above code body, after conversion:

Serial: 

while (1) {
  switch (_context.prev = _context.next) {
    case 0:
      console.time('test');
      _context.next = 3;
      return a(); //  a

    case 3:
      aa = _context.sent; // a 
      _context.next = 6;
      return b(); 

    case 6:
      bb = _context.sent;

      console.log('$(aa)-' + bb);
      console.timeEnd('test');

    case 9:
    case 'end':
      return _context.stop();
  }
}

parallel: 

_asyncToGenerator( /*-sharp__PURE__*/regeneratorRuntime.mark(function _callee() {
  var promiseA, promiseB, aa, bb;
  return regeneratorRuntime.wrap(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          console.time('test');
          //  a,bajax
          
          // await promiseA, await promiseB
          promiseA = a(); // a 
          promiseB = b(); // b
          
          _context.next = 5; // 5 
          return promiseA;

        case 5:
          aa = _context.sent;
          _context.next = 8;
          return promiseB;

        case 8:
          bb = _context.sent;

          console.log('$(aa)-' + bb);
          console.timeEnd('test');

        case 11:
        case 'end':
          return _context.stop();
      }
    }
  }, _callee, undefined);
}))();

because you call
at the same time, the original logic is: a call to wait a and then b execute wait b two seconds
now a calls waiting a while b has been executed in two seconds, so to b 

var promiseA = a()
var promiseB = b()

try this 

;(async () => {
    console.time('test')
    var promiseA = a()
    var aa = await promiseA
    var promiseB = b()
    var bb = await promiseB
    console.log(`$(aa)-${bb}`)
    console.timeEnd('test')
})()

the first case is serial, and the second case is that the a () of promiseA and the b () of promiseB are executed at the same time, that is, the execution of promiseB does not wait until the execution of promiseA, that is, parallel, so the time is shorter than that of the first case

.

Previous: Which useful controls can be used to achieve the function of Excel on the web page, similar to plug-ins!

Next: Call the backend API in batch to add objects, but check whether there are duplicate values one by one before adding them. How to write promise?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu