Promise(1)—3分钟掌握最基本的Promise原理

学习是一个漫长的过程,需要循序渐进,要想深入的理解一门技术,需要沉下心来慢慢研究。要做到通过现象看本质,学Promise的同时也会用到高阶函数和发布订阅,只有掌握了那些通用的技术,才能够更有效的学习下去,更好的看到本质。慢慢的你会发现通过深入学习一个Promise,收获的却不只是Promise。

一、什么是Promise

Promise 是异步编程的一种解决方案,Promise对象是一个构造函数,用来生成Promise实例.

二、Promise对象有以下两个特点。

1、有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态

2、一旦状态改变,就不会再变,Promise对象的状态改变:只有两种可能: 从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果

三、Promise的实现(ES5)

1、名词解释:

1、executor:为执行器当new Promsie(executor)的时候,executor作为同步代码立即执行。

2、status:Promise实例的三个状态pending(进行中)、fulfilled(已成功)和rejected(已失败)

3、value:这个是成功传递的参数,成功有成功的值。

4、reason:这个是失败时候传递的参数,失败有失败的原因。

5、resolve:一个成功时调用的函数,作为参数传递给executor,为高阶函数

6、reject:一个失败时调用的函数,作为参数传递给executor,为高阶函数

2、代码解读:

代码解读:
在Promise当中,定义好状态,成功的值,和失败的原因,当你传入
function(resolve,reject){resolve('成功了')}的时候resolve作为回调函数,
被触发执行了,然后之前定义的状态pending(等待)变成了fulfilled(成功),
此时调用then方法传入两个callback,通过内部比对if来执行onFulfilled或
onRejected。

function Promise(executor){
   const self = this;
   self.status = 'pending';//promise 状态
   self.value = undefined;// 成功有成功的值
   self.reason = undefined;// 失败有失败的原因

   function resolve(value){
       if(self.status === 'pending'){ //只有pending状态下才可以改变状态
           self.status = 'fulfilled';
           self.value = value;
       }
   }
   function reject(reson){
       if(self.status === 'pending'){//只有pending状态下才可以改变状态
           self.status = 'rejected';
           self.reason = reson;
       }
   }
   try{
       executor(resolve,reject); // 此处为高阶函数,一个函数内传入其他函数,这就是高阶函数的一种
   }catch(err){
       reject(err);
   }
}

Promise.prototype.then = function(onFulfilled,onRejected){
       if(this.status === 'fulfilled'){
           onFulfilled(this.value);
       }
       if(this.status === 'rejected'){
           onRejected(this.reason);
       }
}


复制代码

上述代码可以正常运行以下代码:

const p = new Promise((resolve,reject)=>{
    resolve('成功') 
    // throw 1213
    // reject('失败')
});

p.then(function(data){
    console.log(data) // 成功
},function(err){
    console.log(err) // 失败 或 1213
})
复制代码

到这里最基本的Promise已经封装完成了,是不是很简单。

但是如果遇到下面的这种异步的情况, 上面的代码就不能正常运行了,这里就需要用到发布订阅了,留下悬念,一点点学不累,还有成就感,请听下集解说哦。。。

const p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('我是异步的成功')
    })      
});
复制代码

学习是一个漫长的过程,需要循序渐进,要想深入的理解一门技术,需要沉下心来慢慢研究。要做到通过现象看本质,学Promise的同时也会用到高阶函数和发布订阅,只有掌握了那些通用的技术,才能够更有效的学习下去,更好的看到本质。慢慢的你会发现通过深入学习一个Promise,收获的却不只是Promise。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章