回调地狱
什么是回调地狱
当有多个异步操作需要执行时，它们往往需要嵌套在上一个异步操作的回调函数中，这样就会造成多层的嵌套结构，导致代码阅读和调试的难度增加，代码的可读性非常差，这被称为回调地狱。
解决回调地狱
解决方法promise,async,await
promise 构造函数
语法
var q =new Promise(function(a，b){
//异步
setTimeout(()=>{
//成功兑现承诺
resolve()
//失败拒绝承诺
reject()
})
})
//pending执行中
//fulfilled
//reject
//q 是promise对象
q.then(function("success"){
//兑现承诺，这个函数被执行
}).catch(function("fail"){
//拒绝承诺，这个函数被执行
})
promise具有三个状态：执行中 /成功/ 失败
实例
用promise解决多个Ajax发送问题
function pajax(){
var q =new Promise(function(resolve，reject){
ajax({
...option,
success:function(res){
resolve(res)
},
error:function(err){
reject(err)
}
})
})
return q
}
//pajax.then(function("success"){
//兑现承诺，这个函数被执行
//}).catch(err=>{
//拒绝承诺，这个函数被执行
//})
一定要return（因为上面可能会失败，走catch分支）
async
语法
async function fn(){
const res =await promise 对象
}
可以await一个函数对象
把异步代码写的像同步代码
async.function fn(){
const res=new promise(function(resolve,reject))
ajax({
url:"第一个地址"，
success(res){
resolve(res)
}
})
console.log(res)
console.log(2222)
}
虽然是异步但更想同步
例
async function fn() {
var flag = true;
if (flag) {
return '不讲武德';
}
else{
throw '处理失败'
}
}
fn()
.then(data=>{
console.log(data);
})
.catch(data=>{
console.log(data);
})
console.log('先执行我，表明async声明的函数是异步的');
await
- await关键字只能在使用async定义的函数中使用
- await后面可以直接跟一个 Promise实例对象（可以跟任何表达式，更多的是跟一个返回Promise对象的表达式）
- await函数不能单独使用
- await可以直接拿到Promise中resolve中的数据。即成功则执行await后面语句
例
//封装一个返回promise的异步任务
function fn(str) {
var p = new Promise(function (resolve, reject) {
var flag = true;
setTimeout(function () {
if (flag) {
resolve(str)
} else {
reject('处理失败')
}
})
})
return p;
}
//封装一个执行上述异步任务的async函数
async function test(){
var res1=await fn('武林要以和为贵'); //await直接拿到fn()返回的promise的数据，并且赋值给res
var res2=await fn('要讲武德');
var res3=await fn('不要搞窝里斗');
console.log(res1,res2,res3);
}
//执行函数
test();
