Promise
在js环境下,我们大多数是异步编程,在异步编程中使用最多的是回调函数,然后就会形成回调地狱。
我们会发现几个问题:
1.回调配合着嵌套会产生回调地狱问题,
2.由于回调存在着依赖反转,在使用带三方提供的方法时,存在信任问题
3.当我们不写错误的回调函数时,会存在异常无法捕获
4.导致我们性能更差,本来可以一起做的但是回调后,导致多件事情顺序执行,用的时间更多。
Promise是干什么的?
1、主要用于异步计算
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
3、可以在对象之间传递和操作promise,帮助我们处理队列
Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.
先用代码简单实现一下:
function waiting() {
return new Promise((resolve, reject) => {
//这里用定时器模拟我请求ajax/axios数据的延迟,模拟异步操作
setTimeout(function () {
resolve('2') //数据处理成功
//reject('2') //数据处理错误
}, 2000)
})
}
console.log(1)
console.log(3)
//成功返回
waiting().then(res => {
console.log('res:', res)
})
//失败返回
//.catch(error=>{
// console.log('error:',error)
//})
//先打印的1和3,两秒之后打印的2,这不是我们要的结果,我要的是依次打印1,2,3
function waiting() {
return new Promise((resolve, reject) => {
//这里用定时器模拟我请求ajax/axios数据的延迟
setTimeout(function () {
resolve('2')
}, 2000)
})
}
waiting().then(res => {
console.log(1)
console.log('res:', res)
console.log(3)
})
//这样一打印,出来的就是1,2,3 这样就处理了异步的问题。
promise 可以解决什么问题和应用场景
解决地狱回调
可以链式调用
应用场景:
- 封装ajax,axios的get,post封装
- 微信小程序中封装wx.request()
- uniapp开发中uni.request()
Promise 语法结构:
new Promise( function(resolve, reject) {});
promise有三个状态:
- 初始状态 pending (进行中的状态)
- 成功状态 fulfilled
- 失败状态 rejected
该函数会接收两个参数 一个是resolve,一个是reject
resolve是成功返回 reject是失败返回。
promise接收一个回调函数作为参数,该参数接收两个参数中的一个返回,resolve是将promise转化为成功状态的回调函数,reject是将promise转化为失败的回调函数
Promise的其他方法:
Promise.all
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。
let p1 = new Promise((resolve, reject) => {
resolve('成功了')
})
let p2 = new Promise((resolve, reject) => {
resolve('success')
})
let p3 = Promse.reject('失败')
Promise.all([p1, p2]).then((result) => {
console.log(result) //['成功返回', 'success']
}).catch((error) => {
console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 失败返回, 'error'
})
Promise.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示,在此之前只显示loading图标。
Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的,即p1的结果在前,即便p1的结果获取的比p2要晚。这带来了一个绝大的好处:在前端开发请求数据的过程中,偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景,使用Promise.all就可以解决这个问题。
Promise.race
Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
},1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('error')
}, 500)
})
Promise.race([p1, p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 打开的是 'error'
})
async与await函数
首先有两个条件
1.await后面接一个会return new promise的函数并执行它
2.await只能放在async函数里
串行执行:必须先执行第一个异步,将第一个异步的结果返回传递给第二个异步函数,再执行第二个异步的操作过程
//第一个函数
function waiting() {
return new Promise((resolve,reject)=>{
//我这里只是用setTimeout来模拟axios,
setTimeout(function() {
resolve('第二个接口返回')
},2000)
})
}
//第二个函数
function waiting2() {
return new Promise((resolve,reject)=>{
//我这里只是用setTimeout来模拟axios,
setTimeout(function() {
reject('第二接口返回')
},2000)
})
}
async function handleFn() {
console.log(1)
//串行执行,先等待第一个函数返回
let res=await waiting()
console.log('res:',res)
//再等待第二个函数返回
let res2=await waiting2(res)
console.log(res2)
}
并行:两个接口同时执行
function waiting() {
return new Promise((resolve,reject)=>{
//我这里只是用setTimeout来模拟axios,
setTimeout(function() {
resolve('第二个接口返回')
},2000)
})
}
function waiting2() {
return new Promise((resolve,reject)=>{
//我这里只是用setTimeout来模拟axios,
setTimeout(function() {
reject('第二接口返回')
},2000)
})
}
async function handleFn() {
console.log(1)
//并发执行,waiting(),waiting2()两个接口都成功返回才返回结果
let res=await Promise.all([waiting(),waiting2()])
console.log('res:',res)
console.log('end')
}
handleFn().catch(res=>{
console.log('error:',res)
})
await字面意思就是等待,await后面要跟一个promise对象,返回结果就是它后面Promise执行的结果,可能是返回成功或者是返回失败的值,给人的感觉就像里面的操作是同步一样,但其本质async还是异步操作。
定义
调用async函数时会返回一个Promise对象。当这个async函数返回一个值时,Promise的resolve方法会负责传递这个值;当async函数抛出异常时,Promise 的 reject 方法也会传递这个异常值。
async函数中可能会有await表达式,这会使async函数暂停执行,等待表达式中的 Promise 解析完成后继续执行async函数并返回解决结果。
- async/await的目的是在promises的基础上进一步简化异步的同步调用,它能对一组Promises执行一些操作。正如Promises类似于结构化回调,async/await类似于组合生成器和promises。
总结
- async/await 本质上依然是基于Promise,但在使用上更加简便符合自然习惯。
- async函数内部同步执行。await之间相当于.then。
- async函数外部的调用异步执行。
- 需要try/catch await应对promise reject的情况。