Promise的使用

发表于 | 更新于 | 分类于 | 阅读次数：

Promise 使用

1.实例化

1
2
3
4
5
6
7
// 实例化promise，内部定义的函数会立马执行
function resolver(resolve, reject) {
  setTimeout(function() {
    resolve(‘hello world’)
  }, 100)
}
var promise = new Promise(resolver)

2.实例化不是函数的参数

1
2
3
// 如果实例化时传入的参数不是函数则会报错
var promise = new Promise(111);
// Uncaught TypeError: Promise resolver 111 is not a function

3.then/catch

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
// then方法有两个参数
// 第一个参数如果是函数，只有promise resolve时才会执行；如果不是函数则会忽略
// 第二个参数只有reject时才会执行
var promise = new Promise(function (resolve, reject) {
  setTimeout(function() {
    resolve(‘hello world’)
  }, 100)
})
promise.then(function (res) {
  console.log(res)
}, function (err) {
  console.log(err)
})
// 100ms后打印‘hello world’

// catch方法只有一个参数，promise reject时执行
var promise1 = new Promise(function (resolve, reject) {
  setTimeout(function() {
    reject('something wrong’)
  }, 100)
})
promise1.then(function(res) {
  console.log(res)
}).catch(function(err) {
  console.log(err)
})
// 100ms后打印‘something wrong’

// 再看一个改变题，接上一个定义的promise1
promise1.then(function(res) {
  console.log(res)
}, function(err) {
  console.log('then err: ' + err)
}).catch(function(err) {
  console.log('catch err: ' + err)
})
// 100ms后仅打印‘then err: something wrong’
// promise1只有在执行错误或者then第二个参数返回promise为reject时才会执行catch参数方法

promise1.then(function(res) {
  console.log(res)
}, 'reject').catch(function(err) {
  console.log('catch err: ' + err)
})
// 100ms后打印‘catch err: something wrong’
// 如果then第二个参数不是函数，则会被忽略，并且then返回的promise会执行catch参数

// 同一个promise多次调用then
promise.then(function(res) {console.log('then1: ' + res)})
promise.then(function(res) {console.log('then2: ' + res)})
// 一个promise添加了多个then，当promise resolve时会依次执行then执行栈，并且每个回调的值是一样的

// 多个then执行栈，但是同时链接了一个
promise.then(function(res) {
  console.log('then1: ' + res)
  return 'then1'
}).then(function(res) {
  console.log('then3: ' + res)
})
promise.then(function(res) {
  console.log('then2: ' + res)}
  return 'then2'
)
// 依次打印
// "then1: hello world"
// "then2: hello world"
// "then3: then1"

// resolve返回promise与then/catch返回promise的区别
// promise2 = promise1.then(() => promise3)
// promise1 resolve返回promise，则promise1必须等待resolve的promise执行结果，并且依据其最终状态来改变自己的状态
// promise2需等待promise3的执行结果，依据promise3的执行结果
// 其实处理过程时相同的，then方法添加到执行栈时会执行then函数，如果返回的是promise，则会执行promise.then(),然后满足则执行resolve(promise2, value)
var resolvePromise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve(new Promise(function(resolve, reject) {
      reject('resolve promise error')
    }))
  })
})

resolvePromise.then(function(res) {
  console.log(res)
}).catch(function (err) {
  console.log('catch: ' + err)
})
// 最终输出‘catch： resolve promise error’
// Promise.all(iterable)/Promise.race(iterable) iterable所有的promise实例都会执行，并且无法中断，当然除非自己做标记进行终止

题一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
console.log(111);
var s = new Promise((resolve, reject) => {
  console.log(22);
  resolve(
    new Promise(resolve => {
      console.log(555);
      resolve(444);
    })
  );
  console.log(3333);
});
s.then(res => console.log(res));

// 111
// 22
// 555
// 3333
// 44

题二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
console.log(111);
var s = new Promise((resolve, reject) => {
  console.log(22);
  resolve(function() {
    console.log(555);
  });
  console.log(3333);
});
s.then(res => console.log(res));

// 111
// 22
// 3333
// ƒ () {console.log(555)}