异步Promose和Async/Await的攻略

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方法执行结束');
            },

更加贴切异步变同步！