四川盐亭网站制作公司

JavaScript中await和async有什么作用-创新互联

await/async简介

成都创新互联网站建设公司一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！专注中小微企业官网定制，网站设计制作、成都做网站，塑造企业网络形象打造互联网企业效应。

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

async/await特点

async/await更加语义化，async 是“异步”的简写，async function 用于申明一个 function 是异步的； await，可以认为是async wait的简写， 用于等待一个异步方法执行完成；

async/await是一个用同步思维解决异步问题的方案（等结果出来之后，代码才会继续往下执行）

可以通过多层 async function 的同步写法代替传统的callback嵌套

async function语法

自动将常规函数转换成Promise，返回值也是一个Promise对象

只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数

异步函数内部可以使用await

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

老朋友 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 用同步的思维去解决异步的代码，感觉非常酷非常爽！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


分享名称：JavaScript中await和async有什么作用-创新互联
本文路径：http://scyanting.com/article/djegsc.html

其他资讯