从回调函数到Promise及实战案例，一次搞懂异步编程

函数的执行分为同步和异步两种。
同步即为 同步连续执行，通俗点讲就是做完一件事，再去做另一件事。
异步即为 先做一件事，中间可以去做其他事情，稍后再回来做第一件事情。

基于Callback 与 Promise 以及 Async/await实现下面的案例

三个红绿黄三个颜色的灯，然后每个灯之间会进行切换，比如绿灯1s亮然后黄灯亮1s，最后是红灯1s，一个流程过后则是进行一个循环，重新到绿灯亮。

Callback

所有异步编程方案的根基
有调用者定义，交给执行者的函数。将函数作为参数传递

// 实现亮灯的基本方法方法
const lamp = (color, callback) => {
  // 打印灯的颜色
  console.log(`灯颜色: ${color}`);
  // 使用定时器，延时一秒
  setTimeout(() => {
    // 触发回调函数
    callback();
  }, 1000);
};

函数依次交替执行

lamp("red", () => {
  lamp("yellow", () => {
    lamp("green", () => {
      console.log("执行完成");
    });
  });
});

// 控制台打印
// 灯颜色: red
// 灯颜色: yellow
// 灯颜色: green
// 执行完成

通过递归使函数循环依次交替执行

const run = () =>{
  lamp("red", () => {
    lamp("yellow", () => {
      lamp("green", () => {
        run();
      });
    });
  });
}
run()
// 控制台打印
// 灯颜色: red
// 灯颜色: yellow
// 灯颜色: green
// 执行完成

Promise

CommonJs 为异步编程提供统一、更合理、更强大的解决方案

// 实现亮灯的基本方法方法
const lamp = (color) => {
  // 返回一个promise对象
  return new Promise((resolve, reject) => {
    // 打印灯的颜色
    console.log(`灯颜色: ${color}`);
    // 使用定时器，延时一秒
    setTimeout(() => {
      // 触发成功承诺
      resolve();
    }, 1000);
  });
};

函数依次交替执行

// 类似callback方式实现(未解决了回调地狱的问题)
lamp("red").then(() => {
  lamp("yellow").then(() => {
    lamp("green").then(() => {
      console.log("执行完成");
    });
  });
});
// 控制台打印
// 灯颜色: red
// 灯颜色: yellow
// 灯颜色: green
// 执行完成

// 链式调用方式实现 (解决了回调地狱的问题，语义相对清晰)
// Promise 对象的then方法会返回一个全新的Promise对象
// 后面的then方法就是在为上一个then返回的Promise注册回调
// 前面的then方法中回调函数的返回值会作为后面then方法的回调参数
// 如果回调中返回的是Promise，那后面的then方法的回调就会等待它的结束
lamp("red")
  .then(() => {
    return lamp("yellow");
  })
  .then(() => {
    return lamp("green");
  })
  .then(() => {
    console.log("执行完成");
  });
// 控制台打印
// 灯颜色: red
// 灯颜色: yellow
// 灯颜色: green
// 执行完成

通过递归使函数循环依次交替执行

const run = () => {
  lamp("red")
    .then(() => {
      return lamp("yellow");
    })
    .then(() => {
      return lamp("green");
    })
    .then(() => {
      run();
    });
};
run()
// 控制台打印
// 灯颜色: red
// 灯颜色: yellow
// 灯颜色: green
// 执行完成

Generator

// 实现亮灯的基本方法方法
const lamp = (color) => {
  // 返回一个promise对象
  return new Promise((resolve, reject) => {
    // 打印灯的颜色
    console.log(`灯颜色: ${color}`);
    // 使用定时器，延时一秒
    setTimeout(() => {
      // 触发成功承诺
      resolve();
    }, 1000);
  });
};

函数依次交替执行

function* run() {
  yield lamp("red");
  yield lamp("green");
  yield lamp("yellow");
}

const co = run();
co.next()
  .value.then(() => {
    return co.next().value;
  })
  .then(() => {
    return co.next().value;
  })
  .then(() => {
    return co.next().value;
  });

通过递归使函数循环依次交替执行

function* run() {
  yield lamp("red");
  yield lamp("green");
  yield lamp("yellow");
}

const run2 = () => {
  const co = run();
  co.next()
    .value.then(() => {
      return co.next().value;
    })
    .then(() => {
      return co.next().value;
    })
    .then(() => {
      return co.next().value;
    })
    .then(() => {
      run2();
    });
};

