Promise介绍与基本使用:
-
Promise是什么
抽象表达:
1)Promise是一门新的技术(ES6规范)
2)Promise是JS中进行异步编程的新解决方案
备注:旧方案是单纯使用回调函数
具体表达:
1)从语法上来说:Promise是一个构造函数
2)从功能上来说:Promise对象 用来封装一个异步操作并可以获取其成功/失败的结果值
-
为什么要使用Promise:
指定回调函数的方式更加灵活
1.旧的:必须在启动异步任务前指定
2.Promise:启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
支持链式调用,可以解决回调地狱问题
Promise初体验:
1.什么是回调地狱?
回调函数嵌套使用,外部回调函数异步执行的结果是嵌套的回调执行条件
2.回调地狱的缺点?
不便于阅读
不便于异常处理
3.解决方案?
promise链式调用
promise的状态改变:
-
实例对象中的一个属性:PromiseState
1、pending:未决定的
1、pending变为resolved:成功:fullfilled
2、pending变为rejected:失败
说明:只有这2种,且一个promise对象只能改变一次,无论变为成功还是失败,都会有一个结果数据,成功的结果数据一般称为value,失败的结果数据一般称为reason
promise对象的值
-
实例对象中的另一个属性:PromiseResult
保存着对象【成功/失败】的结果
-
resolve
-
reject
Promise的基本流程:
Promise API:
1、Promise构造函数:Promise(excutor){}
(1)executor函数:执行器(resolve,reject)=> {}
(2)resolve函数:内部定义成功时我们调用的函数 value=>{}
(3)reject函数:内部定义失败时我们调用的函数reason=>{}
说明:executor会在Promise内部立即同步调用,异步操作在执行器中执行
2、Promise。prototype.then方法:(onResolved,onRejected)=> {}
(1)onResolved函数:成功的回调函数(value)=>{}
(2)onRejected函数:失败的回调函数(reason)=>{}
说明:指定用于得到成功value的成功回调和用于得到失败reason的失败回调返回一个新的promise对象
3、Promise.prototype.catch方法:(onRejected)=>{}
(1)onRejected函数:失败的回调函数(reason)=>{}
4、Promise.resolve方法:(value)=>{}
(1)value:成功的数据或promise对象
说明:返回一个成功/失败的promise对象
5、Promise.reject方法:(reason)=>{}
说明:返回一个失败的promise对象
6、Promise.all方法:(promise)=>{}
(1)promise:包含n个promise的数组
说明:返回一个新的promise,只有所有的promise都成功才成功,只要有一个失败就直接失败
7、Promise.race方法:(promises)=>{}
(1)promise:包含n个promise的数组
说明:返回一个新的promise,第一个完成的promise的结果状态就是最终的结果状态
promise的关键问题:
1、如何改变promise的状态?
(1)resolve(value):pending就会变为resolve
(2)reject(reason):pending就会变为rejected
(2)抛出异常:throw:pending就会变为rejected
2、一个promise指定多个成功/失败回调函数,都会调用吗?
当promise改变为对应状态时都会调用
3、改变promise状态和指定回调函数谁先谁后?
(1)都有可能,正常情况下是先指定回调再改变状态,但也可以先改变状态再指定回调
(2)如何先改变状态再指定回调?
①在执行器中直接调用resolve()/reject()
②延迟更长时间才调用then()
(3)什么时候才能得到数据?
①如果先指定的回调,那当状态发生改变时,回调函数就会调用,得到数据
②如果先改变的状态,那当指定回调时,回调函数就会调用,得到数据
4、promise.then()返回的新promise的结果状态由什么决定?
(1)简单表达:由then()指定的回调函数执行的结果决定
(2)详细表达:
①如果抛出异常,新promise变为rejected,reason为抛出的异常
②如果返回的是非promise的任意值,新promise变为resolved,value为返回的值
③如果返回的是另一个新promise,此promise的结果就会成为新promise的结果
5、promise如何串联多个操作任务:
(1)promise的then()返回一个新的promise,可以看成then()的链式调用
(2)通过then的链式调用串联多个同步/异步任务
6、promise异常穿透?
(1)当使用promise的then链式调用时,可以在最后指定失败的回调
(2)前面任何操作作出了异常,都会传到最后失败的回调中处理
7、中断promise链?
(1)当使用promise的then链式调用时,在中间中断,不再调用后面的回调函数
(2)办法:在回调函数中返回一个pending状态的promise对象
Promise自定义封装:
class Promise {
// 构造方法
constructor(executor) {
// 添加属性
this.PromiseState = "pending";
this.PromsieResult = null;
// 声明一个属性
this.callbacks = [];
const self = this; //self _this that
// resolve函数
function resolve(data) {
// 判断状态
if (self.PromiseState !== "pending") return;
// 1、修改对象的状态(promiseState)
self.PromiseState = "fulfilled";
// 2、设置对象结果值(promiseResult)
self.PromsieResult = data;
// 调用成功的回调函数
self.callbacks.forEach((item) => {
setTimeout(() => {
item.onResolved(data);
});
});
}
function reject(data) {
if (self.PromiseState !== "pending") return;
// 1、修改对象的状态(promiseState)
self.PromiseState = "rejected";
// 2、设置对象结果值(promiseResult)
self.PromsieResult = data;
// 调用失败的回调函数
self.callbacks.forEach((item) => {
setTimeout(() => {
item.onRejected(data);
});
});
}
try {
// 同步调用[执行器函数]
executor(resolve, reject);
} catch (e) {
// 修改promise对象状态为【失败】
reject(e);
}
}
// then方法封装
then(onResolved, onRejected) {
const self = this;
// 判断回调的参数
if (typeof onRejected !== "function") {
onRejected = (reason) => {
throw reason;
};
}
if (typeof onResolved !== "function") {
onResolved = (value) => value;
}
return new Promise((resolve, reject) => {
// 封装函数
function callback(type) {
try {
// 执行成功的回调函数
let result = type(self.PromsieResult);
// 判断
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
// onResolved(this.PromsieResult);
}
// 调用回调函数
if (this.PromiseState === "fulfilled") {
setTimeout(() => {
callback(onResolved);
});
}
if (this.PromiseState === "rejected") {
setTimeout(() => {
callback(onRejected);
});
}
// 判断pending状态
if (this.PromiseState == "pending") {
// 保存回调函数
this.callbacks.push({
onResolved: function () {
callback(onResolved);
},
onRejected: function () {
callback(onRejected);
},
});
}
});
}
// catch方法
catch(onRejected) {
return this.then(undefined, onRejected);
}
// resolve方法
static resolve(value) {
// 返回Promise对象
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
// 状态设置为成功
resolve(value);
}
});
}
// reject方法
static reject(reason) {
return new Promise((resolve, reject) => {
reject(reason);
});
}
// 添加all方法
static all(promise) {
// 返回结果为Promise对象
return new Promise((resolve, reject) => {
// 声明变量
let count = 0;
let arr = [];
// 遍历
for (let i = 0; i < promise.length; i++) {
promise[i].then(
(v) => {
// 得知对象的状态是成功的
// 每个promise对象都成功,才能执行resolve对象
count++;
// 将当前promise对象成功的结果,存入到数组中
arr[i] = v;
// 判断
if (count == promise.length) {
resolve(arr);
}
},
(r) => {
reject(r);
}
);
}
});
}
// 添加一个race方法
static race(promise) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promise.length; i++) {
promise[i].then(
(v) => {
// 修改返回对象的状态为成功
resolve(v);
},
(r) => {
reject(r);
}
);
}
});
}
}
async与await:
async函数
1、函数的返回值为promise对象
2、promise对象的结果由async函数执行的返回值决定
await表达式:
1、await右侧的表达式一般为promise对象,但也可以是其他的值
2、如果表达式是promise对象,await返回值是promise成功的值
3、如果表达式是其他值,直接将此值作为await的返回值
注意:
1、await必须写在async函数中,但async函数中可以没有await
2、如果await的promise失败了,就会抛出异常,需要通过try...catch捕获处理