【异步编程】1. 异步编程的实现方式-蒲公英云

【异步编程】1. 异步编程的实现方式

总体介绍

回调函数的方式，使用回调函数的方式有一个缺点是，多个回调函数嵌套的时候会造成回调函数地狱，上下两层的回调函数间的代码耦合度太高，不利于代码的可维护。

Promise的方式，使用 Promise 的方式可以将嵌套的回调函数作为链式调用。但是使用这种方法，有时会造成多个 then 的链式调用，可能会造成代码的语义不够明确。

generator 的方式，它可以在函数的执行过程中，将函数的执行权转移出去，在函数外部还可以将执行权转移回来。当遇到异步函数执行的时候，将函数执行权转移出去，当异步函数执行完毕时再将执行权给转移回来。因此在 generator 内部对于异步操作的方式，可以以同步的顺序来书写。使用这种方式需要考虑的问题是何时将函数的控制权转移回来，因此需要有一个自动执行 generator 的机制，比如说 co 模块等方式来实现 generator 的自动执行。

async 函数的方式，async 函数是 generator 和 promise 实现的一个自动执行的语法糖，它内部自带执行器，当函数内部执行到一个 await 语句的时候，如果语句返回一个 promise 对象，那么函数将会等待 promise 对象的状态变为 resolve 后再继续向下执行。因此可以将异步逻辑，转化为同步的顺序来书写，并且这个函数可以自动执行。

场景介绍

假设我们有这么一个场景：我们从前端发送一个网络请求，去服务器获取用户信息，服务器返回给前端数据后，前端打印用户的名称。

回调函数

function getUserInfo(callback) {
   //前面有若干代码
   setTimeout(function () {
     const user = {
     id: 1, name: "codereasy" };
     callback(user);
   }, 1000);
   //后面有若干代码
   console.log("我继续执行后续代码了，网络请求不会阻塞后续代码执行");
 }
 getUserInfo(function (user) {
   console.log(user.name);
 });

Promise

function getUserInfo() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      const user = {
     id: 1, name: "codereasy" };
      resolve(user);
    }, 1000);
  });
}
getUserInfo()
  .then(function (user) {
    console.log(user.name);
  })
  .catch(function (error) {
    console.log(error);
  });
//后续代码
console.log("正在执行后续代码，网络请求没有阻塞后续代码");

生成器和迭代器

什么是生成器和迭代器：https://blog.csdn.net/wtswts1232/article/details/131723831

function* getUserInfo() {
  yield new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve({
     id: 1, name: "codereasy" });
    }, 1000);
  });
}
const iterator = getUserInfo();
iterator.next().value.then(function (param) {
  console.log("当前获取的结果是", param);
});
//后续代码
console.log("网络请求没有阻塞后续代码");

async和await

function getUserInfo() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve({
     id: 1, name: "John Doe" });
    }, 1000);
  });
}
async function getUser() {
  try {
    const user = await getUserInfo();
    console.log(user.name);
  } catch (error) {
    console.log(error);
  }
}
getUser();