Promise

什么是promise？

Es6中一个非常重要和好用的特性就是Promise

• 但是初次接触Promise会一脸懵逼，看官方文章也是一头雾水

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

那什么时候我们会来处理异步事件呢？

• 一种很常见的场景应该就是网络请求
• 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回
• 所以往往我们会传入另一个函数，在数据请求成功时，将数据通过传入的函数回调出去
• 如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦
• 但是，当网络请求非常复杂时，就会出现回调地狱

回调地狱有什么问题？

• 正常情况下，不会有什么问题，可以正常运行并且获取我们想要的结果
• 但是，这样的代码难看而且不容易维护
• 我们更加期望的是一种更加优雅的方式来进行这种异步操作
• Promise可以以一种非常优雅的方式来解决这个问题

Promise三种状态

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

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

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

案例一：

 <script>
        new Promise((resolve, reject) => {
            setTimeout(function () {
                // resolve('hello resolve')
                reject('error message')
            }, 1000)
        }).then(data => {
            console.log(data);
        }).catch(err => console.log(err + 'catch'))

</script>

案例二：Promise的all方法使用

<script>
        Promise.all([
            new Promise((resolve, reject) => {
                setTimeout(function () {
                    resolve({ name: '张三', age: 18 })
                }, 1000)

            }),
            new Promise((resolve, reject) => {
                setTimeout(function () {
                    resolve({ name: '李四', age: 18, address: '武汉市' })
                }, 2000)
            })
        ]).then(data => {
            console.log(data);
        })
    </script>

案例三：Promise链式调用

 new Promise((resolve, reject) => {
            console.log('第一次请求');
            setTimeout(function () {
                resolve('aaa')
            }, 3000)

        }).then(res => {
            //第一次处理
            //throw 'err message'
            // return Promise.reject('err')
     		return res + '111'
        }).then(res => {
            return res + '222'
        }).then(res => {
            console.log(res);
        }).catch(err => console.log(err))