解决回调地狱的两种方式

1,018 阅读1分钟

很多时候再一个请求拿到结果之后需要再去请求一下个数据接口, 但请求返回的数据都是回调里面才能拿到的, 回调又时一个异步操作,这就比较蛋痛了。 如果把下一请求写在第一个请求里面。 以前最常用的就是使用回调函数callback,但callback只有一个还好,多了就变得难维护和理解了。 这时Promise+async/await就能很好解决这个问题。

function getData1(arguments1){
	return new Promise((resolve, reject) => {
    	// 这里放你第一个请求的代码...
  		resolve(arguments1+1) //上面代码执行完了 调用resolve()
   })
}

function getData2(arguments2){
	return new Promise((resolve, reject) => {
    	//  这里放你第二个请求的代码...
    	resolve(arguments2+1) //上面代码执行完了 调用resolve()
   })
}

function getData3(arguments3){
	return new Promise((resolve, reject) => {
    	// 这里放你第三个请求的代码...
    	resolve(arguments3+1) 		
   })
}


// 第一种方式:链式结构处理回调
getData2(1).then((res) => {
	return getData2(res)
}).then((res2) => {
	return getData3(res2)
}).then((res3) => {
	console.log(res3)
})


// 第二种方式: 异步终极解决方案async+await
async function myFn() {
    let res = await getData1(1)
    let res2 = await getData2(res)
    let res3 = await getData3(res2)
    console.log(res3)
}

myFn()

不了解Promise+async/await的朋友可以去看阮一峰的ES6教程的16和20章:es6.ruanyifeng.com