Promise

Promise

Promise是异步编程的一种解决方案。

我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。

所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。

如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。

当网络请求非常复杂时，就会出现回调地狱。

这样代码难看而且不容易维护。
我们更加期望的是一种更加优雅的方式来进行这种异步操作。

Promise可以以一种非常优雅的方式来解决这个问题

基本语法

首先用一个定时器来模拟异步事件：

假设下面的data是从网络上2秒后请求的数据

console.log就是我们的处理方式。

setTimeout(() => {
        let data = 'hello'
        console.log(data);
     }, 2000)

这是我们过去的处理方式，我们将它换成Promise代码

new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('hello')
                reject('错误')
            }, 2000)
        }).then((data) => {
            console.log(data); //hello
        }).catch((err) => {
            console.log(err);
        })

1、new Promise 创建一个Promise对象

2、小括号中((resolve, reject) => {})也很明显就是一个函数。

3、在创建Promise时，传入的这个函数是固定的（一般我们都会这样写）

4、resolve和reject它们两个也是函数，通常情况下，我们会根据请求数据的成功和失败来决定调用哪一个。

5、如果是成功的，那么通常我们会调用resolve(messsage)，这个时候，我们后续的then会被回调。

6、如果是失败的，那么通常我们会调用reject(error)，这个时候，我们后续的catch会被回调。

三种状态

pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。

fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()

reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

promise另外一种处理方式

new Promise((resolve, reject) => {
            // resolve("成功")
            reject('失败')
        }).then(
            data => {
                console.log(data);
            }, err => {
                console.log(err);
            })

直接都写在.then()里,不用写.catch()

Promise链式调用

<script>
        new Promise((resolve) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000)
        }).then(res => {
            console.log(res, '第一次拿到数据并进行处理');

            return new Promise((resolve) => {
                resolve(res + 'bbb')
            }).then(res => {
                console.log(res, '第二次拿到数据并进行处理');

                return new Promise((resolve) => {
                    resolve(res + 'ccc')

                }).then(res => {
                    console.log(res, '第三次拿到数据并进行处理');

                })
            })
        })
    </script>

进行链式调用

new Promise((resolve) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000)
        }).then(res => {
            console.log(res, '第一次拿到数据并进行处理'); //aaa 第一次拿到数据并进行处理
            return Promise.resolve(res + 'bbb')
        }).then(res => {
            console.log(res, '第二次拿到数据并进行处理'); //aaabbb 第二次拿到数据并进行处理
            return Promise.resolve(res + 'ccc')
        }).then(res => {
            console.log(res, '第三次拿到数据并进行处理'); //aaabbbccc 第三次拿到数据并进行处理
        })

无论是then还是catch都可以返回一个Promise对象。所以，我们的代码其实是可以进行链式调用的：

我们直接通过Promise包装了一下新的数据，将Promise对象返回了

Promise.resovle()：将数据包装成Promise对象，并且在内部回调resolve()函数

Promise.reject()：将数据包装成Promise对象，并且在内部回调reject()函数

链式调用简写

new Promise((resolve) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000)
        }).then(res => {
            console.log(res, '第一次拿到数据并进行处理'); //aaa 第一次拿到数据并进行处理
            return res + 'bbb'
        }).then(res => {
            console.log(res, '第二次拿到数据并进行处理'); //aaabbb 第二次拿到数据并进行处理
            return res + 'ccc'
        }).then(res => {
            console.log(res, '第三次拿到数据并进行处理'); //aaabbbccc 第三次拿到数据并进行处理
        })

如果我们希望数据直接包装成Promise.resolve，那么在then中可以直接返回数据

注意上面的代码中，讲return Promise.resovle(data)改成了return data

结果依然是一样的

链式调用中有错误时

new Promise((resolve) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000)
        }).then(res => {
            console.log(res, '第一次拿到数据并进行处理'); //aaa 第一次拿到数据并进行处理
            return Promise.resolve(res + 'bbb')
        }).then(res => {
            console.log(res, '第二次拿到数据并进行处理'); //aaabbb 第二次拿到数据并进行处理
            return Promise.reject('err message')
        }).then(res => {
            console.log(res, '第三次拿到数据并进行处理'); //aaabbbccc 第三次拿到数据并进行处理
        }).catch(err => {
            console.log(err);
        })

Promise.all()方法

Promise.all(iterable) 方法返回一个 Promise 实例

此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）

如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。

var p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('P1')
            }, 500)
        });
        var p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('P2')
            }, 500)
        });
        // 同时执行p1和p2，并在它们都完成后执行then:
        Promise.all([p1, p2]).then(results => {
            console.log(results); // 获得一个Array: ['P1', 'P2']
        });