Promise
1.基本了解
在执行异步操作时,需要promise对这个异步操作进行封装。
new Promise((resolve,reject)=>{})
,其中resolve和reject是函数,比如要执行setTimeout这个异步函数时,将要打印的代码的这个步骤放到.then()
方法内执行,setTimeout函数内部需要调用resolve函数
new Promise((resolve,reject)=>{
setTimeout( ()=> {
resolve('hello world')
},1000)
}).then((data)=>{
console.log(data)
})
成功时会调用resolve这个函数调用.then()
方法,失败时调用reject再调用.catch()
方法
new Promise((resolve,reject)=>{
setTimeout( ()=> {
//成功时调用resolve
// resolve('hello world')
//失败时调用reject
reject('message err')
},1000)
}).then((data)=>{
console.log(data)
}).catch((err)=>{
console.log(err)
})
2.三种状态
(1)pending:等待,网络正在请求时,或定时器没到时间。
(2)fulfill:满足状态,当主动调用resolve时,就处于该状态,并会回调.then()
.
(3)reject:拒绝状态,当调用reject时,就处于该状态,并会回调.catch()
但成功和拒绝两种状态可以都放到.then()
里
new Promise((resolve,reject)=>{
setTimeout(()=>{
// resolve('hello world')
reject('message err')
},1000)
}).then((data)=>{
console.log(data)
},(err)=>{
console.log(err)
})
3.Promise的链式调用
//链式处理
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then((res)=>{
console.log(res,'第一层处理的代码')
//可以在这里不用再填完整的new Promise
//直接调用Promise的resolve方法
return Promise.resolve(res+'111')
}).then(res=>{
console.log(res,'第二层处理的代码')
return Promise.resolve(res+'222')
}).then(res=>{
console.log(res,'第三层处理的代码')
})
更简洁的方法:
原来是return Promise.resolve(res+'111')
可以改为:return res+'111'
4.Promise.all
如果需要发送两次请求才能执行下一步,可以用到promise.all
这两个异步都执行完后才会打印最后的结果
Promise.all([
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('res1')
},2000)
}),
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('res2')
},1000)
})
]).then(results=>{
console.log(results)
})