1.Promise是什么?
Promise,顾名思义:Promise就是承诺函数,主要是对网络请求进行处理的
那为啥不用同步或者ajax去处理呢?
1.如果是同步的话:我们知道网络请求是非常消耗时间的,并且一旦我们使用同步代码进行处理的话,会发生一个事情,
叫做阻塞,出现阻塞后,有可能会导致整个页面整个程序无法运行的状态,这是非常危险的行为
2.用ajax进行处理:会出现另一个问题,如果要处理多次的网络请求,并且请求的关系都是嵌套的话,就很容易出现回
调地狱的问题
2.什么是回调地狱呢?
回调地狱就是:需要通过一个url1从服务器加载一个data1,data1中包括下一个请求url2;需要通过一个url2从服务器加载一个data2,data2中包括下一个请求url3·····,一直这样回调下去就称为回调地狱
$.ajax('url1',(data1)=>{
$.ajax('url2',(data2)=>{
$.ajax('url3',(data3)=>{
$.ajax('url4',(data4)=>{
$.ajax('url5',(data5)=>{
console.log(data5);
})
})
})
})
})
3.Promise的回调地狱
new Promise((res,rej)=>{
setTimeout(()=>{
console.log(123);
console.log(123);
console.log(123);
console.log(123);
console.log(123);
console.log(123);
console.log(123);
setTimeout(()=>{
console.log(456);
console.log(456);
console.log(456);
console.log(456);
},1200)
},1200)
})
4.Promise如何优雅地处理回调地狱
1.Promise是一个类,必须通过new出来
2.Promise( (resolve,reject)=>{} ) 本来Promise参数也是一个函数
3.函数里面有两个参数,一个是成功的回调,一个是失败的回调,resolve和reject这两个参数也都是函数
4.异步代码中调用resolve (),一旦调用resolve( ),就立刻会到then( )中
5.then()的参数也是一个函数,里面做resolve( ),本来处理的事情
6.如果.then( )后面还有异步的话,可以直接再 return 一个 new Promise
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve()
},1200)
}).then(()=>{
console.log(123);
console.log(123);
console.log(123);
console.log(123);
console.log(123);
console.log(123);
return new Promise((reslove,reject)=>{
setTimeout(()=>{
reslove()
},1200)
}).then(()=>{
console.log(456);
console.log(456);
console.log(456);
console.log(456);
console.log(456);
console.log(456);
})
})
5.Promise源码
解释:其实Promise类是一个接口interface,当Promise执行完构造函数的时候,通过constructor来回调resolve,reject
6.Promise传参
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("123")
},1200)
}).then((data)=>{
console.log(data);
})
})
7.Promise的链式调用
语法:new Promise( ).then( ).then( )
问:为啥不是Promise.resolve( ).then( )呢
答:因为return Promise.resolve(data+"1111")是返回Promise的,就可以Promise( ).then( )
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("aaa")
},1000)
}).then((data)=>{
console.log(data);
return Promise.resolve(data+"1111")
}).then((data)=>{
console.log(data);
})
8.Promise的all方法使用
当有多个网络请求要发送时,可以使用Promise.all()方式进行处理
Promise.all([
// 请求一
new Promise((reslove,reject)=>{
// 模拟网络请求
setTimeout(()=>{
reslove("abc")
},1000)
}),
// 请求二
new Promise((reslove,reject)=>{
// 模拟网络请求
setTimeout(()=>{
reslove("123")
},1000)
})
]).then((results)=>{
console.log(results);
})