微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

ES6-22【手写实现之 Promise】

分类：ES6作者：编程之家原文地址

一.promise总结

  1. promise是一个容器
  2. 保存着某个未来才会结束的事件的结果
  3. 从语法上说，promise是一个对象
  4. 可能是成功的结果，也可能是失败的结果

二.基础Promise实现

function Promise(fn) {
        var callback = '';
        this.then = function (cb) {
            console.log(cb);

            callback = cb;
        }
        function resolve(value) {
            setTimeout(function () {
                callback(value)
            }, 100)
        }
        fn(resolve)
    }
    function doSomething() {
        return new Promise((resolve) => {
            var value = 66;
            resolve(66);
        })
    }
    var promise1 = doSomething();
    var promise2 = promise1.then((data) => {
        console.log('Got a value' + data);
    });

此处通过settimeout来控制了callback最后执行，让调用then能成功赋值callback

去除timeout

function Promise(fn){
    let state= 'peanding',
        value = '';
    this.then=(onResolved)=>{
        handler(onResolved);
    }
    function resolve(resolve){
        value = resolve;
        state = 'resolved'
    }
    function handler(onResolved){
        onResolved(value)
    }
    fn(resolve);
}
function doSomeThing(){
    return new Promise(function(resolve){
        var value = 66;
        resolve(66);
    })
}
var promise1 = doSomeThing();
var promise2 = promise1.then(function(data){
    console.log('Got a value'+data);
    
})
Got a value66

不在resolve中处理then中得函数，resolve只负责将入参缓存在本地 在then中响应函数

三.链式调用

function Promise(fn){
    let state= 'peanding',
        value = '';
    this.then=(onResolved)=>{
        return new Promise((resolve)=>{
            handler({
                resolve:resolve,
                onResolved:onResolved
            })
        })
    }
    function resolve(resolve){
        value = resolve;
        state = 'resolved'
    }
    function handler(onResolved){
        
        if(!onResolved.onResolved){
            onResolved.resolve(value)
            return
        }
       var retrunValue = onResolved.onResolved(value);
       onResolved.resolve(retrunValue)
    }
    fn(resolve);
}
function doSomeThing(){
    return new Promise(function(resolve){
        var value = 66;
        resolve(66);
    })
}
var promise1 = doSomeThing();
var promise2 = promise1.then(function(data){
    console.log('Got a value'+data);
    return 88;
}).then((data)=>{
    console.log('Got a second'+data);
})

使用递归实例化的方式将resolve传入这样就可以分为两次缓存value值了，而第二次的value值为第一次函数执行出来的值，如果t'hen中什么都不填就会自动忽略

四.return promise

不科学得写法

function Promise(fn){
    let state= 'peanding',
        value = '';
    this.then=(onResolved)=>{
        return new Promise((resolve)=>{
            handler({
                resolve:resolve,
                onResolved:onResolved
            })
        })
    }
    function resolve(resolve){
        value = resolve;
        state = 'resolved'
    }
    function handler(onResolved){
        
        if(!onResolved.onResolved){
            onResolved.resolve(value)
            return
        }
       var retrunValue = onResolved.onResolved(value);
       onResolved.resolve(retrunValue)
    }
    fn(resolve);
}
function doSomeThing(){
    return new Promise(function(resolve){
        var value = 66;
        resolve(66);
    })
}
function doSomeThingElse(value){
    return new Promise(function(resolve){
        resolve(`did something else with`+value);
    })
}
var promise1 = doSomeThing();
var promise2 = promise1.then(function(data){
    console.log('Got a value'+data);
    return doSomeThingElse(data);
}).then(function(anotherPromise){
    anotherPromise.then(function(finalResult){
        console.log(`Got a second value:`+finalResult);
        
    })
})
Got a value66
Got a second value:did something else with66

通过返回的promiseFunction再次调用then解析，这样是不科学的

科学写法

function Promise(fn){
    let state= 'peanding',
        value = '';
    this.then=(onResolved)=>{
        return new Promise((resolve)=>{
            handler({
                resolve:resolve,
                onResolved:onResolved
            })
        })
    }
    function resolve(newValue){
        if(newValue && typeof newValue.then === 'function'){
            //上面这里也可以直接判断 newVlue.then是否存在即可区别
            newValue.then(resolve)
            return;
        }
        value = newValue;
        state = 'resolved'
    }
    function handler(onResolved){
        
        if(!onResolved.onResolved){
            onResolved.resolve(value)
            return
        }
       var retrunValue = onResolved.onResolved(value);
       onResolved.resolve(retrunValue)
    }
    fn(resolve);
}
function doSomeThing(){
    return new Promise(function(resolve){
        var value = 66;
        resolve(66);
    })
}
function doSomeThingElse(value){
    return new Promise(function(resolve){
        resolve(`did something else with`+value);
    })
}
var promise1 = doSomeThing();
var promise2 = promise1.then(function(data){
    console.log('Got a value'+data);
    return doSomeThingElse(data);
}).then(function(anotherPromise){
    
        console.log(`Got a second value:`+anotherPromise);
        
    
})
Got a value66
Got a second value:did something else with66

在resolve中判断传进来的参数是否为promise对象，如果是的话则调用then重新再处理一遍即可

五.处理失败时写法

