Promise

发表于   |   分类于

什么是 Promise

Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。

A promise is a placeholder for the result of an asynchronous operation.

Promise 的特点

1. 对象的状态不受外界影响

Promise 对象代表一个异步操作，有三种状态：pending、fulfilled 和rejected。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。

Promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。

如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise 在新建后就会立即执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

缺点

  1. 无法取消（其实可以取消，但是不在标准方案内）
  2. 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。
  3. 当处于 pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

基本用法

创建 promise 实例

1
2
3
4
5
6
7
8
9
const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise 实例生成以后，可以用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数。

其中 then 方法可以接受两个回调函数作为参数，分别处理 resolved 和 rejected 的情况。

resolve 和 reject

如果调用 resolve 函数和 reject 函数时带有参数，那么它们的参数会被传递给回调函数。reject 函数的参数通常是 Error 对象的实例，表示抛出的错误；resolve 函数的参数除了正常的值以外，还可能是另一个 Promise 实例：

1
2
3
4
5
6
7
8
const p1 = new Promise(function (resolve, reject) {
  // ...
});

const p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

上面代码中，p1 和 p2 都是 Promise 的实例，但是 p2 的resolve 方法将 p1 作为参数，即一个异步操作的结果是返回另一个异步操作。

p1 的状态决定了 p2 的状态。如果 p1 的状态是 pending，那么 p2 的回调函数就会等待 p1 的状态改变；如果 p1 的状态已经是 resolved 或者 rejected，那么 p2 的回调函数将会立刻执行。

注意

调用 resolve 或 reject 并不会终结 Promise 的参数函数的执行。

1
2
3
4
5
6
7
8
new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

一般来说，调用 resolve 或 reject 以后，Promise 的使命就完成了，后继操作应该放到 then 方法里面，而不应该直接写在 resolve 或 reject 的后面。所以，最好在它们前面加上 return 语句，这样就不会有意外。

1
2
3
4
5
new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})

then()

then 方法返回的是一个新的 Promise 实例（注意，不是原来那个 Promise 实例）。因此可以采用链式写法，即 then 方法后面再调用另一个 then 方法。

1
2
3
4
5
6
getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("resolved: ", comments),
  err => console.log("rejected: ", err)
);

上面代码中，第一个 then 方法指定的回调函数，返回的是另一个 Promise 对象。

catch()

如果 Promise 状态已经变成 resolved，再抛出错误是无效的。

1
2
3
4
5
6
7
8
const promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个 catch 语句捕获。

1
2
3
4
5
6
7
getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});

catch 方法返回的还是一个 Promise 对象，因此后面还可以接着调用 then 方法。

finally()

finally 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

下面是一个例子，服务器使用 Promise 处理请求，然后使用 finally 方法关掉服务器。

1
2
3
4
5
server.listen(port)
  .then(function () {
    // ...
  })
  .finally(server.stop);

finally 方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是 fulfilled 还是 rejected。这表明，finally 方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

all()

Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

1
const p = Promise.all([p1, p2, p3]);

Promise.all 方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

race()

1
const p = Promise.race([p1, p2, p3]);

上面代码中，只要 p1、p2、p3 之中有一个实例率先改变状态，p 的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给 p 的回调函数。

应用：设置 Promise 超时时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var p = trySomeAsyncThing()

Promsie.race([
    p,
    new Promsie(function(_, reject) {
        setTimeout(function () {
            reject("Timeout!!")
        }, 3000)
    })
])
.then(
    success,
    error
)

Promise.resolve()

有时需要将现有对象转为 Promise 对象，Promise.resolve 方法就起到这个作用。

Promise.resolve 方法的参数分成四种情况。

1. 参数是一个 Promise 实例

如果参数是 Promise 实例，那么Promise.resolve 将不做任何修改、原封不动地返回这个实例。

2. 参数是一个 thenable 对象

