目录
三、自定义封装Promise（手写Promise，class版）
一、认识Promise
（一）相关知识及特点
1. Promise是一门Es6引进的js进行异步编码方面的新解决方法
2. 语法上：Promise是一个构造函数
功能上：Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值
3. 优点：
① 指定回调函数的方式更加灵活（甚至可以在异步任务结束后指定多个）
② 支持链式调用，可以解决回调地狱问题
a. 回调地狱：回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件
b. 回调地狱特点：不便于阅读，不便于异常处理
c. 解决方案：Promise链式调用
（二）Promise初体验
1. 利用promise实现一个抽奖，具体要求为：
① 生成随机数 30%中奖概率
② 点击按钮1s后显示是否中奖
③ 若中奖，则弹出 恭喜中奖，获得吴世勋亲笔签名及周边大礼包
④ 若未中奖，则弹出 再接再厉ovo
2. 代码：（代码中有普通版和promise版）
<body>
<div class="container">
<h1 class="header">Promise初体验</h1>
<button>点击抽奖</button>
</div>
</body>
<script>
//生成随机数 30%中奖概率
//点击按钮 1s后显示是否中奖
//若中奖，则弹出 恭喜中奖，获得吴世勋亲笔签名及周边大礼包
//若未中奖，则弹出 再接再厉ovo
//生成随机数
function rand(m, n) {
return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
}
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
/*
//定时器
setTimeout(() => {
//获取从1-100的随机数
let num = rand(1, 100);
if (num <= 30) {
alert("恭喜中奖，获得吴世勋亲笔签名及周边大礼包");
} else {
alert("再接再厉ovo");
}
}, 1000);
*/
//Promise 可包裹一个异步操作
//Promise 形式
//参数为函数类型的一个值，分别有两个形参 resolve、reject
//resolve 解决 reject拒绝 都为函数类型的数据
//当异步任务成功时，调用resolve；当异步任务失败时，调用reject
const p = new Promise((resolve, reject) => {
setTimeout(() => {
//获取从1-100的随机数
let num = rand(1, 100);
if (num <= 30) {
resolve(num);
//调用resolve之后，会将promise对象（即p）的状态设置为成功
} else {
reject(num);
//调用resolve之后，会将promise对象（即p）的状态设置为失败
}
}, 1000);
});
//实现resolve和reject
//调用then方法，接受两个参数，参数类型都为函数类型的数据
//第一个参数为成功是的回调，第二个参数为失败时的回调
p.then(
(value) => {
alert(
"您的号码为：" +
value +
"，恭喜中奖，获得吴世勋亲笔签名及周边大礼包"
);
},
(reason) => {
alert("您的号码为：" + reason + "，未能中奖再接再厉ovo");
}
);
});
</script>
3. 结果：
（三）Promise实践练习
1. 实践一：fs读取文件
1）①fs作用：对计算机硬盘进行读写操作
②fs.readFile()：读取文件，第一个参数为文件路径，第二个参数为一个函数
2）代码：（代码中有fs版和promise版）
//fs作用：对计算机硬盘进行读写操作
//读取一个文件 conten.txt
//引入 fs 回调函数形式
const fs = require("fs");
//err为出现错误时的参数，data为读取到的结果
/*
fs.readFile("content.txt", (err, data) => {
//出错则抛出错误
if (err) throw err;
//否则输出文件内容
console.log(data.toString());
});
*/
//Promise形式
let p = new Promise((resolve, reject) => {
fs.readFile("content.txt", (err, data) => {
//readFile 读取文件是一个异步操作
//如果失败（出错则调用reject）
if (err) reject(err);
//如果成功（成功则调用resolve）
resolve(data);
});
});
//调用then
p.then(
(value) => {
console.log(value.toString());
},
(reason) => {
console.log(reason);
}
);
3）结果：在终端输入 node + 文件名
2. 实践二：promise封装fs读取文件操作
1）相关参数解释：
① 封装一个函数 mineReadFile 读取文件内容
② 参数：path 文件路径
③ 返回：promise对象
2）代码：
/**
* 封装一个函数 mineReadFile 读取文件内容
* 参数：path 文件路径
* 返回：promise对象
*/
function mineReadFile(path) {
return new Promise((resolve, reject) => {
//读取文件
require("fs").readFile(path, (err, data) => {
//出现错误则调用reject
if (err) reject(err);
//成功则调用resolve
resolve(data);
});
});
}
mineReadFile("content.txt").then(
(value) => {
//输出文件内容
console.log(value.toString());
},
(reason) => {
//输出错误问题
console.log(reason);
}
);
3）结果：
3. 实践三：promise发送AJAX请求
1）代码：
<body>
<div class="container">
<h1>Promise 封装 AJAX 操作</h1>
<button>点击发送AJAX</button>
</div>
</body>
<script>
//接口地址 https://api.apiopen.top/getJoke
//Promise 形式
const btn = document.querySelector("button");
//绑定事件
btn.addEventListener("click", () => {
const p = new Promise((resolve, reject) => {
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化
xhr.open("GET", "https://api.apiopen.top/getJoke");
//3.发送
xhr.send();
//4.绑定事件处理响应结果
xhr.onreadystatechange = () => {
//判断响应
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
//控制台输出响应体
resolve(xhr.response);
} else {
//控制台输出响应状态码
reject(xhr.status);
}
}
};
});
//调用then方法
p.then(
(value) => {
console.log(value);
},
(reason) => {
console.warn(reason);
}
);
});
</script>
2）结果：
4. 实践四：promise封装AJAX请求
1）基本要求及参数
① 封装一个函数 sendAJAX 发送GET AJAX 请求
② 参数 URL
③ 返回结果 Promise 对象
2）代码：
/*
封装一个函数 sendAJAX 发送GET AJAX 请求
参数 URL
返回结果 Promise 对象
*/
function sendAJAX(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.open("GET", url);
//发送
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//判断成功
if (xhr.status >= 200 && xhr.status < 300) {
//成功 响应体
resolve(xhr.response);
} else {
//失败 状态码
reject(xhr.status);
}
}
};
});
}
sendAJAX("https://api.apiopen.top/getJoke").then(
(value) => {
console.log(value);
},
(reason) => {
console.warn(reason);
}
);
3）结果：
5. 实践五：util.promisify方法进行promise风格转化
1）该方法将基于回调的函数转换为基于 Promise 的函数。这使您可以将 Promise 链和async/await与基于回调的 API 结合使用
2）代码：
//引入 util模块
const util = require("util");
//引入 fs模块
const fs = require("fs");
//返回一个新的函数
let mineReadFile = util.promisify(fs.readFile);
mineReadFile("content.txt").then(
(value) => {
console.log(value.toString());
},
(reason) => {
console.log(reason);
}
);
3）结果：
二、Promise基本知识
（一）基本知识
1. promise的状态：是实例对象中的一个属性PromiseState（内置的）
2. Promise状态：pending（未决定的）、resolved/fullfilled（成功）、rejected（失败)
① 状态的改变只存在两种情况：从 pending -> resolved 或者从 pending -> rejected
② 一个promise对象只能改变一次状态
③ 成功的结果数据一般称为value、失败的结果数据一般称为reason（一个习惯）
3. promise对象的值：实例对象中的一个属性PromiseResult
① 保存的是异步任务中成功/失败的结果
②resolve、reject两个函数可以对PromiseResult进行更改或赋值
4. promise工作的基本流程
new Promise() -> 执行异步操作 -> 成功执行resolve()/失败执行reject() -> promise对象 -> 回调对应的方法 -> 新的promise对象
（二）Promise的API及代码
1. promise构造函数：Promise(excutor){}
1）executor函数：执行器 (resolve, reject) => {}（(resolve, reject)称为执行器函数，橙色围住的部分则称为执行器函数）
2）resolve函数：内部定义成功时所调用的函数 value => {}
3）reject函数：内部定义失败时调用的函数，reason => {}
**注：**executor会在Promise内部立即同步调用，异步操作在执行器中执行
2. Promise.prototype.then方法：(onResolved，onRejected) => {}
1）onResolved函数：成功的回调函数 value => {}
onReject函数：失败的回调函数 reason => {}
2）指定用于得到成功value的成功回调和用于得到失败reason的失败回调返回一个新的promise对象；
3. Promise.prototype.catch方法（只能执行失败回调）：(onRejected) => {}
1）onRejected函数：失败的回调函数 reason => {}
4. Promise相关方法
1）Promise.reject方法：(reason) => {}
reason：失败的原因，返回一个失败的promise对象
2）Promise.all方法：(promises) => {}
promises：包含n个promise的数组，返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败就为失败
3）Promise.race方法：(promises) => {}
promises：包含n个promise的数组，第一个完成的promise的状态结果就是最终的结果状态
//resolve方法
//如果传入的参数为 非promise类型的对象，则返回结果都是成功的promise对象
//如果传入的参数为 promise对象，则参数的结果决定了 resolve 的结果
let p1 = Promise.resolve("sehun");
console.log(p1);
let p2 = Promise.resolve(
new Promise((resolve, reject) => {
resolve("OK");
//reject('Error');
})
);
console.log(p2);
p2.catch((reason) => {
console.log(p2);
});
//reject方法 永远返回失败的结果
//如果传入的参数为 非promise类型的对象，则返回结果都是失败的promise对象
//如果传入的参数为 promise对象，则返回的仍然是失败的结果
let a = Promise.reject("sehun");
console.log(a);
let a2 = Promise.reject(
new Promise((resolve, reject) => {
resolve("OK");
//reject('Error');
})
);
console.log(a2);
//all方法
let b = new Promise((resolve, reject) => {
resolve("Ok");
});
let b1 = Promise.resolve("Success");
let b2 = Promise.resolve("oh Yeah");
//数组中的所有promise成功才成功，并且返回结果是所有成功结果组成的数组
const result = Promise.all([b, b1, b2]);
console.log(result);
//race方法
let c = new Promise((resolve, reject) => {
//resolve("Ok");
setTimeout(() => {
resolve("OK");
}, 1000);
});
let c1 = Promise.resolve("Success");
let c2 = Promise.resolve("oh Yeah");
//数组中的所有promise成功才成功，并且返回结果是所有成功结果组成的数组
const result1 = Promise.race([c, c1, c2]);
console.log(result1);
（三）几个关键问题及代码
1. 如何改变promise的状态？
1）resolve(value)：如果当前是pending就会变成resolved；
2）reject(reason)：如果当前是pending就会变为rejected；
3）抛出异常：如果当前是pending就会变为rejected；
2. 一个promise指定多个成功/失败回调函数，都会调用吗？
答：当promise改变为对应状态时都会调用
3. 改变promise状态和指定回调函数谁先谁后？（即改变状态先执行还是then方法回调先执行）
1）都有可能，正常情况下先指定回调再改变状态，但也可以先改变状态再指定回调；
2）如何先改变状态再指定回调？
a. 在执行器中直接调用resolve()/reject();
b. 延迟更长时间才调用then();
3）什么时候才能得到数据？（即回调函数什么时候执行）
a. 如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据；
b. 如果先改变状态，那当指定回调时，回调函数就会调用，得到数据。
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）方法：在回调函数中返回一个pendding状态的promise对象；
// 1. 改变promise状态
let p = new Promise((resolve, reject) => {
//1. resolve函数
//resolve("ok"); // pending => resolved/fulfilled
//2. reject函数
//reject("error"); // pending => rejected
//3. 抛出错误
throw "error！";
});
console.log(p);
//2. 调用多个回调
// 状态改变才会执行回调
let p = new Promise((resolve, reject) => {
resolve("sehunBBQ");
});
// 指定回调 - 1
p.then((value) => {
console.log(value);
});
// 指定回调 - 2
p.then((value) => {
alert(value);
});
// 3.
//①先改变状态，后执行回调的情况：当执行器的函数中的任务是同步任务
let p = new Promise((resolve, reject) => {
resolve("sehunBBQ");
});
// 指定回调
p.then((value) => {
console.log(value);
});
//②先执行回调，后改变状态的情况：当执行器的函数中的任务是异步任务
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("BBQのSehun");
}, 1000);
});
p1.then(
(value) => {
console.log(value + "!");
},
(reason) => {}
);
// 4. promise.then()返回的新promise的结果状态由什么决定
let p = new Promise((resolve, reject) => {
resolve("sehunBBQ");
});
//执行then方法
let result = p.then(
(value) => {
// console.log(value);
// 1. 抛出错误
//throw "sehun：error!";
// 2. 返回结果不是一个promise对象
//return "sehun?";
// 3. 返回结果是一个promise对象
return new Promise((resolve, reject) => {
//resolve("success!sehun!");
reject("error!sehun!");
});
},
(reason) => {
console.warn(reason);
}
);
console.log(result);
// 5. promise如何串连多个操作任务
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("BBQのsehun");
}, 1000);
});
p.then((value) => {
return new Promise((resolve, reject) => {
resolve("sehun!BBQ!");
});
})
.then((value) => {
console.log("?" + value);
})
.then((value) => {
console.log(value); // 打印的会是undefined
//因为前一个then返回结果不是一个promise对象因此状态是成功，返回值就是一个undefined
});
// 6. promise异常穿透
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("BBQのsehun");
//reject("error");
}, 1000);
});
p.then((value) => {
return new Promise((resolve, reject) => {
resolve("sehun!BBQ!");
});
})
.then((value) => {
//console.log("?");
throw "error!";
})
.then((value) => {
console.log("?sehun");
})
.catch((reason) => {
console.warn(reason);
});
// 7. 中断promise链
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("ok");
//reject("error");
}, 1000);
});
//中断链条：返回一个pending状态promise对象
//因为状态改变才会调用回调函数因此想要后面的回调函数不执行就需要一个pending状态的promise
p.then((value) => {
console.log("sehunの");
return new Promise(() => {});
})
.then((value) => {
console.log("?");
})
.then((value) => {
console.log("?->sehun");
})
.catch((reason) => {
console.warn(reason);
});
三、自定义封装Promise（手写Promise，class版）
1. 具体代码实现如下：
class Promise {
//构造方法
constructor(executor) {
//添加属性
this.PromiseState = "pending";
this.PromiseResult = null;
//声明一个属性
this.callbacks = [];
//保存实例对象的 this 的值
const self = this; // self _this that(设置的名字常用的三个)
//声明resolve和reject
//resolve 函数
function resolve(data) {
// 判断状态 因为对象状态只能修改一次
if (self.PromiseState !== "pending") return;
//1. 修改对象的状态 (promiseState)
self.PromiseState = "fulfilled"; // resolved
//2. 设置对象结果值 (promiseResult)
self.PromiseResult = data;
//调用成功的回调
setTimeout(() => {
self.callbacks.forEach((item) => {
item.onResolved(data);
});
});
}
//reject 函数
function reject(reason) {
// 判断状态 因为对象状态只能修改一次
if (self.PromiseState !== "pending") return;
//1. 修改对象的状态 (promiseState)
self.PromiseState = "rejected";
//2. 设置对象结果值 (promiseResult)
self.PromiseResult = reason;
//执行失败回调
setTimeout(() => {
self.callbacks.forEach((item) => {
item.onRejected(reason);
});
});
}
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 res = type(self.PromiseResult); //具体的实现方法由自己写的then决定
if (res instanceof Promise) {
//如果是promise类型对象
res.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
//结果的对象状态为成功
resolve(res);
}
} catch (e) {
reject(e);
}
}
//判断状态
if (this.PromiseState !== "rejected") {
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);
},
});
}
});
}
//catch方法 封装
catch(onRejected) {
return this.then(undefined, onRejected);
}
//resolve方法封装 用static进行描述表明它属于类的静态对象
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) => {
//得知对象状态成功
//每个promise对象都成功才能执行resolve函数 才能使all方法成功
count++;
//将当前promise对象成功的结果存入数组中
arr[i] = v;
//判断count
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);
}
);
}
});
}
}
四、async与await
（一）基本知识
1. Async函数
1）函数返回值为promise对象；
2）promise对象的结果由按async函数执行的返回值决定；
2. await表达式
1）await右侧的表达式一般为promise对象，但也可以是其他的值；
2）如果表达式是promise对象，await返回的是promise成功的值；
3）如果表达式是其他值，则直接将此值作为await的返回值；
1、2点注意：
1）await必须写在async函数中，但async函数中可以没有await；
2）如果await的promise失败了，就会抛出异常，需要通过try…catch进行捕获处
（二）代码实践
1. 实践一：async函数
1）代码：
<script>
// 与then的返回结果规则一样
async function main() {
//1. 如果返回值是一个非promise类型的数据
// return 'sehun';
//2. 如果返回值是一个promise对象
/*
return new Promise((resolve, reject) => {
reject("oh");
});
*/
//3. 抛出异常
//throw "error!";
}
let result = main();
console.log(result);
</script>
2）结果：
2. 实践二：await表达式
1）代码：
async function main() {
//1. 右侧为promise的情况
let p = new Promise((resolve, reject) => {
reject("error");
});
//let res = await p;
//2. 右侧为其他类型数据
//res = await "sehunBBQ";
//3. 右侧为promise对象 promise失败
try {
let res = await p;
} catch (e) {
console.warn(e);
}
}
main();
2）结果：
3. 实践三：async与await表达式结合
1）代码：
/**
* 读取resource文件夹下的三个文件 1 2 3 的文件内容
* 拼接进行输出
*/
const fs = require("fs");
const util = require("util");
const mineReadFile = util.promisify(fs.readFile);
//使用回调函数方式实现
/**
* fs.readFile("resource/1.txt", (err, data1) => {
if (err) throw err;
fs.readFile("resource/2.txt", (err, data2) => {
if (err) throw err;
fs.readFile("resource/3.txt", (err, data3) => {
if (err) throw err;
console.log(data1 + +"
" + data2 + "
" + data3);
});
});
});
*/
//async 和 await
async function main() {
try {
//读取第一个文件的内容
let d1 = await mineReadFile("resource/1.txt");
let d2 = await mineReadFile("resource/2.txt");
let d3 = await mineReadFile("resource/3.txt");
console.log(d1 + d2 + "
" + d3);
} catch (e) {
console.warn(e);
}
}
main();
2）结果：
4. 实践四：async和await表达式结合发送AJAX请求
1）代码：
<body>
<button>点击获取段子</button>
</body>
<script>
//段子接口：https://api.apiopen.top/getJoke
function sendAJAX(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.open("GET", url);
//发送
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//判断成功
if (xhr.status >= 200 && xhr.status < 300) {
//成功 响应体
resolve(xhr.response);
} else {
//失败 状态码
reject(xhr.status);
}
}
};
});
}
//点击按钮发送ajax请求获取段子
let btn = document.querySelector("button");
btn.addEventListener("click", async () => {
//获取段子信息
let duanzi = await sendAJAX("https://api.apiopen.top/getJoke");
console.log(duanzi);
});
</script>
2）结果：