ES6 Promise 最佳实践介绍

对于一些复杂的代码模块，不够熟悉的话就会感觉比较绕。比如以下这些实际应用中的经验。

异步Promise的关键两点

在业务实际使用的过程中，我们会尽量的把所有的异步操作都封装成Promise，方便其他地方直接调用，摈弃了过往的陈旧callback写法，比如我们封装了一个类 classA，里面需要有一些准备工作才能被外界使用，以前我们可能会提供 ready(callback) 方法，那么现在就可以这样 ready().then()。

另外，在实例开发中，我们应当尽量把new Promise封装到内部底层，而不是在业务层面再实例化进行操作，异步工具类和axios请求之类的都应该在底层做好开发

const func = () => {
    const promise = new Promise((resovle, reject) => {
        //  还没有导入axios包，用异步的计时器替代也是一样的
        setTimeout(() => {
            console.log('模拟axios请求');
            resovle('succuess');
        }, 1000)
    })
    return promise;
}

// 模拟业务层使用
func().then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
})

其实处理和封装异步关键就在于两个问题

定义异步执行的内容。比如发送一个网络请求，设置一个定时器，读取一个文件的内容等等
捕获到异步内容执行结束的时期。比如上述的请求返回数据的时期，定时器结束的时期，文件读取完毕的时期，综上所述的时期其实就是触发回调的时机

当通过 new Promise 初始化实例的时候，就定义了异步任务的执行内容，即 Promise 主体。然后 Promise 给我们两个函数 resolve 和 reject 来让我们明确指出任务结束的时机，也就是告诉 Promise 执行的内容和结束的时机就行了，不用像 callback 那样，需要把处理过程也嵌套写在里面，而是在原来 callback 的地方调用一下 resolve（成功）或 reject（失败）来标识任务结束了。

在实际开发中，不管业务模块或者老代码多么复杂，只需要抓住上述两点去进行改造，就能正确地将所有异步代码进行 Promise 化。所有异步甚至同步逻辑都可以 Promise 化，只要抓住 任务内容和 任务结束时机这两点就可很清晰的来完成封装。

如何避免冗余封装？

现在有很多的库已经开始支持Promise实例，并且提供了一定的TS类型支持，在使用前请务必查清楚文档再做封装，有的库既支持 callback 形式，也支持 Promise 形式。
冗余封装的经典例子就比如下面的axios：

const getData = () => {
  return new Promise((resolve) => {
    axios.get(url).then((data) => {
      resolve(data)
    })
  })
}

另一个案例就是，有时我们会需要构建微任务或者将同步执行的结果数据，以 Promise 的形式返回给业务，会容易写成下面的冗余写法：

const getData = () => {
  return new Promise((resolve) => {
    const a = 1;
    const b = 2;
    const c = a + b;
    resolve(c);
  })
}

实际上我们完全可以用Promise.resolve快速构建一个Promise 对象来优化这个冗余的封装：

const getData = () => {
  const a = 1;
  const b = 2;
  const c = a + b;
  return Promise.resolve(c);
}

异常处理

在上一篇文章Promise基础里，我介绍了尽量通过 catch() 去捕获 Promise 异常，需要说明的是，一旦被 catch 捕获过的异常，将不会再往外部传递，除非在 catch 中又触发了新的异常。

有个很经典的案例，如下面代码，第一个异常被捕获后，就返回了一个新的 Promise，这个 Promise 对象没有异常，将会进入后面的 then() 逻辑：

const p = new Promise((resolve, reject) => {
  reject('异常啦'); // 或者通过 throw new Error() 跑出异常
}).catch((err) => {
  console.log('捕获异常啦'); // 进入
}).catch(() => {
  console.log('还有异常吗'); // 不进入
}).then(() => {
  console.log('成功'); // 进入
})

如果 catch 里面在处理异常时，又发生了新的异常，将会继续往外冒，这个时候我们不可能无止尽的在后面添加 catch 来捕获，所以 Promise 有一个小的缺点就是最后一个 catch 的异常没办法捕获（当然实际出现异常的可能性很低，基本不造成什么影响）。

async await

我们可以通过这组async await在实例使用中派上大用场，配合Promise的使用，使代码的可读性大大的提高，”回调“这个东西也就再也没有了他的踪影

const getDataOne = async () => {
    const data = await axios.get(url);
    return data;
  }
  // 等效于
  const getDataTwo = () => {
    return axios.get(url).then((data) => {
      return data
    });
  }

对 async await 很多人都会用，但要注意几个非常重要的点：

await 同一行后面的内容对应 Promise 主体内容，即同步执行的
await 下一行的内容对应 then()里面的内容，是异步执行的
await 同一行后面应该跟着一个 Promise 对象，如果不是，需要转换（如果是常量会自动转换）。
async 函数的返回值还是一个 Promise 对象

我们再举一个例子：

async function getData() {
  // await 不认识后面的 setTimeout，不知道何时返回
  const data = await setTimeout(() => {
    return;
  }, 3000)
  console.log('3 秒到了')
}

正确写法：

async function getData() {
  const data = await new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 3000)
  })
  console.log('3 秒到了')
}

Promise 最佳实践