工作中常常用到promise
,async + await
,遇到一些问题需要用到基础知识总会有一部分不记得,就重新温习权威指南和es6标准入门,花了几天肝下了这篇文章。喜欢的同学请动动发财手点个赞,文章有错误的地方还请指出。
new Promise((resolve,reject) =>{
console.log('11')
resolve()
console.log('Promise')
})
console.log('start')
结果:
11
Promise
start
分析:
- Promise 新建后就会立即执行,从上往下执行,打印
11
- 然后碰到
resolve()
,Promise状态由pending
变为fulfilled
- 但调用
resolve
或reject
并不会终结Promise
的参数函数的执行,所以会往下执行,打印出Promise
- 继续往下,打印出
start
总结:调用resolve或reject并不会终结 Promise 的参数函数的执行
再看一个代码类似的例子但执行过程却不一样
例二new Promise((resolve, reject) => {
return resolve(1);
console.log(2);
}).then((res) =>{
console.log('then',res)
})
结果:
then 1
分析:
- Promise 新建后就会立即执行,碰到
resolve(1)
,Promise状态由pending
变为fulfilled
- 但这里加上了
return
,console.log(2)不会执行 - 执行
.then()
,打印出 then 1
结果:Promise参数函数中加上return,后面的语句不会执行了,2
不会被打印。.then()
和.catch()
中也是一样。
猜猜下面的执行会是什么
new Promise((resolve, reject) => {
resolve(1);
}).then((res) =>{
return 2;
console.log('then1',res)
}).then((res) =>{
console.log('then2',res)
throw new Error('error')
}).catch((err) =>{
return 'catch返回值'
console.log('catch',err)
}).then((res) =>{
console.log('then3',res)
})
结果:
then2 2
then3 catch返回值
分析:
- new Promise立即执行,
resolve(1)
将1
作为返回值传给.then()
- 执行
.then()
,遇到return 2
,相当于return Promise.resolve(2)
,由于加了return,后面的 then1不会被打印 - 执行第二个
.then()
,打印then2 2
,然后抛出一个错误,相当于执行了return Promise.reject('error')
- 往下执行,
.catch()
捕获到了错误,并return 'catch返回值'
,相当于return Promise.resolve('catch返回值')
,同样下面的 cosnole.log('catch',err)不会执行 - 最后的
.then()
会接收到上面的返回值,并打印then3 catch
返回值
Promise.resolve('start')
.then((res) =>{
console.log('then1',res)
return 11 //相当于 return Promise.resolve(11)
}).then((res) =>{
console.log('then2',res) //相当于 return Promise.resolve(undefined)
}).then((res) =>{
console.log('then3',res)
throw new Error('then3 error') //相当于 return Promise.reject(new Error('then3 error'))
}).catch((res) =>{
console.log('catch',res)
})
结果:
then1 start
then2 11
then3 undefined
catch Error: then3 error
分析:在Promise
中,返回任意一个非 promise
的值都会被包裹成promise
对象
const promise = new Promise((resolve, reject) => {
console.log(1);
console.log(2);
});
promise.then(() => {
console.log(3);
});
console.log(4);
结果:
1 2 4
分析:
- new Promise立即执行,打印
1
和2
, - 遇到promise.then(),由于Promise中没有
resolve()
或者reject()
,所以promise的状态会一直是pending
,promise.then()方法不会执行,3
不会被打印, - 继续往下,打印
4
总结:promise里面没有resolve()或reject(),promise会一直是pending
状态,并且不会执行对应的.then()
或者.catch()
.then()
的参数
new Promise((resolve,reject) =>{
resolve('start')
})
.then(1)
.then(Promise.resolve(2))
.then((res) =>{
console.log(res)
})
结果:
start
分析:
- Promise的
.then
或者.catch
的参数期望是函数,传入非函数则会发生值透传,所以.then(1)
相当于.then((res) => Promise.resolve(res))
, .then(Promise.resolve(2))
相当于
.then((res) => {
Promise.resolve(2)
return Promise.resolve(res)
})
- 最后的
.then()
打印start
总结:.then
或者 .catch
的参数期望是函数,传入非函数则会发生值透传
将上面例子中再加入一行.then(console.log)
,打印结果又有所不同了
new Promise((resolve,reject) =>{
resolve('start')
})
.then(1)
.then(Promise.resolve(2))
.then(console.log)
.then((res) =>{
console.log('res',res)
})
结果:
start
res undefined
分析:
start
是由第三个.then()
打印的,.then(console.log)
相当于
.then((res) =>{
console.log(res)
return Promise.resolve(undefined)
})
例六:Promise
的状态
const p = new Promise((resolve,reject) =>{
resolve('11')
})
p.then(() =>{
console.log('then1',p)
})
p.then(() =>{
console.log('then2',p)
})
结果:
then1 Promise {<fulfilled>: '11'}
then2 Promise {<fulfilled>: '11'}
分析:Promise
的状态一经改变就不能再改变
.catch()
处理错误
new Promise((resolve,reject) =>{
resolve()
}).then((res) =>{
throw new Error('throw error')
},(err) =>{
console.log('err',err)
}).catch((err) =>{
console.log('catch:',err)
})
结果:
catch: Error: throw error
分析:对promise而言,处理错误可以给.then()
方法传递第二个函数,但问题在于.then()
中的第二个函数无法捕获第一个函数出现的错误。而用.catch()
则能捕获到上层抛出的错误
.catch()
回调
new Promise((resolve,reject) =>{
reject()
}).catch((err) =>{
return 'catch1 正常返回了'
}).then((res) =>{
console.log('then1:',res)
}).catch((err) =>{
console.log('catch2:',err)
})
结果:
then1: catch1 正常返回了
分析:
- new Promise中
reject()
,promise
状态由pending
转为rejected
- 执行
.catch()
,并return 'catch1 正常返回了',这里相当于Promise.resolve('catch1 正常返回了')
- 执行
.then()
,打印then1
总结:.catch()
回调正常返回,则返回值会传递给与之关联的promise
而在.catch()
中抛出错误,则会被下一个.catch()
捕获,如果没有再定义.catch()
则错误会直接抛出
new Promise((resolve,reject) =>{
reject()
}).catch((err) =>{
throw new Error('ee')
}).then((res) =>{
console.log('then1:',res)
}).catch((err) =>{
console.log('catch2:',err)
})
结果:
catch2: Error: ee
例九
Promise.reject('start')
.catch((res) =>{
console.log('catch1',res)
return new Error('new error1')
}).then((res) =>{
console.log('then1',res)
return new Error('new error2')
}).then((res) =>{
console.log('then2',res)
}).catch((err) =>{
console.log('catch2',err)
})
结果:
catch1 start
then1 Error: new error1
then2 Error: new error2
分析:
- 从上往下执行
start
将会被.catch()
捕获,并打印catch1 start
- 继续执行,
.catch()
返回一个promise
包装的错误对象error1
,注意这里是错误对象,会被当前一个对象来处理,而不是一个错误;相当于Promise.resolve(new Error('error1'))
;所以.catch()
返回值会被紧接着的.then()
方法接收到,并打印then1 Error: new error1
- 继续执行,
.then()
又返回了一个promise
包装的错误对象error2
,同样这里不会当成错误被最后的.catch()
捕获,而是会被下一个.then()
接收到,此时打印了then2 Error: new error2
总结:.then
或者 .catch
中 return 一个 error 对象并不会抛出错误,所以不会被后续的 .catch 捕获
const p = new Promise((resolve,reject) =>{
resolve(11)
}).then(() =>{
return p
})
结果:
Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>
分析:.then()
或 .catch()
返回的值如果是 promise 本身,会造成死循环;就像无线回调,不停的往下注册、调用.then()
Promise.resolve('start')
.finally((res1) =>{
console.log('finally',res1)
return 'finally'
}).then((res2) =>{
console.log('then',res2)
}).finally(() =>{
throw new Error('error')
}).catch((res3) =>{
console.log('catch',res3)
})
结果:
finally undefined
then start
catch Error: error
分析:
finally
的回调函数接收不到promise的结果,所以res1
返回的是undefined
finally
的返回值没有抛出错误的情况下默认是上一个promise
的返回值,所以.then()
方法接收的实际上是Promise.resolve('start')
的返回值,打印的是start
- 然后
.then()
方法没有return
任何值,此时会等同于Promise.resolve('undefined')
- 往下执行又碰到了
finally
,此时.finally()
方法抛出了一个错误,会被下一个最近的.catch()
方法捕获,所以res3
打印了Error:error
传入一个url
组成的数组,按顺序执行数组中的url
并返回结果,下面例子的fetchUrl
函数为了测试可以设置setTimeout
,而在实际开发中类似长这样:
function fetchUrl(url){
return fetch(url)
.then((response) =>{
return response.text()
}).then((val) =>{
arr.push(val)
})
}
promise实现
var urls = [1,2,3,4]
function fetchAll(urls){
let arr = []
let p = Promise.resolve(undefined)
function fetchUrl(url){
return new Promise((resolve,reject) =>{
setTimeout(() =>{
console.log(url)
resolve(url*2)
},1000)
})
}
for (let url of urls) {
p = p.then((function(url){
return () => fetchUrl(url)
})(url)).then((res) =>{
arr.push(res)
})
}
return p.then(() => arr)
}
fetchAll(urls).then((res) =>{
console.log(res)
})
分析:
fetchAll
里面定义fetchUrl
函数,该函数会去调用url
对应的接口,返回值会用promise
包装,并将返回值保存在arr
中- 这里需要注意的是,如果在循环中写
p = p.then(() => fetchUrl(url))
,那么这个url
将会是数组中的最后一个url
- 因为要
p.then()
中的参数回调是一个异步任务,在循环时参数回调会被放入微任务队列
,不会立即执行,导致不能绑定正确的url
- 所以在
for of
循环中p.then()
的参数回调需要用立即执行表达式绑定每个url
(或者用forEach
循环,forEach
循环的内部会给每个元素执行一遍回调函数)
结果:
1
2
3
4
[2, 4, 6, 8]
async await 实现
var urls = [1,2,3,4]
function fetchUrl(url){
return new Promise((resolve,reject) =>{
setTimeout(() =>{
console.log(url)
resolve(url*2)
},1000)
})
}
async function awaitFetch(urls) {
let arr = []
for (let url of urls){
let p = await fetchUrl(url)
arr.push(p)
}
console.log(arr)
return arr
}
awaitFetch(urls)
分析:await
会等后面的fetch(url)
返回的promise
resolve()
之后,才会执行后面的代码,在此之前,await
阻塞之后的代码执行,所以这个for of
循环相当于同步循环了
结果:
1
2
3
4
[2, 4, 6, 8]
生成器实现
var urls = [1,2,3,4]
function fetchUrl(url){
return new Promise((resolve,reject) =>{
setTimeout(() =>{
console.log(url)
resolve(url*2)
},1000)
})
}
async function* fetchGen(urls){
for (let url of urls){
let p = await fetchUrl(url)
yield p
}
}
async function fetchAllByGen(urls) {
let arr = []
for await(let p of fetchGen(urls)){
arr.push(p)
}
console.log(arr)
return arr;
}
fetchAllByGen(urls)
分析:
for of
循环专门用于可迭代对象,而生成器就是一个迭代器对象。fetchGen
是一个异步生成器函数- 在
for await
循环中,每次循环会等待fetchGen(url)
返回结果,再往下执行arr.push(p)
的操作 - 为了测试,将
fetchUrl
函数中的fetch api
改成了setTimeout
结果:
1
2
3
4
[2, 4, 6, 8]