JavaScript之异步等待,顺序执行

2018-01-13 11:04:29来源:http://lixh1986.iteye.com作者:Lixh1986人点击

分享
本文介绍一种在 Javascrip 中使用异步等待,顺序执行的方法。

一、问题背景:

比如我们需要按顺序获取:产品数据=>用户数据=>评论数据

传统的写法,无需解释
// 获取产品数据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));        });    });});



二、强劲的新朋友 Generators

Generators 是 ES6 一个新的特性,能够 暂停/执行 代码。

yield 表示暂停且返回(return)其后面的值,
iterator.next 表示执行下一步


语法:
function* gen() {   yield 1;  yield 2;  yield 3;}var g = gen();console.log(g.next()); // {value: 1, done: false}console.log(g.next()); // {value: 2, done: false}console.log(g.next()); // {value: 3, done: true }


语法:next( ) 带参数
function* gen() {  while(true) {    var value = yield 10;    console.log(value);  }}var g = gen();g.next(1); // "{ value: 10, done: false }"g.next(2); // 2// "{ value: 10, done: false }"

当程序第二次进入时,会把参数赋值给 value
但是返回值不变!


代码实现:
// Generatorsfunction request(url) {    ajax(url, (response) => {        gen.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 gen = main();gen.next();

这个实现逻辑上看起来不是那么简介。尤其是 gen.next() 在函数内部、外部都在调用。


三、不算新的朋友 Promise

Promise 已经被提及已久了,是 ES6 的一部分。
Promise 能在写法上消除 callback 回调函数内的层层嵌套,相比起来代码更清晰了。


代码实现如下:
// 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) {    // 返回值 data 是一个数组:["xx", "xx", "xx"]    console.log('Parallel promises >>>', data); });



四、 压轴出场的 async / await

与 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);}());



按数组顺序执行:
(async () => {    let parallelData = await* [        requestP('products.json'),        requestP('users.json'),        requestP('comments.json')    ];    console.log('Async parallel >>>', parallelData);}());


或者
(async () => {let parallelData = await Promise.all([requestP('data.json'),requestP('users.json'),requestP('products.json')]);console.log('Async parallel >>>', parallelData);})();





引用:
https://github.com/jaydson/es7-async















-


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台