promise 学习笔记

发表于 | 阅读次数

promise 是什么

Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。（简单说就是处理异步请求。一个诺言，一个成功，一个失败。）

看个例子

1
var promise = new Promise(function(resolve){
2
    resolve(42);
3
});
4
promise.then(function(value){
5
    console.log(value);
6
}).catch(function(error){
7
    console.error(error);
8
});

运行后，打印出42，为什么会是42呢？带着这个疑惑继续放下看

promise 状态

一个Promise必须处在其中之一的状态：pending, fulfilled 或 rejected.

pending 状态：可以转换到 fulfilled 或 rejected 状态。
fulfilled 状态：不能转换成任何其它状态；必须有一个值，且这个值不能被改变。
rejected 状态：不能转换成任何其它状态；必须有一个值，且这个值不能被改变。

promise 对象

创建 promise 对象

1.new Promise(fn) 返回一个 promise 对象。

2.fn是个函数，fn有两个参数

  • resolve：处理结果成功的时候调用resolve(处理结果值)。
  • reject：处理结果错误的时候调用reject(Error对象)。

then 方法

一个 Promise 必须提供一个 then 方法来获取其值。

Promise 的 then 方法接受两个参数：

promise.then(onFulfilled,onRejected)

1.onFulfilled 和 onRejected 都是函数，如果不是函数，则忽略之。
2.onFulfilled ：resolve(成功)时调用 onFulfilled，必须在promise fulfilled后调用，且promise的value为其第一个参数，不能多次调用。
3.onRejected：reject(失败)时调用 onRejected，必须在promise rejected后调用， 且promise的reason为其第一个参数，不能被多次调用。

.catch只是 promise.then(undefined, onRejected) 的别名而已。

1
Promise.reject(new Error("BOOM!")).catch(function(error){
2
    console.error(error);  // Error: BOOM!
3
});

开始那个例子就变成简单明了，relove(42) 成功是调用function(value){console.log(value)}，所以打印出 42 。

对于一个 promise，它的 then 方法可以调用多次。

1
promise.then(onFulfilled,onRejected).then(onFulfilled,onRejected);
2
promise.then(onFulfilled,onRejected); promise.then(onFulfilled,onRejected);

then 必须返回一个 promise

1
promise2 = promise1.then(onFulfilled, onRejected);

创建 XHR 的promise 对象

1
function ajax(options){
2
  return new Promise(function(resolve,reject){
3
    let {method,url} = options;
4
    let xhr = new XMLHttpRequest();
5
    xhr.open(method,url);
6
    xhr.onload = function(){
7
      if(xhr.status === 200){
8
        resolve(xhr.responseText)
9
      }else{
10
        reject(new Error(xhr.statusText))
11
      }
12
    };
13
    xhr.onerror = function(){
14
      reject(new Error(xhr.statusText))
15
    };
16
    xhr.send()
17
  })
18
}
19
// 运行
20
var promise = ajax({method:'GET',url:'xxx.json'});
21
promise.then(function(value){
22
  console.log(value)
23
},function(reason){
24
  console.error(reason)
25
})
26
// xxx.json
27
{
28
  "name":"jack",
29
  "nationality":"china"
30
}

ajax 只有在通过XHR取得结果状态为200时才会调用 resolve 。而其他情况（取得失败）时则会调用 reject 方法。

当调用成功时，打印出

1
{
2
  "name":"jack",
3
  "nationality":"china"
4
}

我们把 url 地址故意写错，调用失败，将会报错，显示如下

1
Error: Not Found

Promise 是同步还是异步执行

再看个例子

1
console.log(1)
2
setTimeout(function(){
3
  console.log(2)
4
},0)
5
var promise =new Promise(function(resolve){
6
  resolve(3)
7
}).then(function(value){
8
  console.log(value)
9
})
10
console.log(4)

打印出1 4 3 2。

Promise 是异步执行的。有个问题，为什么 setTimeout 模拟异步会比 promise 晚出现呢?

这就涉及到 microtask 和 macrotask 问题。简单说，promise 排在了异步下批执行的第一梯队，而setTimeout 则排在第二梯队。

Promise API

Promise.all 接收一个 promise对象的数组作为参数，当这个数组里的所有promise对象全部变为resolve或reject状态的时候，它才会去调用 .then 方法。

1
var p1 = Promise.resolve(3);
2
var p2 = 1337;
3
var p3 = new Promise(function(resolve) {
4
  setTimeout(resolve, 500, "foo");
5
});
6
Promise.all([p1, p2, p3]).then(function(value) {
7
  console.log(value); // [3, 1337, "foo"] 
8
});

Promise.race 接收一个 promise对象的数组作为参数，只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理。

1
var p5 = new Promise(function(resolve, reject) {
2
  setTimeout(resolve, 500, "five");
3
});
4
var p6 = new Promise(function(resolve, reject) {
5
  setTimeout(reject, 100, "six");
6
});
7
Promise.race([p5, p6]).then(function(value) {
8
  console.log(value)
9
}, function(reason) {
10
  console.log(reason); // "six"
11
  // p6 更快，所以它失败了
12
});