脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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实现table表格固定表头且表头随横向滚动而滚动

    JS实现table表格固定表头且表头随横向滚动而滚动

    这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,需要的朋友可以参考下
    2017-10-10
  • javascript中replace使用方法总结

    javascript中replace使用方法总结

    这篇文章主要为大家详细介绍了javascript中replace的使用方法，使用replace和正则表达式共同实现字符串trim方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • js制作支付倒计时页面

    js制作支付倒计时页面

    这篇文章主要为大家详细介绍了js制作支付倒计时页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 让Firefox支持event对象实现代码

    让Firefox支持event对象实现代码

    FireFox并没有 window.event ,所以在FireFox下编写事件处理函数是很麻烦的事。如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event
    2009-11-11
  • js实现注册页面校验功能

    js实现注册页面校验功能

    这篇文章主要为大家详细介绍了js实现注册页面校验功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 深入分析javascript中console命令

    深入分析javascript中console命令

    console对象是JavaScript的原生对象，它有点像Unix系统的标准输出stdout和标准错误stderr，可以输出各种信息用来调试程序，而且还提供了很多额外的方法，供开发者调用。它的常见用途有两个。显示网页代码运行时的错误信息。提供了一个命令行接口，用来与网页代码互动。
    2016-08-08
  • JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数

    JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数

    这篇文章主要介绍了JavaScript -- JSON.parse 函数 和 JSON.stringify 函数,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-12-12
  • 基于JavaScript实现除夕烟花秀与随机祝福语

    基于JavaScript实现除夕烟花秀与随机祝福语

    新年即将来临，本文将为大家介绍一个基于JavaScript实现的页面特效：烟花秀+春节随机祝福语。文中的示例代码讲解详细，感兴趣的可以了解一下
    2022-01-01
  • js 实现省市区三级联动菜单效果

    js 实现省市区三级联动菜单效果

    本文主要分享了js实现省市区三级联动菜单效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • layer实现弹出层自动调节位置

    layer实现弹出层自动调节位置

    今天小编就为大家分享一篇layer实现弹出层自动调节位置，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论