Promise高级用法，干掉所有回调函数

流程式写法

需求：
2s后执行函数fn1，之后再过3s执行函数fn2

setTimeout(() => {
	fn1();
	
	setTimeout(() => {
		fn2();
	}, 3000);
}, 2000)

上面👆那种流程式的写法虽然可是实现功能，但是存在回调嵌套问题，无论是书写还是阅读都极其不便，有没有更优雅的方式呢？有

更优雅的解法

1 创建一个deferred的Promise

function createDeferredPromise() {
  let resolve: Function;
  let reject: Function;

  const promise = new Promise((_resolve, _reject) => {
    resolve = _resolve;
    reject = _reject;
  });
  return { resolve, reject, promise };
}

2 封装

setTimeout，将resolve作为回调函数传给setTimeout

  const createDeferedPromiseHoc = (fn) => {
    const { resolve, promise } = createDeferedPromise();
    return (...args: any) => {
      fn(...args, resolve);
      return promise;
    };
  };


  const delay1s = createDeferedPromiseHoc((resolve) => {
    setTimeout(resolve, 1000);
  });
  
  const delay2s= createDeferedPromiseHoc((resolve) => {
    setTimeout(resolve, 2000);
  });

3 使用异步方式调用

await delay1s();
fn1();
await delay2s();
fn2();

扩展

使用该方法封装其他异步函数，来解决回调地狱问题
重点在于createDeferedPromiseHoc函数