function Promise(fn){
    let state= 'peanding',
        value = '';
    this.then=(onResolved,onReject)=>{
        return new Promise((resolve,reject)=>{
            handler({
                resolve:resolve,
                reject: reject,
                onResolved:onResolved,
                onReject:onReject
            })
        })
    }
    function resolve(newValue){
        if(newValue &&  newValue.then ){
            newValue.then(resolve)
            return;
        }
        value = newValue;
        state = 'resolved'
    }
    function reject(newValue){
        if(newValue &&  newValue.then ){
            newValue.then(reject)
            return;
        }
        value = newValue;
        state = 'rejected'
    }
    function handler(onResolved){
        var callBackHand;
        if(state === 'resolved'){
            callBackHand = onResolved.onResolved
        }else{
            
            callBackHand = onResolved.onReject
        }
        if(!callBackHand){
            if(state === 'resolved'){
                onResolved.resolve(value)
                return
            }else{
                onResolved.reject(value)
            }  
        }
       var retrunValue =callBackHand(value);
       if(state === 'resolved'){
            onResolved.resolve(retrunValue)
            return
        }else{
            onResolved.reject(retrunValue)
        } 
    }
    fn(resolve,reject);
}
function doSomeThing(){
    return new Promise(function(resolve,reject){
        reject(66);
    })
}

var promise1 = doSomeThing();
var promise2 = promise1.then(function(data){
    console.log('Success'+data);
   
},function(data){
    console.log('Fail'+data);
    
})

增加了reject方法，其它方法中均加入reject参数，以及状态的判断即可

六.边角处理

错误捕获/异步实现

function Promise(fn){
    let state= 'peanding',
        value = '';
    this.then=(onResolved,onReject)=>{
        return new Promise((resolve,reject)=>{
            handler({
                resolve:resolve,
                reject: reject,
                onResolved:onResolved,
                onReject:onReject
            })
        })
    }
    function resolve(newValue){
        try{
        if(newValue &&  newValue.then ){
            newValue.then(resolve)
            return;
        }
        value = newValue;
        state = 'resolved'
        }catch(err){
            reject(err)
        }
    }
    function reject(newValue){
        if(newValue &&  newValue.then ){
            newValue.then(reject)
            return;
        }
        value = newValue;
        state = 'rejected'
    }
    function handler(onResolved){
        setTimeout(function(){
            var callBackHand;
            if(state === 'resolved'){
                callBackHand = onResolved.onResolved
            }else{
                
                callBackHand = onResolved.onReject
            }
            if(!callBackHand){
                if(state === 'resolved'){
                    onResolved.resolve(value)
                    return
                }else{
                    onResolved.reject(value)
                }  
            }
            try{
             var retrunValue =callBackHand(value);
            }catch(err){
                reject(err)
            }
           if(state === 'resolved'){
                onResolved.resolve(retrunValue)
                return
            }else{
                onResolved.reject(retrunValue)
            } 
        })
       
       
    }
    fn(resolve,reject);
}
function doSomeThing(){
    return new Promise(function(resolve,reject){
        reject(66);
    })
}

var promise1 = doSomeThing();
var promise2 = promise1.then(function(data){
    console.log('Success'+data);
   
},function(data){
    console.log('Fail'+data);
    
})
console.log(2);

2
Fail66

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ES6模块的import和export用法总结
原文连接：https://www.cnblogs.com/dupd/p/5951311.htmlES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。ES6在语言规格的层面上，实现了模块功能，而且...
浅谈Es6中import * as xxx from几种基本用法
以为Es6，javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块，其中在项目中，我们会经常看到一种用法import * as obj from，这种写法是把所有的输出包裹到obj对象里。示例一 1 2 3 4 5 6 7 // index.js export function fn1(data){ console.log(1) } export f.
ES6系列文章 异步神器async-await
视频讲解关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。async-await和Promise的关系经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点，接收了这些信息后，就蒙圈了。现在才知道...
TypeScript看完就会了
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开源的编程语言TypeScript是JavaScript的超集，遵循最新的ES5 ES6规范，TypeScript扩展了JavaScript的语法TypeScript更像后端 Java c# 这样的面向对象语言可以让js开发大型企业项目谷歌也在大力支持TypeScript的推广，React ，VUE 都集成了TypeScriptTypeScript安装安装-- 安装npm install -g type
typeScript 变量名 冒号 类名 ＜–这种写法什么意思?
export class AppComponent { title = 'Tour of heroes'; hero: Hero = { id: 1, name: '张三' };}export class Hero { id: number; name: string;}就是这一段,看起来有点晕,这里是实例化一个Hero类型的对象hero,还是创建一个变量?后面是赋值,但是不知道什么意思?hero: Hero = { id: 1, na.
用 async/await 来处理异步
用 async/await 来处理异步昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，是时候学习一下了。先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function timeout() {return 'hello world'
es6之解构赋值
es6的语法已经出了很长的时间了，在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法，但是依旧有很多开发在写代码的时候，依旧没有用es6的语法，而是习惯使用老的语法，这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势，让大家从根本上了解es6语法的优势基本用法数组解构让我们一起先来看数组解构的基本用法：let [a, b, c] ...
TypeScript 定义函数的几种写法
参考链接1 参考链接2写法1 - 使用 function 关键字function greeter(fn: (a: string) => void) { fn("Hello, World");}function printToConsole(s: string) { console.log(s);}greeter(printToConsole);(a: string) => void上述语法的含义：表示一个函数，接收一个字符串作为输入参数，没有返回参数。可
es6
ES6简介-ECMAScript是javascript标准-ES6就是ECMAScript的第6个版本-ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6新增加的功能：1.let
ES6的函数写法总结，一看就会！
ES6  在ES5的基础上增加了一些新的特性和写法，特别在函数写法上，增加了箭头函数 1.正经的函数写法//普通的传递值的写法functionsum1(x,y){returnx+y;}constres=sum1(2,3);console.log(res);//传递对象的方式,调用时需要传递一个对象过去function
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native