本文详细介绍JavaScript中ES7引入的async和await特性，这是目前处理异步操作的最佳方案。通过对比传统的Ajax回调、Promise以及Generators，展示了如何使用async/await以同步思维解决异步代码问题，并结合Fetch API和数组顺序执行等实例，帮助开发者更高效地处理数据获取任务。
async/await简介
await和async是ES7中最重要的特性之一，也是目前JavaScript中处理异步操作的最佳解决方案。尽管该特性未包含在ES2016标准中，但它很快就会被纳入，目前已在ES-Next Stage 4阶段。
直接通过示例说明，假设我们需要按顺序获取：产品数据、用户数据和评论数据。
传统Ajax方法
回顾传统的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 已被讨论多年，属于 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的新特性，能够暂停和执行代码。
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详解
介绍强大的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以同步思维解决异步代码，感觉非常酷且高效！关于JavaScript中await/async的作用和用法就介绍到这里，希望对大家有所帮助。如有任何疑问，请留言，小编会及时回复。在此感谢大家对本站的支持！