来自: http://larry850806.github.io/2016/05/31/async/

[Javascript] 如何用 async 控制流程 (一)

31 May 2016

async

async 是一個 Node.js module
也可以在前端的 javascript 中直接使用
讓 code 更好看也更好 debug

在 Node.js 中

npm install async
var async = require('async');

在前端 javascript 中

<script type="text/javascript" src="https://rawgit.com/caolan/async/master/dist/async.min.js"></script>

callback

因為 javascript 特有的 callback
callback 用多了你的 code 就會長這樣
Google Callback 地獄

缺點:

  • code 有好幾層很醜
  • 很難 debug
  • 要看很久才能看懂

所以就有了 async
專門在處理這些 asynchronous 的 callback


async.waterfall

使用時機 :
fun2 需要 fun1 callback 的資料
fun3 又需要 fun2 callback 的資料
最後的結果又需要 fun3 callback 的資料
如果 function 更多的話會再疊上去

func1(function(err1, result1){
if(err1) throw err1; func2(result1, function(err2, result2, result3){
if(err2) throw err2; func3(result2, result3, function(err3, result4){
if(err3) throw err3; console.log(result4);
});
});
});

如果用 async

// waterfall 會按照順序執行 function
// 而且可以傳參數
async.waterfall([
function(next){
func1(function(err1, result1){
next(err1, result1);
// 用 next 把參數傳到下一個 function
// 把 result1 放到下面的 rst1
});
},
function(rst1, next){
func2(rst1, function(err2, result2){
next(err2, result2, result3);
// 把 result2 放到下面的 rst2
// 把 result3 放到下面的 rst3
});
},
function(rst2, rst3, next){
func3(rst2, rst3, function(err3, result4){
next(err3, result4);
// 把 result4 放到下面的 rst (因為 fun3 是最後一個了)
});
}
], function(err, rst){
if(err) throw err; // 匯集 err1 err2 err3
console.log(rst); // 收到的 rst = 上面的 result4
});

用 waterfall 不會讓你的 callback 越疊越高
而且可以匯集 error 一併處理
不用在每個 callback 內確認 error


async.series

使用時機 :
fun2 不需要 fun1 callback 的資料
fun3 也不需要 fun2 callback 的資料
但最後的結果要把 fun1 fun2 fun3 的資料整合起來

var allResults = []; // new array
func1(function(err1, result1){
if(err1) throw err1;
allResults.push(result1); func2(function(err2, result2){
if(err2) throw err2;
allResults.push(result2); func3(function(err3, result3){
if(err3) throw err3;
allResults.push(result3); console.log(allResults);
// allResults = [result1, result2, result3]
});
});
});

如果用 async

// series 會按照順序執行 function
// 而且可以把結果全部彙整起來
async.series([
function(next){
func1(function(err1, result1){
next(err1, reuslt1);
});
},
function(next){
func2(function(err2, result2){
next(err2, reuslt2);
});
},
function(next){
func3(function(err3, result3){
next(err3, reuslt3);
});
}
], function(errs, results){
if(errs) throw errs; // errs = [err1, err2, err3]
console.log(results); // results = [result1, result2, result3]
});

可以很方便的彙整資料
也不用多宣告一個 results


async.parallel

使用時機 :
fun1, fun2, fun3 平行執行
將執行的結果整合起來
與 series 不同的是
parallel 的多個 function 會同時執行
所以不能互相衝突(存取相同檔案…等等)

async.parallel([
function(finish){
fun1(function(err1, rst1){
finish(err1, rst1);
// 完成所有動作後 finish
});
},
function(finish){
fun1(function(err2, rst2){
finish(err2, rst2);
});
},
function(finish){
fun1(function(err3, rst3){
finish(err3, rst3);
});
}
], function(errs, results){
if(errs) throw errs; // errs = [err1, err2, err3]
console.log(results); // results = [result1, result2, result3]
});

parallel 跟 series 滿像的都是把結果整合起來
但因為是平行效率比較高
但是要小心不要衝突


基本的 async 介紹就到這裡
希望大家看完這篇有比較了解 async 在幹嘛 ~
要看更進階的功能可以到他們的 GitHub

這是第二篇
[JavaScript] 如何用 async 控制流程 (二)
會介紹一些比較難的流程控制

