generator和promise配合解决js异步地狱问题

为何要使用generator函数和promise?

• js的异步地狱一直是困扰前端程序员的一个头疼的问题

比如说我要获取还有列表,一般来说会使用ajax来获取

$.ajax(...等等,function(res){
    // res代表获取的本人信息
    $.ajax(....等等,function(res){
        //在本人信息的基础之上获取我的好友名字
        $.ajax(....等等,function(res){
        //根据我的好友名字获取我的好友的基本信息等等...
               
        })
    })
})

• 从上面的代码可以看出来,异步虽然是一个很好的方式,但是过多的嵌套会带来很严重的问题,并且性能不是很高

第一版本解决方式

• 使用promise和await/async配合

function getTime(){
    return new Promise((resolve,reject){
        setTimeout(()=>{
            resolve('这是一秒之后')
        },1000)
    })
}

第二版本解决方式

• 配合await/async使用

async function test(){
    //在这里面就可以像同步代码一样书写异步函数
    //并且不会出现js异步地狱的问题
    const result = await getTime()
    return result;
}
test()  //开始执行

• 使用then的方式

getTime().then(res=>{
    console.log(res)   //会返回resovle的结果
}).catch(error=>{
    console.log(error)   //打印错误的情况下
})

虽然说这个代码已经很实用,很好看了,但是如果有更好的方式可以解决多个异步函数的问题,让他循环执行,岂不是完美

• 那么就看接下来的

终极版

function* add(num){
	const r1 = yield getPromise(num)
	yield getPromise(r1)
}
function getPromise(num){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			var count = num * num
			console.log(count)
			resolve(count)
		},1000)
	})
}
var r2 = add(2);
r2.next().value.then(res=>{
	console.log(r2.next(res))
})

看的出来,没有减少代码甚至增加了代码量

• 主要是由于generator本身并不是一个单独使用的函数,一般会配合很多库来使用

如果用过redux-saga的人一定不会陌生了

分享不易,希望可以留下小星星^-