一、Promise基本概念
1.简介
Promise是ES6中新增的异步编程解决方案,本质为一个对象
2.作用
企业开发中为了保存异步代码的执行顺序, 那么就会出现回调函数层层嵌套
如果回调函数嵌套的层数太多, 就会导致代码的阅读性, 可维护性大大降低
而 promise对象可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套(回调地狱)
应用举例:从网络上加载3个资源, 要求加载完资源1才能加载资源2, 加载完资源2才能加载资源3
二、Promise使用
1.使用规范
new Promise(function(resolve, reject){});
实现原理:promise对象是通过状态的改变来实现的, 只要状态发生改变就会自动触发对应的函数 前面任何一个资源加载失败, 后续资源都不加载
2.状态介绍
状态 | 说明 |
---|---|
pending | 默认状态,只要没有告诉promise任务是成功还是失败就是pending状态 |
fulfilled(resolved) | 只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功 |
rejected | 只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功 |
注意点: 状态一旦改变既不可逆
既从pending变为fulfilled, 那么永远都是fulfilled, 既从pending变为rejected, 那么永远都是rejected
3.then方法
then方法接收两个参数
第一个参数是状态切换为成功时的回调, 第二个参数是状态切换为失败时的回调
promise.then(function () {}, function () {});
then方法特点:
- 在修改promise状态时, 可以传递参数给then方法中的回调函数
let promise = new Promise(function (resolve, reject) {
resolve("111"); // 将状态修改为成功
// reject("aaa"); // 将状态修改为失败
});
// promise.then(function (data) {
// console.log("成功", data);
// }, function (data) {
// console.log("失败", data);
// });
```javascript
2. 同一个promise对象可以多次调用then方法
当改变promise对象的状态时所有then方法都会被执行
```javascrip
let promise = new Promise(function (resolve, reject) {
resolve(); //将状态修改为成功
//reject(); //将状态修改为失败
});
promise.then(function () {
console.log("成功1");
}, function () {
console.log("失败1");
});
promise.then(function () {
console.log("成功2");
}, function () {
console.log("失败2");
});
```javascript
3. then方法每次执行完毕后会返回一个全新的promise对象
```javascrip
let promise = new Promise(function (resolve, reject) {
//resolve(); //将状态修改为成功
reject(); //将状态修改为失败
});
let p2 = promise.then(function () {
console.log("成功1");
}, function () {
console.log("失败1");
});
let p3 = p2.then(function () {
console.log("成功2");
}, function () {
console.log("失败2");
});
p3.then(function () {
console.log("成功3");
}, function () {
console.log("失败3");
});
console.log(promise);
console.log(p2);
console.log(p3);
console.log(promise === p2);//false
console.log(p3 === p2);//false
前提为产生对象的then方法里面有两个参数,返回的为非promise对象
若最初的promis对象状态是默认,则then返回的都为默认状态
若最初的promis对象状态是成功或失败,则then返回的都为成功状态
-
可以通过上一个promise对象的then方法给下一个promise对象的then方法传递参数
无论是在 上一个promise对象成功的回调还是失败的回调 传递的参数,都会传递给下一个promise对象then方法成功的回调!!!
let promise = new Promise(function (resolve, reject) {
reject("aaa"); // 将状态修改为失败
//resolve("111"); // 将状态修改为成功
});
let p2 = promise.then(function (data) {
console.log("成功1", data);//成功1 111
return "222";
}, function (data) {
console.log("失败1", data);//失败1 aaa
return "bbb";
});
p2.then(function (data) {
console.log("成功2", data);//成功2 222 或者 成功2 bbb
}, function (data) {
console.log("失败2", data);
});
- 如果then方法返回的是一个Promise对象, 那么会将返回的Promise对象中传递的值传递给下一个then方法的参数
并且这个promise对象的状态就是then方法产生的那个promise对象的状态
let promise = new Promise(function (resolve, reject) {
resolve("111"); // 将状态修改为成功
//reject("aaa"); // 将状态修改为失败
});
let p = new Promise(function (resolve, reject) {
//resolve("222"); // 将状态修改为成功
//reject("bbb"); // 将状态修改为失败
});
let pp = new Promise(function (resolve, reject) {
//resolve("333"); // 将状态修改为成功
//reject("ccc"); // 将状态修改为失败
});
let p2 = promise.then(function (data) {
console.log("成功1", data);//成功1 111
return p;
}, function (data) {
console.log("失败1", data);//失败1 aaa
return pp;
//return "ddd";//返回的不是promise对象则p2的状态一定为成功
});
p2.then(function (data) {
console.log("成功2", data);//成功2 222 或者 成功2 ddd
}, function (data) {
console.log("失败2", data);
});
// + + 成功1 111 成功2 222
// + - 成功1 111 失败2 bbb
// - + 失败1 aaa 成功2 333
// - - 失败1 aaa 失败2 ccc
3.catch方法
catch 其实是 then(undefined, () => {}) 的语法糖(Syntactic sugar) 1
catch方法特点和then一致
catch方法可以捕获上一个promise对象then方法中的异常
let promise = new Promise(function (resolve, reject) {
resolve();
});
promise.then(function () {
console.log("成功");
xxx
}).catch(function (e) {
console.log("失败", e);//e是错误原因
});
注意点:如果需要分开监听, 即通过then监听成功,通过catch监听失败那么必须使用链式编程,否则会抛出异常
let promise = new Promise(function (resolve, reject) {
//resolve(); // 将状态修改为成功
reject(); // 将状态修改为失败
});
promise.then(function (){console.log('成功');}).catch(function (){console.log('失败');})
// let it = promise.then(function () {//因为then方法没有第二个参数产生的新promise对象是失败状态,所以需要给他一个失败方法的监听不然会抛出异常
// console.log("成功");
// });
// console.log(it);//失败
// it.catch(function () {
// console.log("失败");
// });
三 、Promise静态方法
1.all方法
all方法接收一个数组
如果数组中有多个Promise对象,只有都成功的情况才会执行then方法,并且会按照添加的顺序(并不是加载的快慢顺序), 将所有成功的结果重新打包到一个数组中返回
如果数组中不是Promise对象, 那么会直接执行then方法
2.race方法
race方法接收一个数组
如果数组中有多个Promise对象, 谁先返回状态就听谁的, 后返回的会被抛弃
如果数组中不是Promise对象, 那么会直接执行then方法
总结
今日完成10个任务点
一个百度输入框案例
语法糖(Syntactic sugar),也译为糖衣语法,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用 通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会 ↩︎