Promise
一、什么是Promise?
是ES6出来的一种新的语法,用来解决异步问题,防止回调地狱问题的,本身是个构造函数。。。。。。
二、Promise常用API
//API
*1.Promise构造函数:promise(excutor){}
(1)executor函数:执行器(resolve,reject)=>{}
(2)resolve函数: 内部成功时我们调用的函数value=>{}
(3)reject函数: 内部失败时我们调用的函数reason=>{}
#executor会在Promise内部立即同步调用,异步操作在执行器中执行。
2.Promise.prototype.then方法(onResolve,onReject)
(1)onResolve函数:成功的回调函数(value)=>{}
(2)onReject函数: 失败的回调函数 (reason)=>{}
#返回的是一个新的Promise对象
3.Promise.prototype.catch方法:(onRejected)=>{}
(1)onRejected函数:失败的回调函数(reason)=>{}
4.Promise.resolve():返回一个成功的Promise对象
5.Promise.reject() :返回一个失败的Promise对象
6.promise.all() :参数为一个Promise数组,只有当全部成功返回时,返回的结果为一个数组。当有一个失败的 时候,返回的结果为失败那个Promise的错误返回值。
7.Promise.race() :返回一个新的Promise,且第一个完成的Promise结果状态就是最终的结果状态。
*2.修改Promise状态
(1)resolve()=>resolved/fulfilled
(2)reject ()=>rejected
(3)throw
*3.Promise链式调用
*4.中断Promise链
(1)返回一个Pendding状态的Promise://return new promise(()=>{})
三、实现Promise(构造函数)
function Promise(executor) {
//为构造函数添加属性
this.PromiseState = "pending";
this.PromiseResult = null;
//锁定this指向
const self = this;
//回调函数
this.callbacks = [];
//resolve函数
function resolve(data) {
if (self.PromiseState !== "pending") return;
self.PromiseState = "fulfilled";
self.PromiseResult = data;
//异步任务处理,增加链式调用
setTimeout(() => {
self.callbacks.forEach((item) => {
item.onResolved(data);
});
});
}
//reject函数
function reject(data) {
if (self.PromiseState !== "pending") return;
self.PromiseState = "rejected";
self.PromiseResult = data;
//异步任务处理,增加链式调用
setTimeout(() => {
self.callbacks.forEach((item) => {
item.onRejected(data);
});
});
}
try {
//excutor执行器函数在Promise内部是同步调用的
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
const self = this;
//在处理。then().then(v=>{})等异常穿透问题时,为函数添加默认值
if (typeof onResolved !== "function") {
onResolved = (v) => v;
}
if (typeof onRejected !== "function") {
onRejected = (v) => {
throw v;
};
}
return new Promise((resolve, reject) => {
//封装函数
function callback(type) {
try {
let result = type(self.PromiseResult);
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
}
//成功的回调
if (this.PromiseState === "fulfilled") {
setTimeout(() => {
callback(onResolved);
});
}
//失败的回调
if (this.PromiseState === "rejected") {
setTimeout(() => {
callback(onRejected);
});
}
//异步处理
if (this.PromiseState === "pending") {
this.callbacks.push({
onResolved: function () {
callback(onResolved);
},
onRejected: function () {
callback(onRejected);
},
});
}
});
};
//添加cathc方法
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
};
//添加resolve方法
Promise.resolve = function (value) {
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(value);
}
});
};
//添加reject方法
Promise.reject = function (reason) {
return new Promise((resolve, reject) => {
reject(reason);
});
};
//添加all方法
Promise.all = function (promises) {
//定义计数器,判断是否全部成功
let count = 0;
//定义返回数组
let arr = [];
//返回Promise对象
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(
(value) => {
count++;
arr[i] = value;
if (count === promises.length) {
resolve(arr);
}
},
(reason) => {
reject(reason);
}
);
}
});
};
//添加race方法
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
}
});
};
四、Promise实现(构造函数版本)
class Promise {
constructor(executor) {
//为构造函数添加属性
this.PromiseState = "pending";
this.PromiseResult = null;
//锁定this指向
const self = this;
//回调函数
this.callbacks = [];
//resolve函数
function resolve(data) {
if (self.PromiseState !== "pending") return;
self.PromiseState = "fulfilled";
self.PromiseResult = data;
//异步任务处理,增加链式调用
setTimeout(() => {
self.callbacks.forEach((item) => {
item.onResolved(data);
});
});
}
//reject函数
function reject(data) {
if (self.PromiseState !== "pending") return;
self.PromiseState = "rejected";
self.PromiseResult = data;
//异步任务处理,增加链式调用
setTimeout(() => {
self.callbacks.forEach((item) => {
item.onRejected(data);
});
});
}
try {
//excutor执行器函数在Promise内部是同步调用的
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
//添加then方法
then(onResolved, onRejected) {
const self = this;
//在处理。then().then(v=>{})等异常穿透问题时,为函数添加默认值
if (typeof onResolved !== "function") {
onResolved = (v) => v;
}
if (typeof onRejected !== "function") {
onRejected = (v) => {
throw v;
};
}
return new Promise((resolve, reject) => {
//封装函数
function callback(type) {
try {
let result = type(self.PromiseResult);
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
}
//成功的回调
if (this.PromiseState === "fulfilled") {
setTimeout(() => {
callback(onResolved);
});
}
//失败的回调
if (this.PromiseState === "rejected") {
setTimeout(() => {
callback(onRejected);
});
}
//异步处理
if (this.PromiseState === "pending") {
this.callbacks.push({
onResolved: function () {
callback(onResolved);
},
onRejected: function () {
callback(onRejected);
},
});
}
});
}
//添加cathc方法
catch(onRejected) {
return this.then(undefined, onRejected);
}
//添加resolve方法
static resolve(value) {
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(promises) {
//定义计数器,判断是否全部成功
let count = 0;
//定义返回数组
let arr = [];
//返回Promise对象
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(
(value) => {
count++;
arr[i] = value;
if (count === promises.length) {
resolve(arr);
}
},
(reason) => {
reject(reason);
}
);
}
});
}
//添加race方法
static race(promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
}
});
}
}