비동기 발전 과정

1 callback

코드:

function sleepByCb(cb) {
  setTimeout(function () {
    cb()
  }, 1000)
}

function testCb() {
  console.log(' ')
  sleepByCb(function () {
    console.log('1s ')
    sleepByCb(function () {
      console.log('2s ')
      sleepByCb(function () {
        console.log('3s ')
        sleepByCb(function () {
          console.log('4s ')
          sleepByCb(function () {
            console.log('5s ')
          })
        })
      })
    })
  })
  console.log(' ')
}

testCb()

testCb()

출력:

 
 
1s 
2s 
3s 
4s 
5s 

총결: 리셋을 사용하는 것은 간단하고 난폭하지만, 리셋을 끼워 넣은 상황에서 그야말로 볼 수 없다

2 promise

코드:

function sleepByPromise() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve()
    }, 1000)
  })
}

function testPromise() {
  console.log(' :promise')
  sleepByPromise()
    .then(function () {
      console.log('1s ')
      return sleepByPromise()
    })
    .then(function () {
      console.log('2s ')
      return sleepByPromise()
    })
    .then(function () {
      console.log('3s ')
      return sleepByPromise()
    })
    .then(function () {
      console.log('4s ')
      return sleepByPromise()
    })
    .then(function () {
      console.log('5s ')
      return sleepByPromise()
    })
  console.log(' ')
}

testPromise()

출력:

 :promise
 
1s 
2s 
3s 
4s 
5s 

요약: 이런 체인식 작법은 함수의 절차를 비교적 명확하게 하고 끼워넣는 것을 버렸다.하지만 리셋 자체는 해결되지 않았다.

3 generator

코드:

function sleepByPromise() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve()
    }, 1000)
  })
}

function testPromise() {
  console.log(' :promise')
  sleepByPromise()
    .then(function () {
      console.log('1s ')
      return sleepByPromise()
    })
    .then(function () {
      console.log('2s ')
      return sleepByPromise()
    })
    .then(function () {
      console.log('3s ')
      return sleepByPromise()
    })
    .then(function () {
      console.log('4s ')
      return sleepByPromise()
    })
    .then(function () {
      console.log('5s ')
      return sleepByPromise()
    })
  console.log(' ')
}

// testPromise()

// 3 generator
function sleepByPromise() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve()
    }, 1000)
  })
}

function* testGenerator() {
  console.log(' :generator')
  yield sleepByPromise()
  console.log('1s ')
  yield sleepByPromise()
  console.log('2s ')
  yield sleepByPromise()
  console.log('3s ')
  yield sleepByPromise()
  console.log('4s ')
  yield sleepByPromise()
  console.log('5s ')
  console.log(' ')
}

let it = testGenerator()
it.next().value
  .then(() => {
    return it.next().value
  })
  .then(() => {
    return it.next().value
  })
  .then(() => {
    return it.next().value
  })
  .then(() => {
    return it.next().value
  })
  .then(() => {
    return it.next().value
  })

출력:

 :generator
1s 
2s 
3s 
4s 
5s 
 

총괄:generator+promise를 사용하여 비동기화를 동기화(절차성 있음)처럼 하지만 스스로 호출해야 하는 것은 번거롭다.TJ대신의 코쿠를 사용하면 다음 번을 수동으로 반복하지 않아도 된다.

4 generator+co

코드:

 const co = require("co");

//      
    
  co(testGenerator())

출력:

 :generator
1s 
2s 
3s 
4s 
5s 
 

5 async/await

코드:

// 5 async/await
function sleepByPromise() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve()
    }, 1000)
  })
}

async function testAsyncAwait() {
  console.log(' :generator')
  await sleepByPromise()
  console.log('1s ')
  await sleepByPromise()
  console.log('2s ')
  await sleepByPromise()
  console.log('3s ')
  await sleepByPromise()
  console.log('4s ')
  await sleepByPromise()
  console.log('5s ')
  console.log(' ')
}

testAsyncAwait()

출력:

 :async/await
1s 
2s 
3s 
4s 
5s 
 

요약: 이것은generator+promise의 문법 설탕일 뿐이지만, 원래의 비동기적인 코드를 동기화 형식으로 쓸 수 있다
다음으로 전송:https://juejin.im/post/5bc82518f265da0aaa054536