手写Promise(1)

最新推荐文章于 2022-10-31 10:32:57 发布

沁染流年

最新推荐文章于 2022-10-31 10:32:57 发布

阅读量82

点赞数

分类专栏： JavaScript 前端文章标签： js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49210760/article/details/124159621

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="./1.js"></script>
	</head>
	<body></body>
	<script>
		let p = new Mpromise((reslove, reject) => {
			// reslove("ok");
			// reject("no");
			// // // 抛出异常
			// // throw "出错了";
			// 异步
			setTimeout(() => {
				reslove("ok");
				// reject("no");
			}, 1000);
		});
		let res = p.then(
			(value) => {
				console.log(value);
				// return "hello";
				// return new Mpromise((reslove, reject) => {
				// 	// reslove("success");
				// 	reject("error");
				// });

				throw "抛出异常";
			},
			(reason) => {
				console.log(reason);
			}
		);
		console.log(res);
		// p.then(
		// 	(value) => {
		// 		console.log(1);
		// 	},
		// 	(reason) => {
		// 		console.log(2);
		// 	}
		// );
	</script>
</html>

// 声明构造函数
function Mpromise(excutor) {


  // 状态和属性
  this.promiseState = "pending"
  this.promiseResult = null

  // 保存的回调
  this.callbacks = []


  // 注意保存this 
  const _self = this

  // reslove函数
  function reslove(data) {

    // 判断状态是不是被修改过了
    if (_self.promiseState !== 'pending') return false
    // 1.修改对象转态 promiseState
    _self.promiseState = 'reslove'
    // 2.设置对象结果值 promiseResult
    _self.promiseResult = data

    // 调用保存的函数中成功的回调函数
    _self.callbacks.forEach((item) => {
      item.onReslove(data)
    })
  }

  // reject函数
  function reject(data) {
    if (_self.promiseState !== 'pending') return false
    _self.promiseState = 'reject'
    _self.promiseResult = data
    _self.callbacks.forEach((item) => {
      item.onReject(data)
    })

  }


  // 使用try来捕获异常的这种改变promise的状态的方法
  try {
    // excutor 执行器函数式同步调佣的
    excutor(reslove, reject)
  } catch (error) {
    reject(error)
  }

}

// 添加then
Mpromise.prototype.then = function (onReslove, onReject) {
  // 调用then回调函数
  var _that = this
  return new Mpromise((reslove, reject) => {
    if (this.promiseState === "reslove") {
      // 这个trycatch可以不需要
      try {
        let result = onReslove(this.promiseResult)

        if (result instanceof Mpromise) {
          result.then((v) => {
            reslove(v)
          }, (r) => {
            reject(r)
          })
        } else {
          // 结果的对象为成功
          reslove(result)
        }
      } catch (error) {
        reject(error)

      }
    } else if (this.promiseState === "reject") {
      onReject(this.promiseResult)
    } else {
      // pending 状态
      // 1.保存回调函数，让异步状态改变之后再去执行

      this.callbacks.push({
        // onReslove,
        // onReject

        onReslove() {
          try {
            let result = onReslove(_that.promiseResult)
            if (result instanceof Mpromise) {
              result.then((v) => {
                reslove(v)
              }, (r) => {
                reject(r)
              })
            } else {
              reslove(result)
            }
          } catch (error) {
            reject(error)
          }
        },
        onReject() {
          try {
            let result = onReject(_that.promiseResult)
            if (result instanceof Mpromise) {
              result.then((v) => {
                reslove(v)
              }, (r) => {
                reject(r)
              })
            } else {
              reject(result)
            }
          } catch (error) {
            reject(error)

          }
        }
      })
    }
  })




}

沁染流年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手写Promise(1)

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="./1.js"></script&g
复制链接

扫一扫

专栏目录