ES6推出了Promise,解决了异步回调;

ES7推出了async/await,解决了满屏then的问题。

一、Promise

Promise是将异步方法封装在一个Promise对象中,后期调用包括pending、resolve、reject三种状态。

重点将resolve和reject,resolve是成功回调,通过then进行回调注册;reject是失败回调,通过catch进行回调。

 syncMethod: function () {
                console.log('sync方法执行开始');
                console.log('1秒方法开始执行');
                this.asyncMethod(1).then(() => {
                    console.log('1秒方法执行成功!');
                });
                console.log('100秒方法开始执行');
                this.asyncMethod(100).then(() => { console.log('100秒执行成功!') }).catch((err) => { console.log(err) });
                console.log('ync方法执行结束');
            },
            asyncMethod: function (seconds) {
                return new Promise((resolve, reject) => {
                    if (typeof seconds !== 'number' || seconds > 10) reject(new Error('参数必须是number类型,并且小于等于10'));
                    setTimeout(() => {
                        resolve(`我延迟了${seconds}秒后输出的,是第二个函数`)
                    }, seconds * 1000)
                })

以上Promise的缺点主要有以下:

1、如果多个异步方法,会导致满屏then,并且异步直接存在逻辑问题就会在then中嵌套异步调用并且then,逻辑复杂。

二、async/await

async/await直观反馈异步调用。

  syncMethod: async function () {
                // console.log('sync方法执行开始');
                // console.log('1秒方法开始执行');
                // this.asyncMethod(1).then(() => {
                //     console.log('1秒方法执行成功!');
                // });
                // console.log('100秒方法开始执行');
                // this.asyncMethod(100).then(() => { console.log('100秒执行成功!') }).catch((err) => { console.log(err) });
                // console.log('ync方法执行结束');
                console.log('sync方法执行开始');
                console.log('1秒方法开始执行');
                await this.asyncMethod(1);
                console.log('100秒方法开始执行');
                try {
                    await this.asyncMethod(100);
                } catch (e) {
                    console.log(e);
                }

                console.log('ync方法执行结束');
            },

更加贴切异步变同步!