基本原理实现
// 自定义实现 Promise 的基本功能
class TPromise {
constructor(fn) {
// 将所有成功的事件函数集成在 successList 数组中
this.successList = [];
// 将所有失败的事件函数集成在 failList 数组中
this.failList = [];
// 记录异步事件的状态 pending,fullfilled,rejected
this.state = "pending";
// 传入的函数对象（异步操作的函数内容）
fn(this.resolveFn.bind(this), this.rejectFn.bind(this));
}
// then 函数，添加异步操作成功时执行的未来操作
then(successFn) {
if (typeof successFn === "function") {
this.successList.push(successFn);
}
// 返回 TPromise，支持链式操作
return this;
}
// catch 函数，添加异步操作成功时执行的未来操作
catch(failFn) {
if (typeof failFn === "function") {
this.failList.push(failFn);
}
// 返回 TPromise，支持链式操作
return this;
}
// 异步操作成功时的回调
resolveFn(res) {
this.state = "fullfilled";
this.successList.forEach(function (item) {
item(res);
});
}
// 异步操作失败时的回调
rejectFn(res) {
this.state = "rejected";
this.failList.forEach(function (item) {
item(res);
});
throw Error(res);
}
}
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise</title>
</head>
<body>
<h2>Promise</h2>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="./index.js"></script>
<script>
function getTest() {
return new TPromise((resolve, reject) => {
axios.get('./test.json')
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err);
})
})
};
getTest()
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
})
</script>
</body>
</html>
网友评论