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

tracymac7 发布于2019-08-26 12:24 / 1332人阅读

摘要：一次性掌握异步处理假定一个场景，等女朋友睡起来出去逛街，超过就不等了，自己打游戏了处理方式写法链式调用方法，只有当异步处理成功后回到用拿到异步处理成功后的数据异步处理出错时，会调用获取到异常也就是说方法里有两个回调函数作为参数或者还有第二种

一次性掌握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
    }
}

注意：await等的是什么?是promise是承诺返回的是resolve回调函数里面的数据

更多用法可以参考：Promise && Async/Await

云服务器 GPU云服务器异步处理 asp 异步处理 js写成异步处理 php 处理异步化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108628.html

ES6

摘要：对象可被不定参数和默认参数完美代替。将对象纳入规范，提供了原生的对象。规定，命令和命令声明的全局变量，属于全局对象的属性命令命令命令声明的全局变量，不属于全局对象的属性。。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。 ES6的了解新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值In...

snifes 2019-08-22 15:57 评论0 收藏0
从0到1使用VUE-CLI3开发实战（三）: ES6/ES7知识储备

摘要：它们都用于声明变量。盲目使用替换后可能会导致预期意外的结果。有鉴于此，还是建议使用字符串，布尔和数字类型的数据类型。像使用这种下划线命名约定在一个开源项目中，命名规则很难维持得一直很好，这样经常会造成一些困扰。今天群里有小伙伴跟我聊天，问了我几个关于ES6的问题，我才意识到，大部分初学者在学习的过程中，都是学了HTML/CSS/JS之后就开始上手学习框架了，而对于ES6的重视程度却不...

crossoverJie 2019-08-23 14:48 评论0 收藏0
揭秘babel的魔法之class继承的处理2

摘要：并且用验证了中一系列的实质就是魔法糖的本质。抽丝剥茧我们首先看的编译结果这是一个自执行函数，它接受一个参数就是他要继承的父类，返回一个构造函数。如果你已经看过第一篇揭秘babel的魔法之class魔法处理，这篇将会是一个延伸；如果你还没看过，并且也不想现在就去读一下，单独看这篇也没有关系，并不存在理解上的障碍。上一篇针对Babel对ES6里面基础class的编译进行了分析。这一篇将...

BlackHole1 2019-08-20 13:47 评论0 收藏0