await/async的用法

//==回调地狱的解决方法 ， 实际的业务问题：我们需要按顺序获取：产品数据=>用户数据=>评论数据

//1.传统的写法：

    // 获取产品数据
    ajax('products.json', (products) => {
        console.log('AJAX/products >>>', JSON.parse(products));

        // 获取用户数据
        ajax('users.json', (users) => {
            console.log('AJAX/users >>>', JSON.parse(users));

            // 获取评论数据
            ajax('products.json', (comments) => {
                console.log('AJAX/comments >>>', JSON.parse(comments));
            });
        });
    });

//2.用promise(ES6)封装ajax:

    //封装 Ajax，返回一个 Promise
    function requestP(url) {
        return new Promise(function(resolve, reject) {
            ajax(url, (response) => {
                resolve(JSON.parse(response));
            });
        });
    }

    // 获取产品数据
    requestP('products.json').then((products) => {
        console.log('Promises/products >>>', products);
        // 获取用户数据
        return requestP('users.json');
    }).then((users) => {
        console.log('Promises/users >>>', users);
        // 获取评论数据
        return requestP('comments.json');
    }).then((comments) => {
        console.log('Promises/comments >>>', comments);
    });

//3. await/async
    //async用来表示函数是异步的，定义的函数会返回一个promise对象，可以使用then方法添加回调函数。
    //await 后面可以跟任何的JS 表达式,如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。
    // 封装 Ajax，返回一个 Promise
    function requestP(url) {
        return new Promise(function(resolve, reject) {
            ajax(url, (response) => {
                resolve(JSON.parse(response));
            });
        });
    }

    (async () => {
        // 获取产品数据
        let data = await requestP('products.json');

         // 获取用户数据
        let users = await requestP('users.json');

         // 获取评论数据
        let products = await requestP('comments.json');

        console.log('ES7 Async/products >>>', products);
        console.log('ES7 Async/users >>>', users);
        console.log('ES7 Async/comments >>>', comments);
    }());

转载于:https://www.cnblogs.com/aryu/p/10943730.html