【JS】浅谈Promise解决回调地狱

promise中文意思是 “承诺”，这个就很有意思，我承诺XXX，就肯定不是马上就干，是承诺完之后就不知道什么时候干了，干完我再告诉你结果；

promise也是这样，就是异步执行，执行后调用传入的回调告诉你执行结果；

promise能传入两个参数：

resolve（执行结果）

reject(异常情况)

标题为解决回调地狱，那么什么为回调地狱那，就是回调里面套回调，一层套一层，可读性极差。

他是怎么解决回调地狱的那，先上一段代码：

<template>
  <div></div>
</template>

<script>
    export default {
        name: "Promise01",
        mounted() {
            let $this = this;
            this.promiseTest(1000)
                .then(data => {
                    console.log('data',data);
                    return this.promiseTest(1000*5);
                }, error => {
                    console.log('err',error);
                })
                .then(data => {
                    console.log('data',data);
                }, error => {
                    console.log('err',error);
                })
        },
        methods: {
            promiseTest(time) {
                return new Promise((resolve, reject) => {
                    console.log('Promise in')
                    if (time < 0) {
                        reject('error：传值异常')
                    }
                    setTimeout(() => {
                        resolve('执行完成')
                    }, time)
                });
            }
        }
    }
</script>

<style scoped>

</style>

运行结果：

只是.then().then() 就能实现原来一次又一次的回调调用，减少层级关系；

异常处理

1. 回调返回

先上代码：

 this.promiseTest(-1)
                .then(data => {
                    console.log('data',data);
                    return this.promiseTest(1000);
                })
                .then(data => {
                    console.log('data',data);
                }, error => {
                    console.log('err',error);
                })

执行结果：

当结果判断为异常时则直接进入reject处理方法，并结束下面的回调。但是若异常的then中传入的reject方法，则还会向下一个的resolve返回undifined。若是在reject中继续new promise则还会继续执行；

 this.promiseTest(-1)
                .then(data => {
                    console.log('data',data);
                    return this.promiseTest(1000);
                }, error => {
                    console.log('err',error);
                })
                .then(data => {
                    console.log('data',data);
                }, error => {
                    console.log('err',error);
                })

2. cath处理

若出现异常则会直接进入catch中直接执行内部程序，如果.then中实现reject则不会进入catch

 this.promiseTest(-1)
                .then(data => {
                    console.log('data', data);
                    return this.promiseTest(1000);
                })
                .then(data => {
                    console.log('data', data);
                })
                .catch(error => {
                    console.log('all err', error);
                })

Promise.all

多个promise进行统一处理

 let p1 = new Promise((resolve, reject) => {
                resolve('1')
            })

            let p2 = new Promise((resolve, reject) => {
                resolve('2')
            })

            let p3 = Promise.reject('error')

            Promise.all([p1, p2]).then((result) => {
                console.log(result)
            }).catch((error) => {
                console.log(error)
            })

若是异常则只会返回一个异常

 let p1 = new Promise((resolve, reject) => {
                resolve('1')
            })

            let p2 = Promise.reject('error-1')

            let p3 = Promise.reject('error-2')


            Promise.all([p1, p3, p2]).then((result) => {
                console.log(result)
            }).catch((error) => {
                console.log(error)
            })