javascript异步流程处理几种方式
前言
JavaScript 提倡书写异步方法, 这样可以更好地利用事件队列机制, 来高效的无阻塞的运行应用。但这容易带来了大量的异步回调嵌套，常常就会出现俗称“回调地狱（callback hell）”的现象。
特别的当多个异步要求按照顺序执行，其结果多级依赖时，多级的回调嵌套不仅使得代码变难看难懂，更使得调试、重构的过程异常复杂。所以就有了异步流程控制，可以更方便的用看似同步的方法来写异步的东西，让程序逻辑清晰易懂。下面就来谈谈异步流程处理的几种方式。
一、回调函数的方式
例如1，你会遇到这样的一种需求，获取一组地址信息，但是异步返回的是对应地址的code，拿到该数据后，需要对每一项转换成中文地名，全部转换完成后返回页面。
// 获取一组地址信息
$.get('/api/getAddressData',{},function(data){
let list = data.addressList;
// 在回调函数中，对转换好的数据进行操作
let transfer = after(list.length,function(data){
console.log('转换好了',data)
})
for(let i =0; i< list.length; i++){
let item = list.[i]
transfer(item);
}
});
function after(times,callback){
let list = [];
return function(data){
// 将数据进行转换
$.get('/api/getTransferAddress',{code:item.code},function(data){
data['addressName'] = data.addressName;
list.push(data);
// 所有数据转换完成后，调用回调函数，把转换好的数据返回给回调中使用
if(--times === 0){
callback(list);
}
})
}
}
例如2，文件读取 异步i/o。1.txt，2.txt，3.txt的结果多级依赖。这种方式的做法就是在回调函数中，执行下一次的异步事务，依次嵌套执行。
// 读取 异步i/o
let fs = require('fs');
fs.readFile('./1.txt','utf8',function(err,data){ // 先读取1.txt
if(err) return console.log(err);
fs.readFile(data,'utf8',function(err,data){ //从1.txt得到的下一个要读取的文件的路径==> ./2.txt
if(err) return console.log(err);
console.log(data);
fs.readFile(data,'utf8',function(err,data){ //从2.txt得到的下一个要读取的文件的路径==> ./3.txt
if(err) return console.log(err);
console.log(data);
});
});
});
从以上代码可以看出，采用回调函数进行异步处理的方式，代码逻辑比较复杂，不易于阅读，而且常常容易出现“回调地狱”的写法。
二、promise 方式
1、什么是promise？
Promise是异步编程的一种解决方案，它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败。
在2015年6月， ES2015（即 ECMAScript 6、ES6） 正式发布。其中 Promise 被列为正式规范，成为 ES6 中最重要的特性之一。在此之前使用promise一般都是借用第三方库，例如常用的q库、co库、bluebird等。
优点：可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
缺点：
1）无法取消 Promise，一旦新建它就会立即执行，无法中途取消
2）无如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部
3）当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）
2、基本API
- Promise#then
// 基本用法
promise.then(onFulfilled, onRejected);
let promise = new Promise(function(resolve, reject) {
setTimeout(function(){
resolve("成功的数据");
},10)
});
promise.then(function(value) {
console.log(value); // ==> 成功的数据
}).catch(function(error) {
console.log(error);
});
- Promise#catch
// 捕获错误的方法，then没有传递错误函数，过程中抛出的错误，都能捕获到；
// 等价于 promise.then(undefined, onRejected) 的语法糖
promise.then(function(value) {
console.log(value);
}).then(function(){
console.log(value);
}).catch(function(error) {
console.log(error);
});
- Promise#resolve
// Promise的成功静态方法
Promise.resolve([1,2,3]).then(function(data){
console.log(data);
});
- Promise#reject
// Promise的失败静态方法
Promise.reject(new Error("error"));
-
Promise#all
生成并返回一个新的promise对象。
Promise.all接收的参数是一个数组，参数里面放置的是promise对象，最后返回的数据也是按照参数顺序，返回一个数组，对应的值就是对应的promise对象成功返回的值
** 注意：all的方法是所有promise都成功了，才算成功，否则就算失败
let p1 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("异步数据1");
},10)
})
let p2 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("异步数据2");
},10)
})
let p3 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("异步数据2");
},10)
})
Promise.all([p1，p2，p3]).then(function(data){
console.log(data) // ==>["异步数据1", "异步数据2", "异步数据2"]
}, function(err){
console.log(err)
})
-
Promise#race
生成并返回一个新的promise对象。
参数 promise 数组中的任何一个promise对象如果变为resolve或者reject的话， 该函数就会返回，并使用这个promise对象的值进行resolve或者reject
** 注意：只要有一个promise成功了 就算成功。如果第一个失败了就失败了
let p1 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("异步数据1");
},10)
})
let p2 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("异步数据2");
},10)
})
let p3 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("异步数据2");
},10)
})
Promise.race([p1，p2，p3]).then(function(data){
console.log(data) // ==>"异步数据1" 取决于promise的执行时间，返回第一个成功的promise的结果
}, function(err){
console.log(err)
})
三、generator方式
generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。原理是将一个函数划分成若干个小函数，每次调用时移动指针，内部是一个条件判断，执行对应的逻辑
- genrator 函数要用* 来比标识，yield(暂停 产出)
- 它会将函数分割成部分，调用一次next就会继续向下执行
- 返回结果是一个迭代器 迭代器有一个next方法
- yield后面跟着的是value的值，异步一般跟着的是promise对象
- yield等号前面的是我们当前调用next传进来的值
- 第一次next传值是无效的
异步 generator主要和promise搭配使用,co库可以自动的将generator进行迭代
// 使用generator处理异步流程，让p1和p2两个异步事务顺序执行
// 首先安装co库 npm install co
let co = require('co');
let p1 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("异步数据1");
},10)
})
let p2 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("异步数据2");
},10)
})
function *getData(){
let list = []
let a = yield p1;
list.push(a)
let b = yield p2;
list.push(b)
return list
}
// co库自动进行迭代
co(getData()).then(function (data) {
console.log(data) // ==>["异步数据1", "异步数据2"]
})
四、async / await 方式
在最新的ES7（ES2017）中提出的前端异步特性：async、await。
async用来修饰函数，声明一个函数是异步的。而await是用于等待异步完成。并且await只能在async函数中使用。
实际上async和await(语法糖) 相当于 co + generator，但是少了co的灵活, co不仅可以包装Promise还可以包装数组, 还可以包装thunk, 而await自动包装后的东西只能是原始值, 或者 Promise
通常async、await都是和Promise一起使用的。
因为async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么 就是什么)；
await得到Promise对象之后就等待Promise接下来的resolve或者reject。
那么async / await 解决的问题有哪些呢？
1.回调地狱
2.并发执行异步，在同一时刻同步返回结果 Promise.all
3.解决了返回值的问题
4.可以实现代码的try/catch;
let p1 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("异步数据1");
},10)
})
let p2 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("异步数据2");
},10)
})
async function getData(){
let list = [];
try{
let content1 = await p1;
list.push(content1); // content1就是p1这个promise对象resovle返回的数据
let content2 = await p2;
list.push(content2); // content2就是p2这个promise对象resovle返回的数据
return list
}catch(e){ // 如果出错会catch
console.log('err',e)
}
}
// async函数返回的是promise,
getData().then(function(data){
console.log(data); // ==>["异步数据1", "异步数据2"]
},function(err){
console.log(err)
})