run2();

Async/Await语法糖 ECMA2017

// 实现亮灯的基本方法方法
const lamp = (color) => {
  // 返回一个promise对象
  return new Promise((resolve, reject) => {
    // 打印灯的颜色
    console.log(`灯颜色: ${color}`);
    // 使用定时器，延时一秒
    setTimeout(() => {
      // 触发成功承诺
      resolve();
    }, 1000);
  });
};

// 执行方法
const run = async () => {
  await lamp("red");
  await lamp("green");
  await lamp("yellow");
  run();
};

// 执行
run()

callback转换成promise

需求在写小程序的时候有很多wx.xxx 方法不支持 promise 模式调用，但是支持 success 与 fail 的callback回调方式。所以如何有效的封装一个函数，优雅的调用 wx.xxx

const promiseFn = function (func, params = {}) {
  // 返回promise对象
  return new Promise((resolve, reject) => {
    // 传入参数混入 success 与 fail
    const args = Object.assign(params, {
      success: (res) => {
        // 成功承诺
        resolve(res);
      },
      fail: (error) => {
        // 失败承诺
        reject(error);
      },
    });
    // 调用传入的函数
    func(args);
  });
};

// 模拟测试函数
const wx = (options) => {
  setTimeout(() => {
    options.success && options.success(options.key);
  }, 100);
};

// 通过promiseFn 调用 wx 函数，并且传递对象为参数
promiseFn(wx, { key: 'hello' })
  .then((res) => {
    console.log(res);
  });
// 控制台打印
// hello

并行请求如何处理

进入一个页面或者一个组件，经常会向后端发送2个或更多的请求。如何使用promise优雅的处理呢

// 模拟ajax请求发送
const ajax = (data) =>
  new Promise((resolve, _reject) => {
    setTimeout(() => {
      console.log(`ajax: ${data.key}`);
      resolve(data);
      // 因为使用了随机数延时，所以请求先后可能不一致
    }, Math.round(Math.random() * 1000));
  });

const loadData = async () => {
  // showLoading()
  // 如果需要等待三个请求完毕
  const [ res1,res2,res3 ] = await Promise.all([
    ajax({ key: "请求1" }),
    ajax({ key: "请求2" }),
    ajax({ key: "请求3" }),
  ]);
  console.log(res1,res2,res3)
  // hiddenLoading()
};

loadData();

并行请求加入了串行如何处理

请求1``请求2``请求3 同时提交，请求4 依赖于请求2的结果

// 模拟ajax请求发送
const ajax = (data) =>
  new Promise((resolve, _reject) => {
    setTimeout(() => {
      console.log(`ajax: ${data.key}`);
      resolve(data);
    }, Math.round(Math.random() * 1000));
  });

// 组合请求2 结束后 执行请求4
const ajax2And4 = async () => {
  const res = await ajax({ key: "请求2" });
  const res2 = await ajax({ key: res.key + "_请求4" });
  return res2;
};
// 加载方法
const loadData = async () => {
  // showLoading()
  const [res1, res2, res3] = await Promise.all([
    ajax({ key: "请求1" }),
    // 调用组合封装的函数
    ajax2And4(),
    ajax({ key: "请求3" }),
  ]);
  console.log(res1, res2, res3);
  // hiddenLoading()
};
loadData();

链式调用实现方式，当程序较为复杂时 此种写法逻辑不是很清晰且自由度不高

实现ajax请求超时控制方式

只是将实现思路，因为目前的请求类库都已支持超时设置，所以不要在生产代码中使用

// 模拟ajax请求发送
const ajax = (data) =>
  new Promise((resolve, _reject) => {
    setTimeout(() => {
      console.log(`ajax: ${data.key}`);
      resolve(data);
    }, Math.round(Math.random() * 1000));
  });

// 延时函数
const timerOutFn = (timeout) =>
  new Promise((_resolve, reject) => {
    setTimeout(() => reject(new Error("timeout")), timeout);
  });

// 使用新函数包裹 ajax 与延时函数
const ajaxAndTimer = async (params, { timeout = 500 }) => {
  return await Promise.race([ajax(params), timerOutFn(timeout)]);
};

// 使用
ajaxAndTimer({ key: "请求1" }, { timeout: 200 });

// 控制台打印
// 未超时
// ajax: 请求1
// 超时
// UnhandledPromiseRejectionWarning: Error: timeout