ES2017 Async

sPeng 发布于2019-08-26 10:23 / 778人阅读

摘要：函数用于实现异步执行事件返回值一个对象，这个对象当函数开始执行时被创建。当函数返回值时，的方法会传递这个值。示例函数返回值假设函数返回的对象为如果一个意味着现在反映了这个的状态。

async 函数

用于实现异步执行事件

返回值：一个Promise对象，这个Promise对象当 async 函数开始执行时被创建。
当 async 函数返回值时， Promise 的 resolve 方法会传递这个值。
当 async 函数抛出异常时，Promise 的 reject 方法会传递这个异常。

示例1： async 函数返回值
    假设async 函数返回的Promise对象为p
    a) 如果return一个Promise, 意味着p现在反映了这个 Promise 的状态。
        async function asyncFunc() {
            return Promise.resolve(123);
        }
        asyncFunc()
        .then(x => console.log(x)); // 123
     
    b) 如果return一个非Promise的值，则用这个值实现p
        async function asyncFunc() {
            return 123;
        }
        asyncFunc()
        .then(x => console.log(x)); // 123
    
示例2： async 函数抛出异常
    async function asyncFunc() {
        throw new Error("Problem!");
    }
    asyncFunc()
    .catch(err => console.log(err));  // Error: Problem!

await 操作符

用于等待一个Promise 对象。
    a) 它只能在 async function 中使用。
    b) await 只影响直接包含它的异步函数
返回值：返回 Promise 对象的处理结果。
    a) 如果等待的不是 Promise 对象，则返回该值本身。

    示例1：await在非async函数中使用，会出现语法错误
     function asyncFunc() {
        let res = await 123;
        return res;
    }
    asyncFunc()
    // Uncaught SyntaxError: await is only valid in async function


    示例2：await 等待非promise
        async function asyncFunc() {
            let res = await 123;
            console.log(res); // 123
            return res;
        }
        asyncFunc()
            .then(x => console.log(x)); // 123

    示例3：await 等待promise对象
        async function asyncFunc() {
            let res = await Promise.resolve(123);
            console.log(res);// Promise {: 123 ...}
            return res;
        }
        asyncFunc()
            .then(x => console.log(x)); // 123

await 是按顺序执行的, Promise.all() 是并行执行的

a) 按顺序等待两个Promise
    async function fun() {
        const result1 = await func1();
        const result2 = await func2();
    }
    
    func1
    |-----------|
                func2
                |--------------------|
                                     fun执行完

b) 等待一个Promise， 这个Promise是一个包含两个元素的数组
    async function fun() {
        const [result1, result2] = await Promise.all([
            func1(),
            func2(),
        ]);
    }

    func1
    |-----------|
        func2
        |--------------------|
                              fun执行完

a) 适用于func2的执行必须在func1执行完后才有效的场景
b) 使用于func2和func1互相不影响的场景

async使用

示例1：获取http://example.com页面

async function fetchData(url) {
    try {
        let response = await fetch(url);
        let text = await response.text();
        return text;
    } catch (error) {
        throw new Error(error);
    }
}
fetchData("https://cors-anywhere.herokuapp.com/http://example.com")
    .then(data => console.log(data))
    .catch(err => console.log(err));

fetchData 的返回值为promise p
执行流程图如下：

示例2：按顺序请求多个url结果
    async function fetchData(urls) {
        try {
            let results = [];
            for (const url of urls) {
                const response = await fetch(url);
                let text = await response.text();
                results.push(text);
            }
            return results;
        } catch (error) {
            throw new Error(error);
        }
    }
    const urls = [
        "https://cors-anywhere.herokuapp.com/http://example.com",
        "https://cors-anywhere.herokuapp.com/http://www.w3school.com.cn/"
        
    ];
    fetchData(urls)
        .then(data => console.log(data))
        .catch(err => console.log(err));

示例3：并行请求多个url结果
    async function fetchData(urls) {
        try {
            let promises = urls.map(async (url) => {
                const response = await fetch(url);
                return response.text();
            });
            let results = await Promise.all(promises);
            return results;
        } catch (error) {
            throw new Error(error);
        }
    }
    
    const urls = [
        "https://cors-anywhere.herokuapp.com/http://www.w3school.com.cn/",
        "https://cors-anywhere.herokuapp.com/http://example.com"
    ];
    fetchData(urls)
        .then(data => console.log(data))
        .catch(err => console.log(err));

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

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

ES2017异步函数现已正式可用

摘要：标准已于年月份正式定稿了，并广泛支持最新的特性异步函数。为了领会，我们需要回到普通回调函数中进一步学习。从此编写回调函数不再那么痛苦。回调是一个函数，可以将结果传递给函数并在该函数内进行调用，以便作为事件的响应。 ES2017标准已于2017年6月份正式定稿了，并广泛支持最新的特性：异步函数。如果你曾经被异步 JavaScript 的逻辑困扰，这么新函数正是为你设计的。异步函数或多或...

android_c 2019-08-21 12:04 评论0 收藏0
使用ES2017 async/await函数的注意点

摘要：正常函数异常函数注意当返回值本身就是一个对象时，函数的并不会对返回值进行二次包装。总是按顺序执行使用函数之前，我们还得搞清楚它的运行机制。因此在函数中的并不会挂起整个函数的执行。随着node 7.6.0正式实装async/await函数，js的异步编程变的比以往更加容易。但是，在我们全面投入async/await的怀抱之前，有必要对这个特性做一些细致的了解。书写形式基本上，任何一...

libxd 2019-08-21 11:31 评论0 收藏0
细解JavaScript ES7 ES8 ES9 新特性

摘要：定期召开会议，会议由会员公司的代表与特邀专家出席。新版本将会包含每年截止时间之前完成的所有特性。它引入了一个新的构造函数和具有辅助函数的命名空间对象。导言：ECMAScript的演化不会停止，但是我们完全没必要害怕。除了ES6这个史无前例的版本带来了海量的信息和知识点以外，之后每年一发的版本都仅仅带有少量的增量更新，一年更新的东西花半个小时就能搞懂了，完全没必要畏惧。本文将带您花大约...

Youngs 2019-08-23 13:45 评论0 收藏0
ES8 走马观花（ECMAScript2017 新特性）

摘要：距离上一篇走马观花已经快两年时间了，上个月底正式发布，再写一篇姊妹篇，介绍新特性。会议的每一项决议必须大部分人赞同，并且没有人强烈反对才可以通过。已经准备就绪，该特性会出现在年度发布的规范之中。距离上一篇《ES6 走马观花》已经快两年时间了，上个月底 ES8 正式发布，再写一篇姊妹篇，介绍 ES8 新特性。什么是 ES8 ES8 是 ECMA-262 标准第 8 版的简称，从 ES...

meislzhua 2019-08-20 18:04 评论0 收藏0
ECMAScript 2017（ES8）特性概述

摘要：特性概述整理自，归纳于笔者的现代开发语法基础与实践技巧系列文章中也欢迎关注前端每周清单系列获得一手资讯。本部分则介绍了新的构造器与包含静态方法的命名空间对象。 ECMAScript 2017（ES8）特性概述整理自 ES8 was Released and here are its Main New Features，归纳于笔者的现代 JavaScript 开发：语法基础与实践技巧系...

Kyxy 2019-08-21 11:46 评论0 收藏0