什么是promise?
promise是ES6中新增的异步编程解决方案,在代码中的表现是一个对象.
需求:从网络上加载3个资源,要求加载完资源1才能加载资源2,加载完资源2才能加载资源3,前面任何一个资源加载失败,后续资源都不加载
<script>
function request(fn) {
// 模拟发送异步请求
setTimeout(() => {
fn("拿到的数据");
}, 1000);
}
request((data) => {
console.log(data, 1);
// 执行完毕后再执行第二个
request((data) => {
console.log(data, 2);
// 执行完毕后执行第三个
request((data) => {
console.log(data, 3);
});
});
});
</script>
promise作用
企业开发中为了保证异步代码的执行顺序,俺么就会出现回调地域层层嵌套,如果回到函数嵌套的层数太多就会导致代码的阅读星,可维护性大大降低,promise对象可以将异步操作以同步流程来表示,避免了回调函数层层嵌套(调回地狱)
<script>
function request() {
// 模拟发送异步请求
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("拿到的数据");
}, 1000);
});
}
request()
.then((data) => {
console.log(data, 1);
return request();
})
.then((data) => {
console.log(data, 2);
return request();
})
.then((data) => {
console.log(data, 3);
return request();
});
</script>
promise的基本使用
1.如何创建promise对象?
new Promise(function(resolve,reject){});
promise对象不是异步的,只要创建promise对象就会立即执行存放的代码
<script>
console.log("1");
let promise = new Promise((resolve, reject) => {
console.log("2");
});
console.log("3");
</script>
2.promise是如何实现通过同步的流程表示异步的操作的?
promise对象时通过状态的改变来实现的,只要状态发生改变就会自动触发对应的函数.
3.promise对象三种状态
pending:默认状态,只要没有告诉promise任务是成功还是失败就是pending状态
fulfill(resolved):只要调用resolved函数,状态就会变为fulfilled,表示操作成功
rejected:只要调用rejected函数,状态就会变为rejected,表示操作失败
注意:状态一旦改变即不可逆
等待状态
调用成功回调
失败回调
一旦改变不可逆
只有在状态改变的时候才会调用
只有状态改变才有输出
.then方法
then方法接收两个参数
第一个参数是状态切换为成功时的回调.
第二个参数是状态为失败时的回调扫描二维码关注公众号,回复: 13433210 查看本文章
在修改promise状态时,可以传递参数给then方法中的回调函数
同一个promise对象可以多次调用then方法,当该promise对象的状态改变时,所有then方法都会被执行
then方法每次执行完毕后会返回一个新的promise
可以通过上一个promise对象的then方法给下一个promise对象的then方法传递参数
注意:
无论是在上一个promise对象成功的回调还是失败的回调传递的参数,都会传递给下一个promise对象成功的回调
如果then方法返回的是一个Promise对象,那么会将返回的promise对象的执行结果中的值传递给下一个then方法
catch方法
catch其实是then(undefined,()=>{})的语法糖
如果要使用链式编程,不可以分开监听,否则会报错
原因:
1.如果配偶米色的状态是失败,但是没有对应失败的监听就会报错.
2.then方法会返回一个新的promise,新的promise会继承原有promise的状态
3.如果新的promise状态是失败,但是没有对应失败的监听也会报错
这样才行
catch方法的特点
和then一样,在修改promise状态是,可以船费参数给catch方法中的回调函数
和then一样,同一个promise对象可以多次调用catch方法,当改变该promise对象状态时,若有catch方法都会被执行
和then一样,catch方法每次执行完毕后会返回一个新的promise对象
不一样的地方
catch方法和then方法第二个参数的区别在于,catch方法可以捕获上一个promise对象then方法中的异常