javascript基础系列之Promise

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值

概念

promise只有三种状态（pending|fulfilled|rejected）

Promise构造函数

1
2
3
4
5
6
7
8
9
// Promise构造函数
const p1 = new Promise((resolve, reject)=> {
  setTimeout(() => {
    resolve("success")
  }, 2000);
});
p1.then((res)=> {
  console.log(res);  // 2s后打印'success'
});

静态方法

Promise.all

1
2
3
4
5
6
7
8
9
10
11
12
// Promise.all
const p1 = Promise.resolve(1);
const p2 = 2;
const p3 = new Promise((resolve, reject)=> {
  setTimeout(function(val){
    console.log(arguments);  // ‘hello'
    resolve("world")
  },1000, "hello");  // 在定时器到期，附加参数（第三个参数之后）会作为参数参数回调函数
})
Promise.all([p1, p2, p3]).then(values=> {
  console.log(values);  // [1,2, 'world']
});

Promise[allSettled|any|race]

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
// Promise.allSettled 返回所有指定的Promise都已经fulfilled或rejected后的对象数组, 适合彼此有依赖的场景
// Promise.any 任何一个promise状态变成fulfilled，就返回该promise的结果
// Promise.race 任何一个promise状态变成fulfilled或者rejected, 返回的Promise就会解决或拒绝
const p1 = new Promise((resolve, rejected)=> {
  setTimeout(() => {
    rejected("failed");
  }, 2000);
});
const p2 = new Promise((resolve, rejected)=> {
  setTimeout(() => {
    rejected(1);
  }, 1000);
});
const p3 = new Promise((resolve, rejected)=> {
  setTimeout(() => {
    resolve(2);
  }, 3000);
});
Promise.allSettled([p1, p2, p3]).then((res)=> {
  console.log(res);  // [{"status":"rejected","reason":"failed"},{"status":"rejected","reason":1},{"status":"fulfilled","value":2}]  rejected的值也能拿到
});

Promise.any([p1,p2,p3]).then(res=> {
  console.log(res);   // 2, p3的状态变成fulfilled，所以返回p2的结果
});

Promise.race([p1, p2, p3]).then((res)=>{
  console.log(res);   // 
}).catch(err=> {
  console.log(err);   // 1, p1的更快把状态变成rejected
});

Promise[rejected|resolve]

1
2
3
4
5
6
7
8
9
10
// Promise.rejected 返回带有rejected结果的Promise对象
// Promise.resolve 返回带有resolve结果的Promise对象
function rejected(result) {
  console.log("rejected__", result);  //fail
}
function resolved(result) {
  console.log("fulfilled__", result);  // success
}
Promise.reject("fail").then(resolved, rejected); 
Promise.resolve("success").then(resolved, rejected);

实例方法

Promise.prototype[then|catch|finally]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Promise.prototype.then(onFulfilled[, onRejected]) 具有两个参数（成功和失败的回调函数）
// Promise.prototype.catch(onRejected) 异常捕获的回调
// Promise.prototype.finally(onFinally) promise状态无论是fulfilled还是rejected都回走onFinally回调函数
const p1 = new Promise((resolve, reject)=> {
  resolve("hello");
});

p1.then(res=> { // resolve结果走这里
  console.log(res);
  throw "fail";
}).catch(err=> { // rejected结果走这里
  console.log(err);
  return "world";
}).finally(()=> {  // 不管Promise执行完状态是fulfilled或rejected，都会走finally
  console.log("promise finally");
});

参考文档

Promise