Async +await (ultimate asynchronous programming solution)

1. The async + await benefits

  1. [Fixed] callback hell
  2. You can use tryCatch to catch error exceptions
  3. Make code execution more like synchronous execution
  4. Await is used with async

2. Asynchronous comparison in four ways (events executed in sequence)

  1. Callback function (callback hell)
  2. Promise
  3. Yield pauses when generator+co * is used
  4. async+await

1. Callback function

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8"> </title> <style> HTML * {padding: 0; margin: 0; } .balls .ball { background: red; position: absolute; border-radius: 50%; width: 100px; height: 100px; } .balls .ball1 { top: 20px; left: 0px; } .balls .ball2 { top: 140px; left: 0; } .balls .ball3 { top: 260px; left: 0; } </style> </head> <body> <section> <dl class="balls">
      <dd class="ball ball1"></dd>
      <dd class="ball ball2"></dd>
      <dd class="ball ball3"></dd>
    </dl>
  </section>
  <script>
    let $ = document.querySelector.bind(document);
    function move(ele, target, callback) {
      let left = 0;
      let timer = setInterval(function () {
        if (left >= target) {
          clearInterval(timer);
          return callback();
        }
        left++;
        ele.style.left = left + 'px';
      }, 6)
    }
    move($('.ball1'), 500, function () {
      move($('.ball2'), 300, function () {
        move($('.ball3'), 200, function () {
          console.log('ok')
        })
      })
    })
  </script>
</body>
</html>
Copy the code

2. Promise

let $ = document.querySelector.bind(document);
function move(ele, target) {
  return new Promise((resolve, reject) => {
    let left = 0;
    let timer = setInterval(function () {
      if (left >= target) {
        clearInterval(timer);
        return resolve();
      }
      left++;
      ele.style.left = left + 'px';
    }, 6)
  })
}
move($('.ball1'), 500).then(() => {
  return move($('.ball2'), 300)
}).then(() => {
  return move($('.ball3'), 100)
}).catch((err) => {
  console.log(err)
})
Copy the code

3. generator+co

let $ = document.querySelector.bind(document);
function move(ele, target) {
  return new Promise((resolve, reject) => {
    let left = 0;
    let timer = setInterval(function () {
      if (left >= target) {
        clearInterval(timer);
        return resolve();
      }
      left++;
      ele.style.left = left + 'px'; })}}, 6)function* gen() {
  let a = yield move($('.ball1'), 500);
  console.log(a);
  let b = yield move($('.ball2'), 300);
  console.log(b);
  let c = yield move($('.ball3'), 100);
  console.log(c);
  return undefined;
}
let it = gen();
let i = 0;
function co(it) {
  return new Promise((resolve, reject) => {
    function next(val) {
      let { value, done } = it.next(val);
      if (!done) { value.then(() => { next(++i); })}else {
        resolve('complete');
      }
    }
    next();
  })
}
co(gen()).then((data) => {
  console.log(data);
})
Copy the code

4. async+await

let $ = document.querySelector.bind(document);
function move(ele, target) {
  return new Promise((resolve, reject) => {
    let left = 0;
    let timer = setInterval(function () {
      if (left >= target) {
        clearInterval(timer);
        return resolve();
      }
      left++;
      ele.style.left = left + 'px';
    }, 6)
  })
}
async function m() {
  await move($('.ball1'), 500);
  await move($('.ball2'), 300);
  await move($('.ball3'), 100);
  return 'complete';
}
m().then(function (data) {
  console.log(data)
})
Copy the code