promise可以理解为---存放异步的盒子
- promise本身是同步的
- promise是解决回调地狱的(链式调用)
- promise接受一个函数作为++参数++,这个函数接受两个参数(resolve/reject),这个函数有两个参数(resolve/reject)、三种状态(进行中pending、已成功fulfilled、已失败rejected)
- 要不就是从进行中——已成功
- 要不就是从进行中——已失败
promise的缺点
- 一旦开始执行就无法取消
- 无法获取从进行中到已成功(已失败)之间的状态
- 无法捕获内部错误,只能通过回调函数获取
promise方法——原型上的方法
- .then————resolve(成功)
- .catch————reject(失败)
function fn(){
let a = 10
return new Promise((resolve,reject)=>{
setTimeout(()=>{
a = 20
// resolve(a) //执行.then()
reject(a) //执行.catch()
})
})
}
console.log(fn());// 20
- .finally————用于指定不管promise最后的状态如何,都会执行的操作,也就是说,不管是成功还是失败,finally都会执行
- .all————等所有的异步执行完才会获取到结果,通常用来合并请求
function fn1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(10)
}, 1000)
})
}
function fn2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(20)
}, 1000)
})
}
Promise.all([fn1(), fn2()]).then(res => {
console.log(res);//[10, 20]
})
- .race————也可以跟多个实例,谁先返回成功数据就先执行谁,不会等待
function fn1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(10)
}, 1000)
})
}
function fn2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(20)
}, 2000)
})
}
Promise.race([fn1(), fn2()]).then(res => {
console.log(res);// 10
}).catch(err => {
console.log(err);
})
promise.all 和 promise.race 都是用于将多个Promise实例包装成一个新的Promise实例
应用场景——我们做一个操作,可能同时需要不同的接口返回的数据,这时我们就可以使用 Promise.all
有时我们有好几个服务器的几个接口都提供同样的服务,我们不知道哪个接口更快,可以使用 Promise.race ,哪个接口的数据先返回成功的数据,我们就用哪个接口的数据
promise的应用场景
- 封装原生的ajax以及axios、uni.request
回调地狱 解决方式
- promise
- async、await
promise
$ajax('get','a.json').then(res=>{
console.log(res);
return $ajax('get','b.json')
}).then(res=>{
console.log(res);
return $ajax('get','c.json')
}).then(res=>{
console.log(res);
})
async、await
- async(异步)、await(等待)————把异步变为同步,也就是解决回调地狱
- 返回的也是一个promise
- async、await搭配在一起使用的,async离开了await不会报错,但完成不了操作,await离不开async,会报错
async function getData(){
let res1 = await $ajax('get','a.json')
console.log(res1);
}
console.log(getData()); //返回的也是promise
vue中使用axios发起请求