您的位置 首页 技术

详解JavaScript里的await/async的作用和用法

JavaScript里的await/async的作用和用法 分享: await/async是ES7最重要特性之一,它是目前为止JS最佳的异步解决方案了。虽然没有在ES2016中录入…

JavaScript里的await/async的作用和用法

分享:

await/async是ES7最重要特性之一,它是目前为止JS最佳的异步解决方案了。虽然没有在ES2016中录入,但很快就到来,目前已经在 ES-NextStage4阶段。

直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据

老朋友 Ajax

传统的写法,无需解释

// 获取产品数据ajax('products.json', (products) => {    console.log('AJAX/products >>>', JSON.parse(products));    // 获取用户数据    ajax('users.json', (users) => {        console.log('AJAX/users >>>', JSON.parse(users));        // 获取评论数据        ajax('products.json', (comments) => {            console.log('AJAX/comments >>>', JSON.parse(comments));        });    });});

不算新的朋友 Promise

Promise 已经被提及已久了,也是 ES6 的一部分。Promise 能消除 callback hell 带来的厄运金字塔,相比起来代码更清晰了。

// Promise// 封装 Ajax,返回一个 Promisefunction requestP(url) {    return new Promise(function(resolve, reject) {        ajax(url, (response) => {            resolve(JSON.parse(response));        });    });}// 获取产品数据requestP('products.json').then(function(products){    console.log('Promises/products >>>', products);});// 获取用户数据requestP('users.json').then(function(users){    console.log('Promises/users >>>', users);});// 获取评论数据requestP('comments.json').then(function(comments){    console.log('Promises/comments >>>', comments);});

当然使用 Promise.all 可以更简洁

Promise.all([    requestP('products.json'),    requestP('users.json'),    requestP('comments.json')]).then(function(data) {    console.log('Parallel promises >>>', data);});

强劲的新朋友 Generators

Generators 也是 ES6 一个新的特性,能够 暂停/执行 代码。yield 表示暂停,iterator.next 表示执行下一步,如果你不了解 Generators 也没关系,可以忽略它直接学习 await/async。

// Generatorsfunction request(url) {    ajax(url, (response) => {        iterator.next(JSON.parse(response));    });}function *main() {    // 获取产品数据    let data = yield request('products.json');    // 获取用户数据    let users = yield request('users.json');    // 获取评论数据    let products = yield request('comments.json');    console.log('Generator/products >>>', products);    console.log('Generator/users >>>', users);    console.log('Generator/comments >>>', comments);}var iterator = main();iterator.next();碉堡的朋友 await/async与 Promise 结合使用// 封装 Ajax,返回一个 Promisefunction requestP(url) {    return new Promise(function(resolve, reject) {        ajax(url, (response) => {            resolve(JSON.parse(response));        });    });}(async () => {    // 获取产品数据    let data = await requestP('products.json');     // 获取用户数据    let users = await requestP('users.json');     // 获取评论数据    let products = await requestP('comments.json');    console.log('ES7 Async/products >>>', products);    console.log('ES7 Async/users >>>', users);    console.log('ES7 Async/comments >>>', comments);}());

与 Fetch API 结合使用:

(async () => {// Async/await using the fetch API    try {         // 获取产品数据        let products = await fetch('products.json');        // Parsing products        let parsedProducts = await products.json();        // 获取用户数据        let users = await fetch('users.json');        // Parsing users        let parsedUsers = await users.json();        // 获取评论数据        let comments = await fetch('comments.json');        // Parsing comments        let parsedComments = await comments.json();        console.log('ES7 Async+fetch/products >>>', parsedProducts);        console.log('ES7 Async+fetch/users >>>', parsedUsers);        console.log('ES7 Async+fetch/comments >>>', parsedComments);    } catch (error) {        console.log(error);    }}());

按数组顺序执行

(async () => {    let parallelData = await* [        requestP('products.json'),        requestP('users.json'),        requestP('comments.json')    ];    console.log('Async parallel >>>', parallelData);}());

再次结合 Fetch

(async () => {    let parallelDataFetch = await* [        (await fetch('products.json')).json(),        (await fetch('users.json')).json(),        (await fetch('comments.json')).json()    ];    console.log('Async parallel+fetch >>>', parallelDataFetch);}());

使用 await/async 用同步的思维去解决异步的代码,感觉非常酷非常爽!

推荐教程:《js基础教程》

以上就是详解JavaScript里的await/async的作用和用法的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:http://www.24ketang.cn/78677.html

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回顶部