zoukankan      html  css  js  c++  java
  • 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()
  • 相关阅读:
    00045_多态-转型
    js下载文件夹的解决方案
    b/s下载文件夹的解决方案
    web下载文件夹的解决方案
    jsp下载文件夹的解决方案
    php下载文件夹的解决方案
    asp.net下载文件夹的解决方案
    KindEditor 从word中复制内容带多张图片
    CKEditor 从word中复制内容带多张图片
    Web编辑器 从word中复制内容带多张图片
  • 原文地址:https://www.cnblogs.com/yanze/p/7079372.html
Copyright © 2011-2022 走看看