1.初始化结构搭建
1.1 结构:
1.2 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
resolve('ok')
})
p.then(value => {
console.log(value);
},reason => {
console.log(reason);
})
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
}
//添加 then 方法
Promise.prototype.then = function (onResolved,onRejected){
}
2.resolve和reject实现
2.1 代码：
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
resolve('ok')
// reject('error')
})
console.log(p);
// p.then(value => {
// console.log(value);
// },reason => {
// console.log(reason);
// })
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 定义resolve函数
function resolve(data){
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
}
// 定义reject函数
function reject(data){
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
}
// 执行executor函数
executor(resolve,reject)
}
//添加 then 方法
Promise.prototype.then = function (onResolved,onRejected){
}
3.throw抛出异常改变状态
3.1 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
// resolve('ok')
// reject('error')
throw '出错了--error'
})
console.log(p);
// p.then(value => {
// console.log(value);
// },reason => {
// console.log(reason);
// })
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 定义resolve函数
function resolve(data){
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
}
// 定义reject函数
function reject(data){
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
console.log(error);
}
}
//添加 then 方法
Promise.prototype.then = function (onResolved,onRejected){
}
4.Promise状态只能修改一次
4.1 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
resolve('ok')
reject('error')
})
console.log(p);
// p.then(value => {
// console.log(value);
// },reason => {
// console.log(reason);
// })
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
console.log(error);
}
}
//添加 then 方法
Promise.prototype.then = function (onResolved,onRejected){
}
5.then方法执行回调函数
5.1 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
resolve('ok')
reject('error')
})
console.log(p);
p.then(value => {
console.log(value);
},reason => {
console.log(reason);
})
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
console.log(error);
}
}
//添加 then 方法
Promise.prototype.then = function (onResolved,onRejected){
//执行成功回调函数
if(this.PromiseState === 'fulfilled') onResolved(this.PromiseResult)
//执行失败回调函数
if(this.PromiseState === 'rejected') onRejected(this.PromiseResult)
}
6.异步任务回调函数的执行
6.1 执行器中执行异步代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
setTimeout(function(){
resolve('ok')
},1000)
})
console.log(p);
p.then(value => {
console.log(value);
},reason => {
console.log(reason);
})
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
console.log(error);
}
}
//添加 then 方法
Promise.prototype.then = function (onResolved,onRejected){
//执行成功回调函数
if(this.PromiseState === 'fulfilled') onResolved(this.PromiseResult)
//执行失败回调函数
if(this.PromiseState === 'rejected') onRejected(this.PromiseResult)
}
6.2 原因：（为什么后台没有打印这结果） console.log(value);
异步调用，代码往下执行到p.then()方法位置，因为先指定回调函数，此时状态是pending，p.then()方法不执行，定时器开始执行，再改变状态后，p.then()方法的位置已经执行过了，所以没有输出结果
6.2 解决：
根据原因，在改变状态的时候调用回调函数。
6.3 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
setTimeout(function(){
resolve('ok')
},1000)
// reject('error')
})
console.log(p);
p.then(value => {
console.log(value);
},reason => {
console.log(reason);
})
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callback = {
}
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
if(that.callback) that.callback.onResolved(data)
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
if(that.callback) that.callback.onRejected(data)
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
console.log(error);
}
}
//添加 then 方法
Promise.prototype.then = function (onResolved,onRejected){
//执行成功回调函数
if(this.PromiseState === 'fulfilled') onResolved(this.PromiseResult)
//执行失败回调函数
if(this.PromiseState === 'rejected') onRejected(this.PromiseResult)
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks = {
onResolved,
onRejected
}
}
}
7.指定多个回调函数的实现
7.1 初始：添加多个回调
7.2 最后一个回调才会执行
alet(value) 没有输出
7.3 解决:
- 改变callback为callbacks数组，保存每次回调函数的结果
// 保存then方法的回调函数
this.callbacks = []
- resolve()/rejecte()里遍历callbacks数组
// 变成数组来保存
that.callbacks.forEach(item => {
item.onResolved(data)
})
that.callbacks.forEach(item => {
item.onRejected(data)
})
- then方法中修改保存回调函数
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved,
onRejected
})
}
7.4 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
setTimeout(function(){
resolve('ok')
},1000)
// reject('error')
})
console.log(p);
p.then(value => {
alert(value)
},reason => {
alert(value)
})
p.then(value => {
console.log(value);
},reason => {
console.log(reason);
})
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
that.callbacks.forEach(item => {
item.onResolved(data)
})
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected(data)
})
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
console.log(error);
}
}
//添加 then 方法
Promise.prototype.then = function (onResolved,onRejected){
//执行成功回调函数
if(this.PromiseState === 'fulfilled') onResolved(this.PromiseResult)
//执行失败回调函数
if(this.PromiseState === 'rejected') onRejected(this.PromiseResult)
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved,
onRejected
})
}
}
8.同步修改状态then方法结果返回
8.1 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
// setTimeout(function(){
// resolve('ok')
// },1000)
resolve('error')
})
let result = p.then(value => {
console.log(value);
// return new Promise((resolve,reject) => {
// resolve('pl')
// })
throw 'errpr'
},reason => {
console.log(reason);
})
console.log(result);
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
that.callbacks.forEach(item => {
item.onResolved(data)
})
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected(data)
})
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
console.log(error);
}
}
//添加 then 方法
Promise.prototype.then = function (onResolved,onRejected){
return new Promise((resolve,reject) => {
//执行成功回调函数
if(this.PromiseState === 'fulfilled'){
try {
let rs = onResolved(this.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
}
//执行失败回调函数
if(this.PromiseState === 'rejected') onRejected(this.PromiseResult)
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved,
onRejected
})
}
})
}
8.同步修改状态then方法结果返回
8.1 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
setTimeout(function(){
reject('ok')
},1000)
// resolve('error')
})
let result = p.then(value => {
console.log(value);
throw '123'
},reason => {
console.log(reason);
})
console.log(result);
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
that.callbacks.forEach(item => {
item.onResolved()
})
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected()
})
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
//添加 then 方法
Promise.prototype.then = function (onResolved,onRejected){
const self = this
return new Promise((resolve,reject) => {
//执行成功回调函数
if(this.PromiseState === 'fulfilled'){
try {
let rs = onResolved(this.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
}
//执行失败回调函数
if(this.PromiseState === 'rejected') onRejected(this.PromiseResult)
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved:function(){
try {
let rs = onResolved(self.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
},
onRejected:function(){
try {
let rs = onRejected(self.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
},
})
}
})
}
9.then方法的完善和优化
9.1 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
setTimeout(function(){
resolve('ok')
},1000)
// resolve('123')
})
let result = p.then(value => {
console.log(value);
return '123'
},reason => {
console.log(reason);
})
console.log(result);
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
that.callbacks.forEach(item => {
item.onResolved()
})
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected()
})
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
//添加 then 方法
Promise.prototype.then = function (onResolved,onRejected){
const self = this
return new Promise((resolve,reject) => {
function changeState(type){
try {
let rs = type(self.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
}
//执行成功回调函数
if(this.PromiseState === 'fulfilled') changeState(onResolved)
//执行失败回调函数
if(this.PromiseState === 'rejected') changeState(onRejected)
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved:function(){
changeState(onResolved)
},
onRejected:function(){
changeState(onRejected)
}
})
}
})
}
10.catch方法异常穿透及值传递
10.1 异常穿透代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
setTimeout(function(){
reject('error')
},1000)
// reject('123')
// throw '123'
})
p.then(value => {
console.log(111);
})
.then(value => {
console.log(222);
})
.catch(reason => {
console.log(reason);
})
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 保存catch方法的回调函数
this.catchCallbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
that.callbacks.forEach(item => {
item.onResolved()
})
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected()
})
that.catchCallbacks.forEach(item => {
item.onRejected()
})
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
//添加 then() 方法
Promise.prototype.then = function (onResolved,onRejected){
const self = this
// 异常穿透
if(typeof onRejected !== 'function') {
onRejected = reason => {
throw reason
}
}
// 值传递 p.then()......
if(typeof onResolved !== 'function') {
onResolved = value => value
}
return new Promise((resolve,reject) => {
function changeState(type){
try {
let rs = type(self.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
}
//执行成功回调函数
if(this.PromiseState === 'fulfilled') changeState(onResolved)
//执行失败回调函数
if(this.PromiseState === 'rejected') changeState(onRejected)
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved:function(){
changeState(onResolved)
},
onRejected:function(){
changeState(onRejected)
}
})
}
})
}
// 添加catch()方法
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected)
}
10.2 值传递代码：
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
let p = new Promise((resolve,reject) => {
setTimeout(function(){
resolve('error')
},1000)
// reject('123')
// throw '123'
})
p.then()
.then(value => {
console.log(111);
})
.then(value => {
console.log(222);
})
.catch(reason => {
console.log(reason);
})
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 保存catch方法的回调函数
this.catchCallbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
that.callbacks.forEach(item => {
item.onResolved()
})
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected()
})
that.catchCallbacks.forEach(item => {
item.onRejected()
})
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
//添加 then() 方法
Promise.prototype.then = function (onResolved,onRejected){
const self = this
// 异常穿透
if(typeof onRejected !== 'function') {
onRejected = reason => {
throw reason
}
}
// 值传递 p.then()......
if(typeof onResolved !== 'function') {
onResolved = value => value
}
return new Promise((resolve,reject) => {
function changeState(type){
try {
let rs = type(self.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
}
//执行成功回调函数
if(this.PromiseState === 'fulfilled') changeState(onResolved)
//执行失败回调函数
if(this.PromiseState === 'rejected') changeState(onRejected)
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved:function(){
changeState(onResolved)
},
onRejected:function(){
changeState(onRejected)
}
})
}
})
}
// 添加catch()方法
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected)
}
11.Promise.resolve()的封装
11.1 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
const p = Promise.resolve(Promise.resolve('ok'));
console.log(p);
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 保存catch方法的回调函数
this.catchCallbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
that.callbacks.forEach(item => {
item.onResolved()
})
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected()
})
that.catchCallbacks.forEach(item => {
item.onRejected()
})
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
//添加 then() 方法
Promise.prototype.then = function (onResolved,onRejected){
const self = this
// 异常穿透
if(typeof onRejected !== 'function') {
onRejected = reason => {
throw reason
}
}
// 值传递 p.then()......
if(typeof onResolved !== 'function') {
onResolved = value => value
}
return new Promise((resolve,reject) => {
function changeState(type){
try {
let rs = type(self.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
}
//执行成功回调函数
if(this.PromiseState === 'fulfilled') changeState(onResolved)
//执行失败回调函数
if(this.PromiseState === 'rejected') changeState(onRejected)
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved:function(){
changeState(onResolved)
},
onRejected:function(){
changeState(onRejected)
}
})
}
})
}
// 添加catch()方法
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected)
}
// 添加resolve方法
Promise.resolve = function(value) {
return new Promise((resolve,reject) => {
// 判断
if(value instanceof Promise) {
//是Promise对象
value.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(value)
}
})
}
12.Promise.reject()的封装
12.1 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
const p = Promise.reject(new Promise((resolve,reject) => {
resolve('ok')
}));
console.log(p);
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 保存catch方法的回调函数
this.catchCallbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
that.callbacks.forEach(item => {
item.onResolved()
})
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected()
})
that.catchCallbacks.forEach(item => {
item.onRejected()
})
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
//添加 then() 方法
Promise.prototype.then = function (onResolved,onRejected){
const self = this
// 异常穿透
if(typeof onRejected !== 'function') {
onRejected = reason => {
throw reason
}
}
// 值传递 p.then()......
if(typeof onResolved !== 'function') {
onResolved = value => value
}
return new Promise((resolve,reject) => {
function changeState(type){
try {
let rs = type(self.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
}
//执行成功回调函数
if(this.PromiseState === 'fulfilled') changeState(onResolved)
//执行失败回调函数
if(this.PromiseState === 'rejected') changeState(onRejected)
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved:function(){
changeState(onResolved)
},
onRejected:function(){
changeState(onRejected)
}
})
}
})
}
// 添加catch()方法
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected)
}
// 添加resolve方法
Promise.resolve = function(value) {
return new Promise((resolve,reject) => {
// 判断
if(value instanceof Promise) {
//是Promise对象
value.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(value)
}
})
}
// 添加reject方法
Promise.reject = function(value) {
return new Promise((resolve,reject) => {
reject(value)
})
}
13.Promise.all()的封装
13.1 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
const p = Promise.resolve(new Promise((resolve,reject) => {
resolve('ok')
}));
const p1 = Promise.reject('err')
const p2 = Promise.resolve('yes')
const rs = Promise.all([p,p1,p2])
console.log(rs);
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 保存catch方法的回调函数
this.catchCallbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
that.callbacks.forEach(item => {
item.onResolved()
})
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected()
})
that.catchCallbacks.forEach(item => {
item.onRejected()
})
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
//添加 then() 方法
Promise.prototype.then = function (onResolved,onRejected){
const self = this
// 异常穿透
if(typeof onRejected !== 'function') {
onRejected = reason => {
throw reason
}
}
// 值传递 p.then()......
if(typeof onResolved !== 'function') {
onResolved = value => value
}
return new Promise((resolve,reject) => {
function changeState(type){
try {
let rs = type(self.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
}
//执行成功回调函数
if(this.PromiseState === 'fulfilled') changeState(onResolved)
//执行失败回调函数
if(this.PromiseState === 'rejected') changeState(onRejected)
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved:function(){
changeState(onResolved)
},
onRejected:function(){
changeState(onRejected)
}
})
}
})
}
// 添加catch()方法
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected)
}
// 添加resolve方法
Promise.resolve = function(value) {
return new Promise((resolve,reject) => {
// 判断
if(value instanceof Promise) {
//是Promise对象
value.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(value)
}
})
}
// 添加reject方法
Promise.reject = function(value) {
return new Promise((resolve,reject) => {
reject(value)
})
}
// 添加all方法
Promise.all = function (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)
})
}
})
}
14.Promise.race()的封装
14.1 代码：
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
const p =new Promise((resolve,reject) => {
setTimeout(function (){
resolve('ok')
},1000)
})
const p1 = Promise.resolve('err')
const p2 = Promise.resolve('yes')
const rs = Promise.race([p,p1,p2])
console.log(rs);
</script>
</body>
</html>
在这里插入代码片// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 保存catch方法的回调函数
this.catchCallbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
that.callbacks.forEach(item => {
item.onResolved()
})
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected()
})
that.catchCallbacks.forEach(item => {
item.onRejected()
})
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
//添加 then() 方法
Promise.prototype.then = function (onResolved,onRejected){
const self = this
// 异常穿透
if(typeof onRejected !== 'function') {
onRejected = reason => {
throw reason
}
}
// 值传递 p.then()......
if(typeof onResolved !== 'function') {
onResolved = value => value
}
return new Promise((resolve,reject) => {
function changeState(type){
try {
let rs = type(self.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
}
//执行成功回调函数
if(this.PromiseState === 'fulfilled') changeState(onResolved)
//执行失败回调函数
if(this.PromiseState === 'rejected') changeState(onRejected)
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved:function(){
changeState(onResolved)
},
onRejected:function(){
changeState(onRejected)
}
})
}
})
}
// 添加catch()方法
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected)
}
// 添加resolve方法
Promise.resolve = function(value) {
return new Promise((resolve,reject) => {
// 判断
if(value instanceof Promise) {
//是Promise对象
value.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(value)
}
})
}
// 添加reject方法
Promise.reject = function(value) {
return new Promise((resolve,reject) => {
reject(value)
})
}
// 添加all方法
Promise.all = function (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)
})
}
})
}
// 添加all方法
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)
})
}
})
}
15.then方法–回调的异步执行
15.1 代码：
错误结果：
加个定时器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
const p =new Promise((resolve,reject) => {
resolve('ok')
console.log(111);
})
p.then(v => {
console.log(222);
},r => {
console.log(222);
})
console.log(333);
</script>
</body>
</html>
// 自定义promise
// 声明构造函数
function Promise(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 保存catch方法的回调函数
this.catchCallbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
setTimeout(function () {
that.callbacks.forEach(item => {
item.onResolved()
})
},1000)
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected()
})
setTimeout(function () {
that.catchCallbacks.forEach(item => {
item.onRejected()
})
},1000)
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
//添加 then() 方法
Promise.prototype.then = function (onResolved,onRejected){
const self = this
// 异常穿透
if(typeof onRejected !== 'function') {
onRejected = reason => {
throw reason
}
}
// 值传递 p.then()......
if(typeof onResolved !== 'function') {
onResolved = value => value
}
return new Promise((resolve,reject) => {
function changeState(type){
try {
let rs = type(self.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
}
//执行成功回调函数
if(this.PromiseState === 'fulfilled'){
setTimeout(function () {
changeState(onResolved)
},1000)
}
//执行失败回调函数
if(this.PromiseState === 'rejected'){
setTimeout(function () {
changeState(onRejected)
},1000)
}
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved:function(){
changeState(onResolved)
},
onRejected:function(){
changeState(onRejected)
}
})
}
})
}
// 添加catch()方法
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected)
}
// 添加resolve方法
Promise.resolve = function(value) {
return new Promise((resolve,reject) => {
// 判断
if(value instanceof Promise) {
//是Promise对象
value.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(value)
}
})
}
// 添加reject方法
Promise.reject = function(value) {
return new Promise((resolve,reject) => {
reject(value)
})
}
// 添加all方法
Promise.all = function (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)
})
}
})
}
// 添加all方法
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)
})
}
})
}
15.class版本的实现
15.1 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script src="a.js"></script>
<script>
const p =new Promise((resolve,reject) => {
setTimeout(function (){
resolve('ok')
},1000)
})
p.then(v => {
console.log(222);
},r => {
console.log(222);
})
console.log(p);
</script>
</body>
</html>
// 自定义promise
class Promise {
constructor(executor){
// 添加Promise的属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的this的值
const that = this
// 保存then方法的回调函数
this.callbacks = []
// 保存catch方法的回调函数
this.catchCallbacks = []
// 定义resolve函数
function resolve(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'fulfilled'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onResolved(data)
// 变成数组来保存
setTimeout(function () {
that.callbacks.forEach(item => {
item.onResolved()
})
},1000)
}
// 定义reject函数
function reject(data){
if(that.PromiseState !== 'pending') return;
// 改变Promise对象状态
that.PromiseState = 'rejected'
// 改变Promise对象结果
that.PromiseResult = data
// if(that.callback) that.callback.onRejected(data)
that.callbacks.forEach(item => {
item.onRejected()
})
setTimeout(function () {
that.catchCallbacks.forEach(item => {
item.onRejected()
})
},1000)
}
try {
// 执行executor函数
executor(resolve,reject)
} catch (error) {
reject(error)
}
}
//添加 then() 方法
then(onResolved,onRejected){
const self = this
// 异常穿透
if(typeof onRejected !== 'function') {
onRejected = reason => {
throw reason
}
}
// 值传递 p.then()......
if(typeof onResolved !== 'function') {
onResolved = value => value
}
return new Promise((resolve,reject) => {
function changeState(type){
try {
let rs = type(self.PromiseResult)
// 判断
if(rs instanceof Promise) {
//是Promise对象
rs.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(rs)
}
} catch (error) {
reject(error)
}
}
//执行成功回调函数
if(this.PromiseState === 'fulfilled'){
setTimeout(function () {
changeState(onResolved)
},1000)
}
//执行失败回调函数
if(this.PromiseState === 'rejected'){
setTimeout(function () {
changeState(onRejected)
},1000)
}
// 保存回调函数
if(this.PromiseState === 'pending') {
this.callbacks.push({
onResolved:function(){
changeState(onResolved)
},
onRejected:function(){
changeState(onRejected)
}
})
}
})
}
// 添加catch()方法
catch(onRejected){
return this.then(undefined,onRejected)
}
// 添加resolve方法
static resolv(value) {
return new Promise((resolve,reject) => {
// 判断
if(value instanceof Promise) {
//是Promise对象
value.then(v => {
resolve(v)
},r => {
reject(r)
})
}else{
// 不是Promise对象 成功状态
resolve(value)
}
})
}
// 添加reject方法
static reject(value) {
return new Promise((resolve,reject) => {
reject(value)
})
}
// 添加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)
})
}
})
}
// 添加all方法
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)
})
}
})
}
}