• async/await方法解析


    欲了解await,必须先了解Promise,可参考: http://www.cnblogs.com/yanze/p/6347646.html

    支持度: ES6已支持Promise,ES7也决定支持await

    首先查看一个实例:

    var f= ()=> {
        return new Promise((resolve, reject)=> {
            setTimeout(function(){
                console.log(1)
                resolve(1)
            }, 2000)
        })
    }
            
    var tryAwait= async ()=>{
        var data= await f()
        console.log(data)
    }

    用同步的思维方式去解决异步的代码,省去了传统方式繁琐的回调和promise方式的多重promise。

    注意项:

    1.await只能在async函数内使用

    2.await后面一般接着promise对象或其他可等待的对象,会阻塞代码,等待其返回值,当然也能是一般变量,但会立即执行

    什么是其他可等待的对象,这个后面说

    接下来是传统方式:

    var f= ()=> {
        setTimeout(function(){
            console.log(1)
            traditional(1)
        }, 2000)
    }
    f()
    var traditional= (data)=> {
        console.log(data)
    }

    弊端: 代码繁琐,逻辑冗杂,在多重回调的情况下尤为如此(此例也许不明显,毕竟只是实例,但相信各位也明白)

    单纯promise的方式:

    var f= ()=> {
        return new Promise((resolve, reject)=> {
            setTimeout(()=> {
                console.log(1)
                resolve(1)
            }, 2000)
            })
    }
    f().then((data)=> {
        console.log(data)
    })    

    弊端: 每个then方法内部都是一个独立作用域,若是想共享数据,就要将部分数据暴露在外场,在then内部赋值一次

    且要是有很多then方法,代码会充满Promise方法

    本文参考: http://www.tuicool.com/articles/ZZnuQzZ

    -------------------------------------------------

    什么是要等待的值?

    Promise对象当然可以

    async function testAsync(){
        let res= await returnP()
        console.log(res)//3
    }
    
    function returnP(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve(3)
            },3000)
        })
    }
    
    testAsync()

    then的写法也是可以的(then方法返回一个promise对象!

    async function testAsync(){
        let res= await returnP()
        console.log(res) //55
    }
    
    function returnP(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve(3)
            },3000)
        }).then(()=>{
            return 55
        })
    }
    
    testAsync()

    ----------------------------------------------------------

    setTimeout?不行

    async function testAsync(){
        let res= await returnP()
        console.log(res)
    }
    
    function returnP(){
        setTimeout(()=>{
            return
        }, 3000)
    }
    
    testAsync()
    
    

    await修饰的函数的返回值,可以(很有意思的写法,可形成async大串联!)

    async function testAsync(){
        let res= await returnP()
        console.log(res)
    }
    
    async function returnP(){
        var a= await aa()
        return a
    }
    
    function aa(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve(33)
            },1000)
        })
    }
    
    testAsync()

    另外有一种工作里常见的错误写法,这里也列举出来

    async function testAsync(){
        let res= await returnP()
        console.log(res)
    }
    
    async function returnP(){
        new Promise((resolve)=>{
            setTimeout(()=>{resolve(1)},2000)
        }).then(()=>{
            return 100
        })
    }
    
    testAsync()
  • 相关阅读:
    MOP tricks
    DTLZ
    箱型图Box
    IDEA代码折叠
    IDEA快捷键无法使用
    [转].gitignore文件不起作用的解决方案
    你必须知道的EF知识和经验
    采用MiniProfiler监控EF与.NET MVC项目
    EF使用CodeFirst方式生成数据库&技巧经验
    EF查询之性能优化技巧
  • 原文地址:https://www.cnblogs.com/yanze/p/7079372.html
Copyright © 2020-2023  润新知