1.promise对象
解决回调地狱的办法之一,通过链式调用来解决程序异步执行。
Promise对象有三个状态分别是:pending(等待中)、resolved(已经完成)、rejected(得到结果)
promise的实例方法:
(1)then()得到异步任务的正确结果
(2).catch()获取异常信息
promise的属性方法:
all():所有的任务都执行成功结束后调用
allsettled():所有的方法执行完后调用
any():有一个.then()成功执行就会调用
race():有一个.then()执行就会调用
reslove():根据传递的参数不同返回不同的结果
reject():返回一个状态为rejectted的promise对象
缺点:无法取消Promise,一旦新建他就会立刻执行,无法中途退出,如果不设置回调函数,Promise内部抛出的错误不会反应到外部,处于pending状态无法知道目前进找到哪一个阶段了。
基本用法:
<script>
const p1=new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功的数据')
// reject('失败的数据')
}, 1000)
}).then(
value => {
console.log('onResolved()1',value);
}
).catch(
resaon=>{
console.log('onRejected()1',resaon);
}
)
</script>
2.async、await
async函数返回值是一个promise对象,返回的promise的结果是由函数执行的结果决定
是promise链式调用的优化,属于es8语法
<script>
async function p1(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('成功的值')
},1000);
})
}
const result=p1();
result,then(
value=>{
console.log('onResovled()',value);
},
resaon=>{
console.log('onRejected()',reason);
}
)
</script>
await只能写在async函数中
一般用await去等待async函数完成,await 等待的是一个表达式,表达式的计算结果是 promise 对象或其它值,因此,await后面实际可以接收普通函数调用或直接量。
如果await等到的不是promise对象,表达式运算结果就是它等到的东西。
如果是promise对象,await会阻塞后面的代码,等promise对象处理成功,得到的值为await表达式的运算结果。虽然await阻塞了,但await在async中,async不会阻塞,它内部所有的阻塞都被封装在一个promise对象中异步执行。
任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。
<script>
async function p1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功的值')
}, 1000);
})
}
const result = p1();
result.then(
value => {
console.log('onResovled()', value);
},
resaon => {
console.log('onRejected()', reason);
}
)
function p2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功的值1')
}, 1000);
})
}
async function p3() {
const value = await p2();//await右侧表达式为promise对象,得到的就是promise成功的值
//const value= await 函数、数值 await右侧变大时不是promise得到的结果就是它本身的值
console.log(value);
}
p3()
</script>