34 – Promise 简介

原文地址：https://dev.to/bhagatparwinder/promises-introduction-5d30

导读

回调函数对于处理耗时任务或后续会被阻塞的操作很有帮助，但我们也看到了它的一些缺点，特别是回到地狱。

为了解决回调函数的弊端，引入了 promise，它俩之间的关键区别是什么时候使用回调，我们可以向函数中传递一个回调，然后等到执行回调函数后可以得到结果。而在 promise 中，我们是在 promise 的返回值中使用回调。

优势

1. Promise 和 回调函数当在异步操作中使用时，都是为了解决相同的问题；Promise 加了一层抽象使得代码更整洁、函数化以及更少的错误发生；
2. 我们不需要知道将使用异步操作返回的值的回调；
3. Promise 是链式调用可以是代码结构扁平化而不会引起回调地狱问题；
4. Promise 内置了错误处理机制；

创建

我们使用 Promise 构造函数来创建 promise:

const myPromise = new Promise();

一个 promise 就像一张收据说我将来需要你的值，Promise 一旦完成（resolve 返回成功信息或 reject 返回错误信息），我们将会执行后续动作（例如从后端获取员工信息）。

Resolve

promise 为了完成异步任务，时间是不固定的。当异步任务还在执行的时候，promise 处在 pending 状态。一旦完成它将返回值（通常是从异步任务返回的）。

const myPromise = new Promise((resolve) => {
    setTimeout(() => {
        resolve("finished async operation");
    }, 2000);
});

myPromise.then((response) => {
    console.log(response); // finished async operation
});

发生了什么：

1. Promise 接受了一个回调函数；
2. 回调函数内部执行了一个异步任务；
3. 若任务完成 promise 将会 resolved；
4. 我们使用 setTimeout 来模拟耗时 2s 的异步任务；
5. 当 2s 后 或异步任务完成，我们将得到成功的信息或从后端返回的数据。

Reject

有时候异步任务并不总是按预期返回，我们可能会遇到错误。这种情况下，我们使用 reject 来提示失败信息。

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("an error has occurred");
    }, 2000)
});

myPromise.then((response) => {
    console.log(response);
}, (error) => {
    console.log(error); // an error has occurred
});

promise 中的回调接收两个参数：resolve 和 reject。promise 中的then 操作符能处理两个回调函数，第一个是处理成功的（resolve），第二个是处理失败的（reject）。

在这个例子中，myPromise 2 秒后产生一个错误，只要使用它的都会得到提示：“an error has occurred”。

这篇文章只是简单的介绍了 promise 的一些知识，在下一篇文章中，我们将会重温链式操作、错误处理以及并行执行 promise。