promise 解决处理异步事件时的回调地狱(一堆{}分不清谁是谁)
使用:给异步操作包装一个promise
三个状态:
状态 | 语义 |
---|---|
pending | 等待状态,正在进行网络请求或计时器还没到时间等 |
fulfilled | 满足状态,当主动回调了resole时就处于该状态 且会回调then() |
rejected | 拒绝状态当回调reject 时 且回调catch() |
链式调用:
<script>
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: '233',
age: 23
}) //模拟ajax 返回的data
}, 1000);
}).then(res => {
console.log(res); //结果 {message: '233',age: 23}
// 把这个结果处理传给下一层
res.name = '张三';
//1.
// return new Promise(resolve => {
// resolve(res)
// })
//2.
// return Promise.resolve(res);
//3.简写:其实底层还是封装一个promise
return res;
}).then(res => {
console.log(res);
// return Promise.reject('error!!!!');
throw 'error!!!!'
}).catch(err => {
console.log(err);
})
</script>
多次请求不分先后 用promise.all
Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例
注意状态改变; 全为fulfilled 状态才fulfilled ,有一个rejected 状态为rejected
<script>
Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: '233',
age: 23
}) //模拟ajax 返回的data
}, 1000);
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: '233',
age: 23
}) //模拟ajax 返回的data
}, 1000);
})
]).then(results => {
console.log(results);
})
</script>
2021-10/15再探promise
Promise 承诺,一旦异步操作结束只有成功fulfilled或者失败rejected
fulfilled和rejected合在一起称为resolved(已定型)。
本质是要么成功要么失败,都返回一个Promise 使他能继续链式调用。
let me see this code
function fn() {
return new Promise((resolve, reject) => {
//执行异步操作
//成功resolve('someting')
//失败reject("something or error")
resolve('233')
})
}
//console.log(fn());//Promise
fn().then((value) => {
console.log(value)
}, (reason) => {
console.log(reason)
});
then 返回的是一个新Promise。
function fn() {
return new Promise((resolve, reject) => {
//执行异步操作
//成功resolve('someting')
//失败reject("something or error")
reject('233')
})
}
//console.log(fn());//Promise
fn().then((value) => {
console.log(value)
//dosomething forEaxmple 异步操作
}, (reason) => {
console.log("then:" + reason)
//dosomething forEaxmple 异步操作
}).catch((reason) => {
console.log("catch:" + reason);
//dosomething forEaxmple 异步操作
})
会发现只允许then里面的方法,而catch 不再执行。
一般情况下不写then 里面的reject回调。 Promise
对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获
and
错误传递性
function fn() {
return new Promise((resolve, reject) => {
//执行异步操作
//成功resolve('someting')
//失败reject("something or error")
reject('1')
})
}
fn().then((value) => {
reject('2')
})
.then((value) => {
reject('3')
})
.catch((reason) => {
console.log(reason);
})
catch()方法返回的还是一个 Promise 对象,因此后面还可以接着调用then()方法。
实质上 then(null,rejectcallBack)==catch()
finally()方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。
const p = Promise.race([p1, p2, p3]);
只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。
用来确定一组异步操作是否都结束了(不管成功或失败)。所以,它的名字叫做”Settled“,包含了”fulfilled“和”rejected“两种情况。
返回值:
results 数组 ,每个成员是一个对象,对象的格式是固定的,对应异步操作的结果。
any()
只要参数实例有一个变成fulfilled状态,包装实例就会变成fulfilled状态;如果所有参数实例都变成rejected状态
1 ful stauts=>ful
all reject stauts=>reject
Promise.resolve() /reject()
将现有对象转为 Promise 对象