4.ES7中 的Async/await

    // 这是ES7的语法,它是基于generator函数做的语法糖。async用于申明一个function是异步的,返回一个promise对象,而await可以认为是async wait的简写,等待一个异步方法执行完成。async必须声明的是一个function,await必须在声明的函数内部使用。

    async function demo() {

        setTimeout(() => {

            console.log('异步函数');// 3ci await.html: 18 异步函数

        }, 1000)

        return '返回值'

    }

    demo()

    console.log(demo());//Promise {: '返回值'}

    demo().then(res => {

        console.log(res);//返回值

    })

    async function demo2() {

        let result = await Promise.resolve(222)

        console.log(result);//222

    }

    demo2()

    // Promise虽然一方面解决了callback的回调地狱,但是相对的把回调“纵向发展”了,形成了一个回调链。

    function sleep(wait) { //定义一个sleep函数,该函数返回一个Promise对象

        return new Promise((res, rej) => { //构造函数传入两个参数:res--表示异步成功要执行的函数,rej--表示异步失败要执行的函数

            setTimeout(() => { // 延迟操作模拟等待过程

                res(wait) //当经过一段时间后,采用Promise的resolve方法把Promise状态从pending转换为fulfilled,并将延迟时间作为结果返回

            }, wait)

        })

    }

    sleep(100).then(result => { // 调用sleep函数并在异步结束后执行回调函数

        return sleep(result + 100) // 如果成功就返回新的Promise对象

    }).then(result02 => { // 在上一个Promise状态变为fulfilled之后,执行这个then回调函数

        return sleep(result02 + 100) // 返回新的Promise对象

    }).then(result03 => { // 在上一个Promise状态变为fulfilled之后,执行这个then回调函数

        return sleep(result03 + 100) // 返回新的Promise对象

    })


 

    async function deme() { //async函数定义了一个异步操作

        let result01 = await sleep(100) // 等待第一轮延迟结束,获取返回结果,并赋值给result01变量

        let result02 = await sleep(100) // 继续等待第二轮延迟结束,获取返回结果,并赋值给result02变量

        let result03 = await sleep(100) // 继续等待第三轮延迟结束,获取返回结果,并赋值给result03变量

        return result03 // 返回3轮延迟的最后结果

    }

    deme().then(result => {

        console.log(result);//100

    })

你可能感兴趣的:(javascript,前端,vue.js)