如何用 async 控制流程的更多相关文章

  1. async 异步流程控制规则

    github 学习async网址 : https://github.com/caolan/async/ 1.Async 函数介绍 async 主要实现了三个部分的流程控制功能 1.集合:Collect ...

  2. MySQL数据库学习笔记(四)----MySQL聚合函数、控制流程函数(含navicat软件的介绍)

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  3. MySQL聚合函数、控制流程函数(含navicat软件的介绍)

    MySQL聚合函数.控制流程函数(含navicat软件的介绍) 一.navicat的引入:(第三方可视化的客户端,方便MySQL数据库的管理和维护) NavicatTM是一套快速.可靠并价格相宜的数据 ...

  4. JavaScript(三)---- 控制流程语句

    常用的控制流程语句有判断语句.分支语句.循环语句.基本用法都和java中的一致,switch有几点特殊. 1.判断语句 格式:        if(判断条件){            符合条件执行的代 ...

  5. 【JAVA零基础入门系列】Day8 Java的控制流程

    什么是控制流程?简单来说就是控制程序运行逻辑的,因为程序一般而言不会直接一步运行到底,而是需要加上一些判断,一些循环等等.举个栗子,就好比你准备出门买个苹果,把这个过程当成程序的话,可能需要先判断一下 ...

  6. Java基础语法<四> 控制流程

    笔记整理 来源于<Java核心技术卷 I > <Java编程思想>   if while do while for   switch case case标签可以是: 类型为ch ...

  7. MySQL 聚合函数 控制流程函数

    常用的聚合函数 1. AVG() 求平均值 mysql> AVG([DISTINCT] expr) -- 返回 expr 的平均值 mysql> select AVG(age) from ...

  8. 第三节:带你详解Java的操作符,控制流程以及数组

    前言 大家好,给大家带来带你详解Java的操作符,控制流程以及数组的概述,希望你们喜欢 操作符 算数操作符 一般的 +,-,*,/,还有两个自增 自减 ,以及一个取模 % 操作符. 这里的操作算法,一 ...

  9. Java入门(五):控制流程

    在Java中,使用条件语句和循环结构确定控制流程,在本文中,主要包括块作用域.条件语句.循环结构.中断循环这四部分. 一.块作用域 块,也叫复合语句,是指由一对大括号括起来的若干条Java语句.块决定 ...

随机推荐

  1. laravel console - 自定义命令

    在改造一个支付流程,新的流程加入了一个新的数据表字段,但是这个新的字段需要通过计算来填充,所以为了兼容历史数据,必须将已有的数据行重新计算一遍该字段. 这时使用 laravel console 命令就 ...

  2. cf1108e 线段树区间更新+扫描线

    /* 有点像扫描线 思路:从左到右枚举每个点,枚举到点i时,把所有以i为起点的区间的影响删去 再加上以i-1为结尾的区间的影响 */ #include<bits/stdc++.h> usi ...

  3. SPOJ-SERVICE 线性dp+维度压缩

    还是线性dp,有点感觉了,另外这个问题也可以用滚动数组 /* 依然是先按照阶段i划分, dp[i][j][k]表示完成第i个请求时,两个员工分别在j位置和k位置的费用(还有一个员工一定在位置p) dp ...

  4. Thread类中的join方法

    package charpter06; //类实现接口public class Processor implements Runnable { // 重写接口方法 @Override public v ...

  5. BZOJ 4767 两双手

    题解: 发现这种题目虽然可以想出来,但磕磕碰碰得想挺久的 根据数学可以知道组成方案是唯一的(集合) 然后发现每个使用的大小可能是接近n^2的 直接dp(n^4)是过不了的 那么先观察观察 我们可以把每 ...

  6. STM32的HAL库中的DMA_FLAG_TCIF3_7等几个宏定义的含义

    DMA_FLAG_TCIF0_4就是指DMA的通道0和通道4,DMA_FLAG_TCIF1_5就是指DMA的通道1和通道5,DMA_FLAG_TCIF2_6就是指DMA的通道2和通道6,DMA_FLA ...

  7. BZOJ1826 [JSOI2010]缓存交换 堆 贪心

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1826 题意概括 Cache中有m个储存单元,接下来有n个访问地址,每个地址用一个数字表示.访问每一 ...

  8. 第八章| 3. MyAQL数据库|Navicat工具与pymysql模块 | 内置功能 | 索引原理

    1.Navicat工具与pymysql模块 在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时,可以使用可视化工具Navicat,以图形界面的形式操作MySQL数 ...

  9. 【Java】 剑指offer(46) 把数字翻译成字符串

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 给定一个数字,我们按照如下规则把它翻译为字符串:0翻译成" ...

  10. java中使用switch-case的用法及注意事项超全总结

    http://m.blog.csdn.net/blog/tianyazaiheruan/8988420 今天陈红军老师在用到switch的时候,这种设计到最基本的内容,可能忘记它的一些基本语法,出现了 ...