美文网首页技术Javascript
ES6基础之async/await及Promise来处理异步方法

ES6基础之async/await及Promise来处理异步方法

作者: joyitsai | 来源:发表于2019-05-17 10:16 被阅读0次

    1. Promise来获取异步方法中的数据:

    类似于将一个异步方法封装在一个具有回调函数的函数里,Promise实际上充当了这种封装作用。然后通过resolve和reject函数向外输出成功时的数据和失败时的错误信息,以Promise.then((data)=>{})来接收输出的数据,如下图过程:

    promise结构图
    例如下面的代码:
    const p = new Promise((resolve, reject)=>{
        setTimeout(function(){
            const name = 'joyitsai';
            resolve(name);
        /*
        如果失败reject输出错误信息
         reject(`error_info`)
        */
        }, 1000);
    })
    p.then((data)=>{
        console.log(data);
    })
    

    2. async/await与Promise:

    所谓的Promise,把它想象成一个容器,里面放着一些正在处理的问题,但不管过多长时间,它最终都会把它处理完成的结果(不管是成功还是失败的)输出给你,而且,它允许你通过.then((data)=>{})方法来接收这个结果数据。Promise可以说是为处理异步而生。

    (1) 关于async

    而所谓的async,它是将一个方法或函数变成异步的,它会将一个普通函数封装成一个Promise,为什么要封装成Promise呢?其实它只是Promise的搬运工,利用了Promise处理异步问题的能力,能让你更好地解决需要异步处理的代码。。下面看一下简单的代码:

    /**async/await 与Promise */
    async function testAsync(){
        return 'Here is Async';
    }
    const result = testAsync();
    console.log(result);
    

    执行后,你将会看到:

    Promise { 'Here is Async' }
    

    既然async实际上是将一个普通函数封装成了Promise,那么来获取async封装的这个异步方法的数据自然可以用Promise的.then()方法,接着上面的代码,你可用result.then((data)=>{})来接收和处理得到的数据。
    但是async的作用如果仅仅是这样,那还要它干嘛?async其实是与await结合使用的,目的在于:直接返回异步方法中的数据:

    async function run(){
        const data = await testAsync();
        console.log(data)
    }
    run();
    

    得到的data就是Here is Async

    (2) 关于await

    • async用来申明里面包裹的内容可以进行同步的方式执行,await则是进行执行顺序控制,每次执行一个await,程序都会暂停等待await返回值,然后再执行之后的await。
    • await后面调用的函数需要返回一个promise,另外这个函数是一个普通的函数即可,而不是generator。
    • await只能用在async函数之中,用在普通函数中会报错。
    • await命令后面的 Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try...catch 代码块中。
    关于await的理解:

    await具有阻塞功能,可以理解为:等待await语句执行完成后,后面的程序才会继续。这就意味着,虽然一段包含await语句的异步程序,最终却是按照同步的顺序来执行。
    此外,await的阻塞,意味着它不能用在async以外的函数中,因为await会严重影响非async(异步)程序的执行效率,只能用在async函数中。

    下面是await将异步变成同步的代码段:

    async function test(){
        console.log(2);
        return 'Joyitsai';
    }
    
    async function run(){
        console.log(1);
        const data = await test();
        console.log(data);
        console.log(3);
    }
    run();
    

    打印结果为:

    1
    2
    Joyitsai
    3
    

    相关文章

      网友评论

        本文标题:ES6基础之async/await及Promise来处理异步方法

        本文链接:https://www.haomeiwen.com/subject/lrcgaqtx.html