thenable 对象指的是具有 then 方法的对象，比如下面这个对象。

1
2
3
4
5
let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

Promise.resolve 方法会将这个对象转为 Promise 对象，然后就立即执行 thenable 对象的 then 方法。

1
2
3
4
5
6
7
8
9
10
let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

3. 参数不是具有 then 方法的对象，或根本就不是对象

如果参数是一个原始值，或者是一个不具有 then 方法的对象，则 Promise.resolve 方法返回一个新的 Promise 对象，状态为 resolved。

1
2
3
4
5
6
const p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});
// Hello

4. 不带有任何参数

Promise.resolve() 方法允许调用时不带参数，直接返回一个 resolved 状态的 Promise 对象。

所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用 Promise.resolve() 方法。

1
2
3
4
5
const p = Promise.resolve();

p.then(function () {
  // ...
});

Promise.reject()

Promise.reject(reason) 方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

1
2
3
4
5
6
7
8
const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

应用

加载图片

我们可以将图片的加载写成一个 Promise，一旦加载完成，Promise 的状态就发生变化。

1
2
3
4
5
6
7
8
const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
};

Promise 复杂链式调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const wait = time => new Promise(
  res => setTimeout(() => res(), time)
);

wait(200)
  // onFulfilled() can return a new promise, `x`
  .then(() => new Promise(res => res('foo')))
  // the next promise will assume the state of `x`
  .then(a => a)
  // Above we returned the unwrapped value of `x`
  // so `.then()` above returns a fulfilled promise
  // with that value:
  .then(b => console.log(b)) // 'foo'
  // Note that `null` is a valid promise value:
  .then(() => null)
  .then(c => console.log(c)) // null
  // The following error is not reported yet:
  .then(() => {throw new Error('foo');})
  // Instead, the returned promise is rejected
  // with the error as the reason:
  .then(
    // Nothing is logged here due to the error above:
    d => console.log(`d: ${ d }`),
    // Now we handle the error (rejection reason)
    e => console.log(e)) // [Error: foo]
  // With the previous exception handled, we can continue:
  .then(f => console.log(`f: ${ f }`)) // f: undefined
  // The following doesn't log. e was already handled,
  // so this handler doesn't get called:
  .catch(e => console.log(e))
  .then(() => { throw new Error('bar'); })
  // When a promise is rejected, success handlers get skipped.
  // Nothing logs here because of the 'bar' exception:
  .then(g => console.log(`g: ${ g }`))
  .catch(h => console.log(h)) // [Error: bar]
;

如何取消一个 promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const wait = (
  time,
  cancel = Promise.reject()
) => new Promise((resolve, reject) => {
  const timer = setTimeout(resolve, time);
  const noop = () => {};

  cancel.then(() => {
    clearTimeout(timer);
    reject(new Error('Cancelled'));
  }, noop);
});

const shouldCancel = Promise.resolve(); // Yes, cancel
// const shouldCancel = Promise.reject(); // No cancel

wait(2000, shouldCancel).then(
  () => console.log('Hello!'),
  (e) => console.log(e) // [Error: Cancelled]
);

Promise 与 async & await

Understand promises before you start using async/await

Promise 转换为 async & await

Promise 写法：

1
2
3
4
5
6
7
8
9
function getFirstUser() {
    return getUsers().then(function(users) {
        return users[0].name;
    }).catch(function(err) {
        return {
          name: 'default user'
        };
    });
}

改为 async & await 的写法：

1
2
3
4
5
6
7
8
9
10
async function getFirstUser() {
    try {
        let users = await getUsers();
        return users[0].name;
    } catch (err) {
        return {
            name: 'default user'
        };
    }
}

awaiting multiple values

方案一

1
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

方案二（不推荐）

1
2
3
4
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

相关链接

Promise 必知必会（十道题）
史上最易读懂的 Promise/A+ 完全实现
Master the JavaScript Interview: What is a Promise?
Promise 对象