ES6和ES7异步处理的详解（代码示例）-js教程-PHP中文网

ES6和ES7异步处理的详解（代码示例）

不言

发布： 2018-11-17 15:49:09

转载

2559人浏览过

本篇文章给大家带来的内容是关于es6和es7异步处理的详解（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一次性掌握ES6/ES7异步处理

假定一个场景，等女朋友睡起来出去逛街，超过5s就不等了，自己打游戏了 ...

ES6 Promise 处理方式

promise 写法
promise链式调用方法，只有当异步处理成功后回到用.then(data => {}) 拿到异步处理成功后的数据
异步处理出错时，会调用.then(err => {}) 获取到异常
也就是说.then( data => {}, err => {}) 方法里有两个回调函数作为参数
或者还有第二种写法.then(data => {}).catch(err => {})

function waiting (ms) {
    return new Promise ( (resolve, reject) => {
        if(ms > 5000) {
            reject('long time')
        } else {
            setTimeout(() => {
                resolve(ms);
            }, ms)
        }
    })
}


function main () {
    waiting(3000).then( success => {
        console.log(success);
    }, err => {
        console.log(err)
    })
}

// 或者
function main() {
    waiting(3000).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err);
    })
}

登录后复制

ES7 Async/Await 处理方式

async 表明这个函数里面有异步操作，await总是写在async声明的函数中的
遇到awit，函数就会停止执行，等待异步操作结束，再执行后面的语句
异步操作获取的结果即为resolve回调函数的参数返回
异常即通过reject回调函数参数获取
注意，捕获异常时，我们往往需要在async函数体中使用 try catch 方式获取异常

let sleep = ms => {
    return new Promise ( (resolve, reject) => {
        if(ms > 5000) {
            reject('long time')
        } else {
            setTimeout(function() {
                resolve(ms)
            } ,ms)
        }
    })
}

let play = (ms) => {
    console.log(`I wait you ${ms} s`)
}

let main = async () => {
    try{
        let result = await sleep(3000);
        play(result)
    } catch (err) {
        throw err
    }
}

登录后复制