Promise的使用

在长篇大论之前，我先说几点我在痛苦中总结的精髓。这个再网上其他地方基本是看不到的。每次看别人的文章，虽然可能很详细，但是对于当时还是非常小白的我来说根本没办法去理解。

1. .catch就是.then中处理reject的函数的另一种写法，当在then中有对reject抛出的数据做一些逻辑处理时，.catch是不会触发，当.then中没有对reject抛出的异常做处理时，才会触发.catch
2. catch写在一连串.then()之后.then().then()…then().catch()，无论哪一个.then里抛出了异常会触发.catch。
3. promise或者.then()中代码出错或者主动reject()都会导致抛出异常。
4. 每一个.then中返回的都是一个Promise对象，这也是为啥可以一直.then的原因。
5. 只要是异步操作都可以写在new Promise之中，在一个代码块之中只能有一个resolve()||reject(),也就是在这俩出现之后，这个代码块之中再次出现都不会生效，代码块就是一个大括号包着的东西{ 。。。}。
6. 差一点忘记一个很重要的东西，resolve(res)中的值，就是你异步操作，获取到的值，然后通过reslove()传到.then(res=>{console.log(res)})中，这样就不用一层套一层的处理数据，从而避免了回调地狱的产生。

 function guess大小() {
            let num = parseInt(Math.random() * 6 + 1)
            return new Promise((resolve, reject) => {
                if (num > 3) {
                    console.log('大');
                    resolve('then中的大')
                    console.log('大2');
                } else {
                    console.log('小');
                    reject('then中的小')
                    console.log('小2'); 
                }
                console.log('开始啦1');
                setTimeout(() => {
                    resolve(11111)
                    console.log(123);
                }, 000);
                console.log('开始啦2');
                setTimeout(() => {
                    console.log(66666666);
                }, 2000);
            }
            )
        }
        guess大小().then(
            //下面这两个是es6中函数的写法，详情参见箭头函数
            res=>{
                //当为小时，就不会进入这一层，下面一层.then中的res就位undefined
                console.log(res);
                // return '2222'
                return new Promise((resolve,reject)=>{
                    resolve (33333)
                })
            },
            rej=>{
                console.log(rej);
            }
        ).then(res=>{
            
            console.log(res);  
        })
        依次打印为
        大
        大二
        开始啦1
        开始啦2
        then中的大
        '333'
        '123'
        '456'
        '66666666'

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

通过上面代码以及打印结果，你不难发现，resolve,reject无论写在哪里，无论是同步代码中或者异步代码中，都会在这个执行之后，执行then,resolve和reject也是一个异步操作，在和这个异步操作处于同一个异步或者同步代码，优于.then中的代码先执行.setTimeout就是一个异步的代码,无论延迟时间是多少。

第一次接触某些知识可能有些绕，自己一定要动手实践下。编程不像是读书，你看了很多文章，就会对应的增加你很多知识。开发更多的像是健身，你看的健身相关方面的知识再多，带给你最多的可能就是和别人讨论的资本，但他真的对增加你身上的肌肉没有多少帮助。

想成为大牛，没有捷径可言。撸起你的双手，你敲的每一行有效代码，都会见证你的成长。

promise除了以上使用，还有两个不常用的使用方式，如果你感觉上面的还没有彻底理解，你完全可以不看，使用场景很少。

Promise.all()

Promise.race()

Promise.all()的使用

all中文含义’所有的’，由此我们不难猜测，Promise.all()就是同时执行多个Promise对象的。

let fighting = (time) => {
    return new Promise((resolve, reject) => {
        console.log(123);
        setTimeout(() => {
            resolve(`敌人还有${time / 1000}秒到达战场，全军出击`)
        }, time)
    })
}
let p1 = fighting(5000)
let p2 = fighting(10000)
//注意观察all参数数组中每一项的顺序
Promise.all([p1, p2]).then((result) => {
    console.log(result)       // [ '敌人还有5秒到达战场，全军出击', '敌人还有10秒到达战场，全军出击' ]
}).catch((error) => {
    console.log(error)
})
Promise.all([p2, p1]).then((result) => {
    console.log(result)       // [ '敌人还有10秒到达战场，全军出击', '敌人还有5秒到达战场，全军出击' ]
}).catch((error) => {
    console.log(error)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

通过以上代码不难发现，Promise.all()参数是一个数组，数组里的一个个的Promise对象，他们传递给then的结果也是一个数组，这个数组里的顺序是和all中数组顺序一一对应的,只有在这个数组中所有的Promise对象都执行完成才会获得这个结果。catch中会得到最先捕获到的错误。在开发中，Promise.all()主要使用在需要多个异步完成后，才能进行的回调。

Promise.race()的使用

race中文含义’速度’，由此我们依然可以很容易猜到，Promise.race()也是同时执行多个Promise对象的。

let fighting = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`敌人还有${time / 1000}秒到达战场，全军出击`)
        }, time)
    })
}
let p1 = fighting(10000)
let p2 = fighting(5000)
Promise.race([p1, p2]).then((result) => {
    console.log(result)//敌人还有5秒到达战场，全军出击
})
##### Promise.race()中参数和Promise.all()相同，仍然是一个数组，数组里还是一个一个的Promise对象，不同的是传递给then的结果是这些Promise对象中最先执行完成的那个所传递的，是一个字符串形式。开发中，几乎很难碰到Promise.race()的使用场景。

1
2
3
4
5
6
7
8
9
10
11
12
13
14