手写一个Promise完成resolve 和 reject状态的改变和修改属性

2022-05-12 163

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 手写一个Promise完成resolve 和 reject状态的改变和修改属性

1.手写 Promise

1 创建一个文件 Promise.js；内容

function Promise(){
}

2 引入 Promise.js 这个文件

<script src="./Promise.js"></script>
<script type="text/javascript">
    let p = new Promise((resolve, reject) => {
        resolve('ok')
    })
    p.then(res => {
        console.log(res)
    }, err => {
    })
</script>

你会发现上面这个文件会报错，报错的原因是因为：

你引入了这个 Promise.js文件；并且里面的函数是Promise；

它覆盖了全局的Promise；这个是原因1；

还有一个原因是 Promise.js文件中的的函数是Promise；

没有then方法；如果给Promise添加一个then方法，那么就不会报错的哈

3. Promise.js 文件；变为如下

function Promise(){
}
Promise.prototype.then=function(){
}

4.自定义 resolve 和 reject 这样的结构

Promise.js 文件；变为如下

function Promise(executor){
   // 声明成为一个函数,要接受一个形参；因为传递过来的时候有参数
   function resolve(data){
   }
   // 同样声明成为一个函数
   function reject(err){
   }
    // executor会拿到resolve, reject传递过来的函数
    // resolve和reject因为在传递过来的是一个函数，所以在声明的时候，也应该是一个函数哈~
    // 执行器函数在内部是同步调用的
    executor(resolve,reject);
}
Promise.prototype.then=function(onResolve,onReject){
}

5.实现 resolve 和 reject

function Promise(executor){
   function resolve(data){
      //resolve函数主要有两个作用
      // 1 修改对象的状态，Promise;
      // 这个状态是【PromiseStatus】是Promise的一个属性；不同的版本可能是不一样的
      this.PromiseStatus='resolved';//修改Promise的状态为成功
      // 2设置对象的结果；【PromiseValue】是【PromiseStatus】是一个属性；同的版本可能是不一样的
      this.PromiseValue=data;//设置结果
    }
    // 同样声明成为一个函数
    function reject(err){
    }
    // 给Promise添加一个属性pending;
    this.PromiseStatus ='pending' ;
    this.PromiseValue =null;
    executor(resolve,reject);
}
Promise.prototype.then=function(onResolve,onReject){
}

6. 你可能会遇见的坑

1==>当你在控制台输出的时候，你会发现

状态没有发生改变

PromiseStatus=“pending”

PromiseValue=null;

那是因为你的this指向发生了改变

2==>executor不要放在最前面；

executor(resolve,reject);

const self=this;

这样会出问题的哈~

因为 executor(resolve,reject);的时候；会去掉用resolve和reject这两个函数

而resolve函数中此时还没有self；

所以会报错sel出现undefined

7.出坑

function Promise(executor){
    const self=this;
    function resolve(data){
        //resolve函数主要有两个作用
        // 1 修改对象的状态，Promise;
        // 这个状态是【PromiseStatus】是Promise的一个属性；不同的版本可能是不一样的
        // this.PromiseStatus='resolved';//修改Promise的状态为成功 X
        self.PromiseStatus='resolved';
        // 2设置对象的结果；【PromiseValue】是【PromiseStatus】是一个属性；同的版本可能是不一样的
        // this.PromiseValue=data;//设置结果 x
        self.PromiseValue=data;
        // console.log(this);//你会发现这个this是window
    }
    // 同样声明成为一个函数;修改状态
    function reject(err){
        self.PromiseStatus='rejected';
        self.PromiseValue=err;
    }
    // 给Promise添加一个属性pending;
    this.PromiseStatus ='pending' ;
    this.PromiseValue =null;
    executor(resolve,reject);//这个放在后面；它回去调用resolve和reject函数
}
 Promise.prototype.then=function(onResolve,onReject){
  }