promise,Generator函数，async函数区别与理解

promise,Generator函数，async函数区别与理解

promise,generator函数和async函数是es6中的三个比较重要的新语法，都是用来解决异步操作为问题的，初学时只知道三者大概怎么用，但是最关键的三者到底有什么区别，什么时候可以用到这些认识都很模糊。这里对这三者进行一下个人理解的记录

Promise

promise比较简单，也是最常用的，主要就是将原来的用回调函数的异步编程方法转成用relsove和reject触发事件， 用then和catch捕获成功或者失败的状态执行相应代码的异步编程的方法

//回调写法
function fun1(value,callback) {
	value++
	setTimeout(function() {
			value++
        setTimeout(function(){
        		value++
           setTimeout(function(){
				console.log(value)
           }，2000)；
        }，2000)；
	，2000)；
}
fun1() // 4

//Promise写法
function fun1(value) {
	retrun	new Promise((resolve,reject)=> {
        setTimeout(function(callback){
      		resolve(value++)
    	}，2000)；
	}) 
}

fun1(0).then((value)=> {
    return 	new Promise((resolve,reject)=> {
        setTimeout(function(callback){
      		resolve(value++)
    	}，2000)；
}).then((value)=> {
	return 	new Promise((resolve,reject)=> {
        setTimeout(function(callback){
      		resolve(value++)
    	}，2000)；
}).then(value)=>{
    console.log(value) 
}    // 4

由上面代码可以看出 promise将多个回调函数嵌套的回调地狱 ，变成了链式的写法 ，可读性更高写法也更清晰

Generator函数

Generator函数是将函数分步骤阻塞 ，只有主动调用next() 才能进行下一步 ，因为asyns函数相当于Generator函数的语法糖，做出了优化，所以这里对Generator函数不做赘述，而且一般用到异步编程的时候一般也只用async和promise。所以这里就省略了,
额。。。这里改一下，因为dva中异步处理的实现就是Generator函数，所以还是挺有用的，当然dva中自己带状态机使函数自动运行下去。

async函数

简单的说async函数就相当于自执行的Generator函数，相当于自带一个状态机，在await的部分等待返回， 返回后自动执行下一步。而且相较于Promise,async的优越性就是把每次异步返回的结果从then中拿到最外层的方法中，不需要链式调用，只要用同步的写法就可以了。更加直观而且，更适合处理并发调用的问题。但是async必须以一个Promise对象开始 ，所以async通常是和Promise结合使用的

//回调写法
function fun1(value) {
	retrun	new Promise((resolve,reject)=> {
        setTimeout(function(callback){
      		resolve(value++)
    	}，2000)；
	}) 
}

fun1(0).then((value)=> {
    return 	new Promise((resolve,reject)=> {
        setTimeout(function(callback){
      		resolve(value++)
    	}，2000)；
}).then((value)=> {
	return 	new Promise((resolve,reject)=> {
        setTimeout(function(callback){
      		resolve(value++)
    	}，2000)；
}).then(value)=>{
    console.log(value) 
}    // 4

//async函数写法
function fun1(value) {
	retrun	new Promise((resolve,reject)=> {
        setTimeout(function(callback){
      		resolve(value++)
    	}，2000)；
	}) 
}

async function asy() {
let v = 0
    v = await fun1(v)
    v = await fun1(v)
    v = await fun1(v)
    console.log(v)
}  
asy() //4

从上面代码来看await函数的写法确实简洁了很多，而且异步的顺序也非常清晰

总的来说，async和generator函数主要就是为了解决异步的并发调用使用的 ，直接将参数从then里取出来，相比promise的链式调用，传参更加方便，异步顺序更加清晰