手写Promise自定义封装 then 函数

简介: 手写Promise自定义封装 then 函数

Promise 自定义封装 then 函数


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


我们现在发现,then方法中压根就没有输出内容;


是因为我们对then函数没有进行封装;


所以现在我们需要对then函数进行一次封装了


怎么封装了???????????、


31 自定义封装 then 方法执行回调


function Promise(executor){
    const self=this;
    function resolve(data){
        // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变);
        if( self.PromiseStatus!=='pending') return
        self.PromiseStatus='resolved';
        self.PromiseValue=data;
    }
    // 同样声明成为一个函数;修改状态
    function reject(err){
        // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变);
        if( self.PromiseStatus!=='pending') return
        self.PromiseStatus='rejected';
        self.PromiseValue=err;
    }
    this.PromiseStatus ='pending' ;
    this.PromiseValue =null;
    // 对异常进行处理;使用try catch
    try{
        executor(resolve,reject);
    }catch(err){
        reject(err);
    }
}
// 自定义封装then方法执行回调
Promise.prototype.then=function(onResolve,onReject){
    //下面的this是指向实例对象p的哈;
    //{PromiseStatus:"resolved"PromiseValue:"ok"}
    if(this.PromiseStatus==='resolved'){
        onResolve(this.PromiseValue)
    }
    if(this.PromiseStatus==='rejected'){
        onReject(this.PromiseValue)
    }
}



相关文章
|
7月前
|
前端开发
7 # promise 的 then 方法
7 # promise 的 then 方法
43 0
|
9月前
|
前端开发 小程序
Promise封装Axios进行高效开发
Promise封装Axios进行高效开发
|
9月前
|
前端开发 JavaScript API
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
|
6天前
|
前端开发 API
用promise封装ajax
用promise封装ajax
27 0
|
6月前
|
前端开发 JavaScript API
Promise封装Ajax请求
Promise封装Ajax请求
30 0
|
6月前
|
JavaScript 前端开发 API
vue项目中配置简单的代理与promise,并简单封装请求接口
vue项目中配置简单的代理与promise,并简单封装请求接口
30 0
|
6月前
|
小程序 前端开发 API
小程序api封装 promise使用
小程序api封装 promise使用
35 0
|
8月前
|
前端开发 JavaScript
将使用回调函数作为参数的函数改造为返回 Promise 的一个具体例子
将使用回调函数作为参数的函数改造为返回 Promise 的一个具体例子
45 0
|
8月前
|
前端开发
从XHR、Promise到手动封装简易axios
从XHR、Promise到手动封装简易axios
59 0
|
9月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-函数返回promise
前端学习笔记202306学习笔记第四十二天-函数返回promise
32 0