脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js async await

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

 更新时间：2016年10月31日 11:13:51   投稿：mrr  
await/async 是 ES7 最重要特性之一，它是目前为止 JS 最佳的异步解决方案了。这篇文章主要介绍了JavaScript中的await/async的作用和用法的相关资料

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

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

老朋友 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，返回一个 Promise
function 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。

// Generators
function 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，返回一个 Promise
function 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中的await/async的作用和用法就给大家介绍这么多，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • js判断浏览器是否支持严格模式的方法

    js判断浏览器是否支持严格模式的方法

    除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。这篇文章给大家详细介绍了js判断浏览器是否支持严格模式的方法，有需要的朋友们可以参考借鉴。
    2016-10-10
  • JavaScript判断表单提交时哪个radio按钮被选中的方法

    JavaScript判断表单提交时哪个radio按钮被选中的方法

    这篇文章主要介绍了JavaScript判断表单提交时哪个radio按钮被选中的方法,实例分析了javascript操作表单radio按钮的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • 简单的JS时钟实例讲解

    简单的JS时钟实例讲解

    这篇文章主要为大家分享了一个简单的JS时钟实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 微信小程序App生命周期详解

    微信小程序App生命周期详解

    这篇文章主要为大家详细介绍了微信小程序App生命周期的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 给Function做的OOP扩展

    给Function做的OOP扩展

    自编框架Megami的一部分……现在发现自己实在太宅了…… 文件中出现的名字请对号入座……
    2009-05-05
  • 使用focus方法让光标默认停留在INPUT框

    使用focus方法让光标默认停留在INPUT框

    让光标默认停留在INPUT框中，用focus方法可以实现，下面有个示例代码，需要的朋友可以参考下
    2014-07-07
  • JavaScript OOP类与继承

    JavaScript OOP类与继承

    JavaScript OOP类与继承实现代码，需要的朋友可以参考下。
    2009-11-11
  • JS小功能(offsetLeft实现图片滚动效果)实例代码

    JS小功能(offsetLeft实现图片滚动效果)实例代码

    这篇文章主要介绍了offsetLeft实现图片滚动效果实例代码，有需要的朋友可以参考一下
    2013-11-11
  • 前端实现监控SDK的实战指南

    前端实现监控SDK的实战指南

    本文讨论了前端监控和数据统计的设计思路,包括错误监控、用户行为日志、PV/UV统计等方面,介绍了数据采集、日志上报、日志查询的流程,以及监控错误的类型和用户埋点统计的手段,同时提到了PV和UV的统计方法,需要的朋友可以参考下
    2024-10-10
  • 如何在uniapp中获取可视区域的高度(uni.getSystemInfo)

    如何在uniapp中获取可视区域的高度(uni.getSystemInfo)

    这篇文章主要给大家介绍了关于如何在uniapp中获取可视区域的高度(uni.getSystemInfo)的相关资料,文中通过图文以及实例代码介绍的非常详细,对大家学习或者使用uniapp具有一定的参考学习价值,需要的朋友可以参考下
    2023-04-04

最新评论