回调地狱
根据我们在回调函数和异步任务中的内容可以得出一个结论：存在异步任务的代码，不能保证按照顺序执行，那如果非要代码顺序执行呢？
我们必须这样操作才能保证顺序正确：
setTimeout(function() {
console.log('first');
setTimeout(function(){
console.log('second');
setTimeout(function(){
console.log('three');
}, 1000)
}, 1000)
}, 1000)
// 输出
first
second
three
回调函数中嵌套回调函数的情况就叫做回调地狱。
回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。
如何解决回调地狱
Promise
Promise 是 js中的一个原生对象，是一种异步编程的解决方案，可以替换掉传统的回调函数解决方案。
- Promise 构造函数接收一个函数体作为参数，我们需要处理的异步任务就装载在该函数体内，该函数的两个参数是resolve, reject。异步任务执行成功时调用resoleve函数返回结果，反之调用reject。
- Promise对象的then方法用来接收处理成功时响应的数据，catch方法用来接收处理失败时相应的数据。
- Promise的链式编程可以保证代码的执行顺序，前提是每一次在than做完处理后，一定要return一个Promise对象，这样才能在下一次than时接收到数据。
function fn(str) {
var p = new Promise((resolve, reject) => {
var flag = true;
if(flag) {
resolve(str)
}else {
reject('操作失败')
}
})
return p;
}
fn('first').then( data => {
console.log(data);
return fn('second');
}).then( data => {
console.log(data);
return fn('three');
}).then( data => {
console.log(data);
}).catch( data => {
console.log(data);
})
// 输出
first
second
three
Promise最大的问题就是代码冗余，原来的异步任务被Promise封装了一下，不管什么操作都用then。
async/await
首先我们看sync关键字，它作为一个关键字放到申明函数前面，表示该函数为要给异步任务，不会阻塞后面函数的执行：
PS E:\Node> node
Welcome to Node.js v12.18.0.
Type ".help" for more information.
> function fn(){
... return '111';
... }
undefined
> console.log(fn())
111
undefined
> async function fn(){
... return '111';
... }
undefined
> console.log(fn())
Promise { '111' }
undefined
>
可以看到async函数返回数据时自动封装为一个Promise对象。
和Promise对象一样，处理异步任务时也可以按照成功和失败来返回不同的数据。
// async函数返回数据时自动封装为一个Promise对象
async function fn(str) {
var flag = true;
if(flag) {
return str
}else {
throw '操作失败'
}
}
fn('first').then( data => {
console.log(data);
return fn('second');
}).then( data => {
console.log(data);
return fn('three');
}).then( data => {
console.log(data);
}).catch( data => {
console.log(data);
})
console.log('async声明函数是异步执行的')
fn('senond').then(data=>{
console.log(data)
}).catch(data=>{
console.log(data)
})
fn('first').then(data=>{
console.log(data)
}).catch(data=>{
console.log(data)
})
// 输出
async声明函数是异步执行的
first
senond
first
second
three
async关键字说完了，我们来看看wait关键字。
- await关键字只能在使用async定义的函数中使用
- await后面可以直接跟一个Promise实例对象（可以跟任何表达式，更多的是跟一个返回Promise对象的表达式）
- await函数不能单独使用
- await可以直接拿到Promise中resolve中的数据。
function fn(str) {
var p = new Promise((resolve, reject) => {
var flag = true;
if(flag) {
resolve(str)
}else {
reject('操作失败')
}
})
return p;
}
async function test() {
var res1 = await fn('first');
var res2 = await fn('senond');
var res3 = await fn('threee');
console.log(res1, res2, res3);
}
test();
//输出
first senond threee
为什么叫await等待呢，因为当代码执行到async函数中的await时，代码就在此处等待不继续往下执行，直到await拿到Promise对象中resolve的数据，才继续往下执行，这样就保证了代码的执行顺序，而且使异步代码看起来更像同步代码。
总结一下，当我们写代码遇到异步回调时，我们想让异步代码按照我们想要的顺序执行，如果按照传统的嵌套方式，就会出现回调地狱，这样的代码不利于维护，我们可以通过Promise对象进行链式编程来解决，这样尽管可以解决问题，但是ES7给我们提供了更加舒适的async/await语法糖，可以使得异步代码看起来更像是同步代码。
————————————————
版权声明：本文为CSDN博主「混子前端」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42698326/article/details/111075519
