Promise基础(下)
1. 初始结构搭建//Promise.html文件<script src="./Promise.js"></script><script>let P = new Promise((resolve, reject) => {resolve("OK");});P.then((value) => {console.log(value);},
·
目录
2. resolve与reject (带注释的是新增的代码)
4. Promise状态只能修改一次(带注释的是新增的代码)
11. catch方法与异常穿透(照着视频敲的,但是控制台未打印)
14.Promise.all封装【每个都成功才返回状态】(异步返回的数组不对: ['very Good', 'Success', 'very Good'])
1. 初始结构搭建
//Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise((resolve, reject) => {
resolve("OK");
});
P.then(
(value) => {
console.log(value);
},
(reason) => {
console.warn(reason);
}
);
</script>
// Promise.js文件
//声明构造函数
function Promise(executor) {};
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {};
2. resolve与reject (带注释的是新增的代码)
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise((resolve, reject) => {
resolve("OK");
//reject("error");
});
console.log(P)
</script>
// Promise.js文件
function Promise(executor) {
//添加属性
this.PromiseState = "pending";
this.PromiseResult = null;
// resolve函数
const resolve = (data) => {
//1. 修改对象的属性【PromiseState】
this.PromiseState = "resolved";
//2.修改对象结果值【PromiseResult】
this.PromiseResult = data;
};
// reject函数;
const reject = (data) => {
//1. 修改对象的属性【PromiseState】
this.PromiseState = "rejected";
//2.修改对象结果值【PromiseResult】
this.PromiseResult = data;
};
executor(resolve, reject);
}
Promise.prototype.then = function (onResolved, onRejected) {};
3. 抛出异常(带注释的是新增的代码)
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise((resolve, reject) => {
throw '抛出异常'
});
console.log(P)
</script>
// Promise.js文件
function Promise(executor) {
this.PromiseState = "pending";
this.PromiseResult = null;
const resolve = (data) => {
this.PromiseState = "resolved";
this.PromiseResult = data;
};
const reject = (data) => {
this.PromiseState = "rejected";
this.PromiseResult = data;
};
//抛出异常
try {
executor(resolve, reject);
} catch (e) {
//修改promise对象状态为【失败】
reject(e);
}
}
Promise.prototype.then = function (onResolved, onRejected) {};
4. Promise状态只能修改一次(带注释的是新增的代码)
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise((resolve, reject) => {
resolve("OK");
reject("error");
//throw '抛出异常'
});
console.log(P)
</script>
// Promise.js文件
function Promise(executor) {
this.PromiseState = "pending";
this.PromiseResult = null;
const resolve = (data) => {
//判断状态
if (this.PromiseState !== "pending") return;
this.PromiseState = "resolved";
this.PromiseResult = data;
};
const reject = (data) => {
//判断状态
if (this.PromiseState !== "pending") return;
this.PromiseState = "rejected";
this.PromiseResult = data;
};
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
Promise.prototype.then = function (onResolved, onRejected) {};
5. then方法执行回调(带注释的是新增的代码)
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise((resolve, reject) => {
resolve("OK");
//reject("error");
//throw '抛出异常'
});
P.then(
(value) => {
console.log(value);
},
(reason) => {
console.warn(reason);
);
</script>
// Promise.js文件
function Promise(executor) {
this.PromiseState = "pending";
this.PromiseResult = null;
const resolve = (data) => {
if (this.PromiseState !== "pending") return;
this.PromiseState = "resolved";
this.PromiseResult = data;
};
const reject = (data) => {
if (this.PromiseState !== "pending") return;
this.PromiseState = "rejected";
this.PromiseResult = data;
};
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
Promise.prototype.then = function (onResolved, onRejected) {
//调用回调函数 PromiseState
if (this.PromiseState === "resolved") {
onResolved(this.PromiseResult);
}
if (this.PromiseState === "rejected") {
onRejected(this.PromiseResult);
}
};
6. 异步回调then方法实现(带注释的是新增的代码)
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise((resolve, reject) => {
//异步
setTimeout(() => {
// resolve("OK");
reject("error");
// throw '抛出异常'
}, 1000);
});
P.then(
(value) => {
console.log(value);
},
(reason) => {
console.warn(reason);
);
</script>
// Promise.js文件
function Promise(executor) {
this.PromiseState = "pending";
this.PromiseResult = null;
//声明一个属性
this.callback={};
const resolve = (data) => {
if (this.PromiseState !== "pending") return;
this.PromiseState = "resolved";
this.PromiseResult = data;
//调用成功的回调函数
if(this.callback.onResolved){
this.callback.onResolved(data)
}
};
const reject = (data) => {
if (this.PromiseState !== "pending") return;
this.PromiseState = "rejected";
this.PromiseResult = data;
//调用失败的回调函数
if(this.callback.onRejected){
this.callback.onRejected(data)
}
};
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
Promise.prototype.then = function (onResolved, onRejected) {
if (this.PromiseState === "resolved") {
onResolved(this.PromiseResult);
}
if (this.PromiseState === "rejected") {
onRejected(this.PromiseResult);
}
//判断pending状态(异步)
if (this.PromiseState === "pending") {
//保存回调函数
this.callback = {
onResolved:onResolved,
onRejected:onRejected
}
}
};
7. 指定多个回调(带注释的是修改的代码)
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise((resolve, reject) => {
//异步
setTimeout(() => {
// resolve("OK");
reject("error");
// throw '抛出异常'
}, 1000);
});
//第一个then
P.then(
(value) => {
console.log(value);
},
(reason) => {
console.warn(reason);
}
);
//第二个then
P.then(
(value) => {
console.log(value);
},
(reason) => {
console.warn(reason);
}
);
console.log(P);
</script>
// Promise.js文件
function Promise(executor) {
this.PromiseState = "pending";
this.PromiseResult = null;
//声明一个属性
this.callbacks=[];
const resolve = (data) => {
if (this.PromiseState !== "pending") return;
this.PromiseState = "resolved";
this.PromiseResult = data;
//调用成功的回调函数
this.callbacks.forEach(item=>{
item.onResolved(data)
})
};
const reject = (data) => {
if (this.PromiseState !== "pending") return;
this.PromiseState = "rejected";
this.PromiseResult = data;
//调用失败的回调函数
this.callbacks.forEach(item=>{
item.onRejected(data)
})
};
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
Promise.prototype.then = function (onResolved, onRejected) {
if (this.PromiseState === "resolved") {
onResolved(this.PromiseResult);
}
if (this.PromiseState === "rejected") {
onRejected(this.PromiseResult);
}
//判断pending状态(异步)
if (this.PromiseState === "pending") {
//保存回调函数
this.callbacks.push( {
onResolved:onResolved,
onRejected:onRejected
})
}
};
8. 同步状态下then返回结果(带注释的是新增的代码)
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise((resolve, reject) => {
resolve("OK");
});
const res= P.then(
(value) => {
// console.log(value);
// return 'Hello Promise'; //非promise类型
return new Promise((resolve, reject) => { // promise类型
// resolve('success'); //成功
// reject('oh no'); //失败
throw "Fail"; //抛出异常
});
},
(reason) => {
console.warn(reason);
);
console.log(res)
</script>
// Promise.js文件
function Promise(executor) {
this.PromiseState = "pending";
this.PromiseResult = null;
this.callbacks=[];
const resolve = (data) => {
if (this.PromiseState !== "pending") return;
this.PromiseState = "resolved";
this.PromiseResult = data;
this.callbacks.forEach((item) => {
item.onResolved(data);
});
};
const reject = (data) => {
if (this.PromiseState !== "pending") return;
this.PromiseState = "rejected";
this.PromiseResult = data;
this.callbacks.forEach((item) => {
item.onRejected(data);
});
};
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
Promise.prototype.then = function (onResolved, onRejected) {
return new Promise((resolve, reject) => {
//调用回调函数 PromiseState
//抛出异常处理(try{} catch(){})
try {
if (this.PromiseState === "resolved") {
//获取回调函数的执行结果
let result = onResolved(this.PromiseResult);
//判断
if (result instanceof Promise) {
//如果是promise类型的对象
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
//结果的对象状态为【成功】
resolve(result);
}
}
} catch (e) {
reject(e);
}
if (this.PromiseState === "rejected") {
onRejected(this.PromiseResult);
}
if (this.PromiseState === "pending") {
this.callbacks.push({
onResolved: onResolved,
onRejected: onRejected,
});
}
});
};
9. 异步状态下then返回结果(带注释的是新增的代码)
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise((resolve, reject) => {
setTimeout(() => {
// resolve("OK");
reject('Error')
}, 1000);
});
let res = P.then(
(value) => {
// console.log(value);
// console.log('521');
throw '抛出异常'
},
(reason) => {
// console.warn(reason);
throw '抛出异常'
}
);
</script>
// Promise.js文件
function Promise(executor) {
this.PromiseState = "pending";
this.PromiseResult = null;
this.callbacks = [];
const resolve = (data) => {
if (this.PromiseState !== "pending") return;
this.PromiseState = "resolved";
this.PromiseResult = data;
this.callbacks.forEach((item) => {
item.onResolved(data);
});
};
const reject = (data) => {
if (this.PromiseState !== "pending") return;
this.PromiseState = "rejected";
this.PromiseResult = data;
this.callbacks.forEach((item) => {
item.onRejected(data);
});
};
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
const self = this;
return new Promise((resolve, reject) => {
//调用回调函数 PromiseState
//抛出异常处理(try{} catch(){})
try {
if (this.PromiseState === "resolved") {
//获取回调函数的执行结果
let result = onResolved(this.PromiseResult);
//判断
if (result instanceof Promise) {
//如果是promise类型的对象
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
//结果的对象状态为【成功】
resolve(result);
}
}
} catch (e) {
reject(e);
}
if (this.PromiseState === "rejected") {
try {
let result = onRejected(this.PromiseResult);
if (result instanceof Promise) {
//如果是promise类型的对象
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
}
//判断pending状态(异步)
if (this.PromiseState === "pending") {
//保存回调函数
this.callbacks.push({
onResolved: function () {
//执行成功的回调函数
try {
let result = onResolved(self.PromiseResult);
if (result instanceof Promise) {
//如果是promise类型的对象
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
//结果的对象状态为【成功】
resolve(result);
}
} catch (e) {
reject(e);
}
},
onRejected: function () {
//执行成功的回调函数
try {
let result = onRejected(self.PromiseResult);
if (result instanceof Promise) {
//如果是promise类型的对象
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
//结果的对象状态为【成功】
resolve(result);
}
} catch (e) {
reject(e);
}
},
});
}
});
};
10.优化
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise((resolve, reject) => {
// resolve('OK');
// reject('Error')
// throw '抛出异常'
setTimeout(() => {
// resolve("OK");
// reject("Error");
}, 1000);
});
let res = P.then(
(value) => {
console.log(value);
},
(reason) => {
console.warn(reason);
}
);
console.log(res);
</script>
// Promise.js文件
//声明构造函数
function Promise(executor) {
// 实参【resolve函数】【reject函数】,名字也可以改成a,b等等,用的时候对应即可
//添加属性
this.PromiseState = "pending";
this.PromiseResult = null;
//声明一个属性
this.callbacks = [];
// resolve函数
const resolve = (data) => {
//判断状态
if (this.PromiseState !== "pending") return;
//1. 修改对象的属性【PromiseState】
this.PromiseState = "resolved";
//2.修改对象结果值【PromiseResult】
this.PromiseResult = data;
//调用成功的回调函数
this.callbacks.forEach((item) => {
item.onResolved(data);
});
};
// reject函数;
const reject = (data) => {
//判断状态
if (this.PromiseState !== "pending") return;
//1. 修改对象的属性【PromiseState】
this.PromiseState = "rejected";
//2.修改对象结果值【PromiseResult】
this.PromiseResult = data;
//调用失败的回调函数
this.callbacks.forEach((item) => {
item.onRejected(data);
});
};
//抛出异常
try {
//执行器函数是同步调用的
executor(resolve, reject);
} catch (e) {
//修改promise对象状态为【失败】
reject(e);
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
return new Promise((resolve, reject) => {
//封装函数
callback = (type) => {
try {
//获取回调函数的执行结果
let result = type(this.PromiseResult);
//判断
if (result instanceof Promise) {
//如果是promise类型的对象
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
//结果的对象状态为【成功】
resolve(result);
}
} catch (e) {
reject(e);
}
};
//调用回调函数 PromiseState
if (this.PromiseState === "resolved") {
callback(onResolved);
}
if (this.PromiseState === "rejected") {
callback(onRejected);
}
//判断pending状态(异步)
if (this.PromiseState === "pending") {
//保存回调函数
this.callbacks.push({
onResolved: function () {
callback(onResolved);
},
onRejected: function () {
//执行成功的回调函数
callback(onRejected);
},
});
}
});
};
11. catch方法与异常穿透(照着视频敲的,但是控制台未打印)
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise((resolve, reject) => {
setTimeout(() => {
reject("OK");
}, 1000);
});
P.then((value) => {
console.log(222);
}).then(value=>{
console.log(333)
}).catch(reason=>{
console.log(reason)
})
/*
P.then().then((value) => {
console.log(222);
}).then(value=>{
console.log(333)
}).catch(reason=>{
console.log(reason)
})
*/
</script>
// Promise.js文件
//声明构造函数
function Promise(executor) {
...
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
//判断回调函数参数
if (typeof onRejected !== "function") {
onRejected = (reason) => {
throw reason;
};
}
//第一个回调空【如上方注释代码】
if (typeof onResolved !== "function") {
onResolved = (value) => value;
}
......
};
//添加catch方法
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
};
12.Promise.resove封装
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = new Promise.resolve("OK")
console.log(P) //OK
let P2 = new Promise.resolve(new Promise((resolve,reject)=>{resolve("Success")}))
console.log(P2) //Success
let P3 = new Promise.resolve(Promise.resolve("OKK"));
console.log(P3); //OKK
</script>
// Promise.js文件
//声明构造函数
function Promise(executor) {
......
}
......
//添加 resolve 方法
Promise.resolve = function (value) {
//返回promise对象
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
//状态设置为成功
resolve(value);
}
});
};
13.Promise.reject封装
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let P = Promise.reject("Error");
let P2 = Promise.reject(new Promise((resolve, reject) => {resolve("Fail")}));
</script>
// Promise.js文件
//声明构造函数
function Promise(executor) {
......
}
......
//添加 reject 方法
Promise.reject = function (reason) {
return new Promise((resolve, reject) => {
reject(reason);
});
};
14.Promise.all封装【每个都成功才返回状态】(异步返回的数组不对: ['very Good', 'Success', 'very Good'])
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let p1 = new Promise((resolve,reject)=>{
//resolve("OK")
setTimeout(()=>{
resolve("OK")
},1000)
})
let p2 = Promise.resolve("Success")
let p3 = Promise.resolve("very Good")
// 调用all方法
let result = Promise.all([p1,p2,p3])
console.log(result);
</script>
// Promise.js文件
//声明构造函数
function Promise(executor) {
......
}
......
//添加 Promise.all 方法
Promise.all = function (promises) {
//返回结果为promise对象
return new Promise((resolve, reject) => {
//声明变量
let count = 0;
let arr =[]
//遍历
for (let i = 0; i < promises.length; i++) {
promises[i].then(
(v) => {
//得知对象的状态是成功
//每个promise对象 都成功
count++;
//将当前promise对象成功的结果 存入到数组arr中
arr[i]=v
//判断
if(count === promises.length){
//修改状态
resolve(arr)
}
},
(r) => {
reject(r);
}
);
}
});
};
15.Promise.race封装【返回第一个成功的状态】
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let p1 = new Promise((resolve,reject)=>{
//resolve("OK")
setTimeout(()=>{
resolve("OK")
},1000)
})
let p2 = Promise.resolve("Success")
let p3 = Promise.resolve("very Good")
// 调用all方法
let result = Promise.race([p1,p2,p3])
console.log(result);
</script>
// Promise.js文件
//声明构造函数
function Promise(executor) {
......
}
......
//添加 promise.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);
}
);
}
});
};
16.回调函数【异步执行】
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let p1 = new Promise((resolve,reject)=>{
resolve("OK")
// reject("OK")
console.log(111);
})
p1.then(value=>{console.log(222);
},reason=>{console.log(444);
})
console.log(333);
</script>
// Promise.js文件
//声明构造函数
//声明构造函数
function Promise(executor) {
......
// resolve函数
const resolve = (data) => {
//判断状态
if (this.PromiseState !== "pending") return;
//1. 修改对象的属性【PromiseState】
this.PromiseState = "resolved";
//2.修改对象结果值【PromiseResult】
this.PromiseResult = data;
//调用成功的回调函数【定时器实现异步】
setTimeout(() => {
this.callbacks.forEach((item) => {
item.onResolved(data);
});
});
};
// reject函数;
const reject = (data) => {
//判断状态
if (this.PromiseState !== "pending") return;
//1. 修改对象的属性【PromiseState】
this.PromiseState = "rejected";
//2.修改对象结果值【PromiseResult】
this.PromiseResult = data;
//调用失败的回调函数【定时器实现异步】
setTimeout(() => {
this.callbacks.forEach((item) => {
item.onRejected(data);
});
});
};
......
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
......
return new Promise((resolve, reject) => {
......
//调用回调函数 PromiseState
if (this.PromiseState === "resolved") {
//【定时器实现异步】
setTimeout(() => {
callback(onResolved);
});
}
if (this.PromiseState === "rejected") {
//【定时器实现异步】
setTimeout(() => {
callback(onRejected);
});
}
......
});
};
......
17.class版本封装(结果未出现,需重新观看)
// Promise.html文件
<script src="./Promise.js"></script>
<script>
let p1 = new Promise((resolve, reject) => {
resolve("OK");
});
p1.then(
(value) => {
console.log(value);
},
(reason) => {
console.log(reason);
}
);
</script>
// Promise.js文件
class Promise {
//构造方法
constructor(executor) {
//添加状态属性与结果值属性
this.PromiseState = "pending";
this.PromiseResult = null;
// 定义callback属性,保存pending状态的回调函数
this.callbacks = [];
//保存实例对象的this值
const that = this;
//自定义resolve函数,名字不一定用resolve
function resolve(data) {
//判断状态是否修改过
if (that.PromiseState !== "pending") return;
//改变状态属性
that.PromiseState = "fulfilled"; // 或者 resolve
//改变结果值属性
that.PromiseResult = data;
//异步任务成功后执行回调函数
setTimeout(() => {
that.callbacks.forEach((item) => {
item.onResolved(data);
});
});
}
//自定义reject函数
function reject(data) {
//判断状态是否修改过,改过就直接返回
if (that.PromiseState !== "pending") return;
//改变状态属性
that.PromiseState = "rejected";
//改变结果值属性
that.PromiseResult = data;
//异步任务失败后执行回调函数
setTimeout(() => {
that.callbacks.forEach((item) => {
item.onRejected(data);
});
});
}
try {
//同步调用【执行器函数】
executor(resolve, reject);
} catch (e) {
//更改Promise对象为失败
reject(e);
}
}
//then方法封装
then(onResolved, onRejected) {
const that = 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(that.PromiseResult);
//判断
if (result instanceof Promise) {
//如果是Promise对象
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
//结果对象状态为【成功】
resolve(result);
}
} catch (e) {
reject(e);
}
}
//如果Promise状态为fulfilled回调这个函数
if (this.PromiseState === "fulfilled") {
setTimeout(() => {
callback(onResolved);
});
}
//如果Promise状态为rejected回调这个函数
if (this.PromiseState === "rejected") {
setTimeout(() => {
callback(onRejected);
});
}
//如果Promise状态为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(promises) {
return new Promise((resolve, reject) => {
//添加变量
let count = 0;
// 存放成功结果数组
let arr = [];
//遍历全部
for (let i = 0; i < promises.length; i++) {
promises[i].then(
(v) => {
//能进到证明其为成功
count++;
//保存成功结果
arr[i] = v;
//如果全部成功
if (count === promises.length) {
//状态为成功
resolve(arr);
}
},
(r) => {
//能进到证明其为失败
reject(r);
}
);
}
});
}
//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);
}
);
}
});
}
}
18. 参考资料
更多推荐
已为社区贡献1条内容
所有评论(0)