JS神器 Promise 兼容

最新推荐文章于 2022-11-17 15:31:54 发布
最新推荐文章于 2022-11-17 15:31:54 发布
阅读量347 收藏
点赞数
原文链接：https://my.oschina.net/u/993563/blog/1517122
版权

code:

// 兼容 window.Promise
(function(){
    "use strict";
    var Promise, proto;
    if(window.Promise) return;
    Promise = window.Promise = function(resolver){
        var self=this, c;
        // check
        if(!(this instanceof Promise))
            throw new Error('undefined is not a promise');
        if(typeof resolver!=='function')
            throw new Error('Promise resolver '+resolver+' is not a function');
        // init
        c = this.__Promise = {
            status:0, data:null, next:[], catched:false,
            done: function(data){ emit(self,data); },
            fail: function(err){ emit(self,err,true); }
        };
        if(resolver===noop) return this;
        // exec
        try{ resolver(c.done, c.fail); }
        catch(err){ c.fail(err); }
        return this;
    };
    proto = Promise.prototype;
    function noop(){}
    function emit($pm, data, isFail) {
        var c=$pm.__Promise, n;
        if(c.status!==0) return;
        if(!isFail && (data instanceof Promise))
            return data.then(c.done, c.fail);
        n = c.status = isFail ? 2 : 1;
        c.data = data;
        for(var i=0,l=c.next.length; i<l; i++){
            exec(c.next[i][0], c.next[i][n], c.data, isFail);
        }
        if(!isFail || c.catched) return;
        setTimeout(function(){
            if(c.catched) return;
            throw '(in promise) '+data;
        });
    }
    function exec($pm, fn, data, isFail){
        if(typeof fn!=='function') emit($pm, data, isFail);
        try{ emit($pm, fn(data)); }
        catch(err){ emit($pm, err, true); }
    }
    Promise.all = function(arr){
        var $pm=new Promise(noop), len=1, rt=[];
        for(var i=0; i<arr.length; i++){
            if(arr[i] instanceof Promise){
                if(len<0) arr[i].__Promise.catched = true;
                else{
                    len++;
                    (function(){
                        var n = i;
                        arr[n].then(
                            function(data){ rt[n] = data; if(!--len) emit($pm,rt); },
                            function(err){ emit($pm,err,true); len = -1; }
                        );
                    })();
                }
            }
            else if(len>0) rt[i] = arr[i];
        }
        if(!--len) $pm.__Promise.done(rt);
        return $pm;
    };
    Promise.race = function(arr){
        var $pm=new Promise(noop), isRt;
        for(var i=0; i<arr.length; i++){
            if(arr[i] instanceof Promise){
                if(isRt) arr[i].__Promise.catched = true;
                else{
                    arr[i].then(
                        function(data){ isRt = true; emit($pm,data); },
                        function(err){ isRt = true; emit($pm,err,true); }
                    )
                }
            }
            else if(!isRt){
                isRt = true;
                emit($pm, arr[i]);
            }
        }
        return $pm;
    };
    Promise.resolve = function(data){
        var $pm = new Promise(noop);
        emit($pm, data);
        return $pm;
    };
    Promise.reject = function(err){
        var $pm = new Promise(noop);
        emit($pm, err, true);
        return $pm;
    };
    proto.then = function(done, fail){
        var $pm=new Promise(noop), c=this.__Promise, s=c.status;
        c.catched = true;
        if(s===0) c.next.push([$pm, done, fail]);
        else if(s===1) exec($pm, done, c.data);
        else exec($pm, fail, c.data, true);
        return $pm;
    };
    proto.catch = function(fail){
        var $pm=new Promise(noop), c=this.__Promise, s=c.status;
        c.catched = true;
        if(s===0) c.next.push([$pm, null, fail]);
        else if(s===1) emit($pm, c.data);
        else exec($pm, fail, c.data, true);
        return $pm;
    };
})();

与es6对比  [es6: Chrome 版本 60.0.3112.101（正式版本） （64 位）]

codeconsloe.logUncaught(es6)Uncaught(兼容)
Promise();
nullUncaught TypeError: undefined is not a promiseUncaught Error: undefined is not a promise
Promise(1);
nullUncaught TypeError: undefined is not a promiseUncaught Error: undefined is not a promise
new Promise();
nullUncaught TypeError: Promise resolver undefined is not a functionUncaught Error: Promise resolver undefined is not a function
new Promise(1);
nullUncaught TypeError: Promise resolver 1 is not a functionUncaught Error: Promise resolver 1 is not a function
new Promise(function(done){
    done(1);
}).then();
nullnullnull
new Promise(function(done){
    done(1);
}).then(2);
nullnullnull
new Promise(function(done){
    done(1);
}).catch();
nullnullnull
new Promise(function(done){
    done(1);
}).catch(2);
nullnullnull
new Promise(function(done,fail){
    fail({a:1})
});
nullUncaught (in promise) {a: 1}Uncaught (in promise) [object Object]
new Promise(function(done,fail){
    fail(1);
}).catch();
nullUncaught (in promise) 1Uncaught (in promise) 1
new Promise(function(done,fail){
    fail(1);
}).catch(2);
nullUncaught (in promise) 1Uncaught (in promise) 1
new Promise(function(done){
    done(1);
}).then(function(data){
    console.log(data);
});
1nullnull
new Promise(function(done,fail){
    fail(1);
}).catch(function(data){
    console.log(data);
});
1nullnull
new Promise(function(done,fail){
    done(1);
    fail(2);
}).then(function(data){
    console.log(data);
});
1nullnull
new Promise(function(done,fail){
    fail(2);
    done(1);
}).then(function(data){
    console.log(data);
});
nullUncaught (in promise) 2Uncaught (in promise) 2
new Promise(function(done){
    setTimeout(function(){
        done(1);
    });
}).then(function(data){
    return data+1;
}).then(function(data){
    console.log(data);
});
2nullnull
new Promise(function(done,fail){
    fail(1);
}).then(function(data){
    console.log('then:', data);
}).catch(function(data){
    console.log('catch:', data);
});
catch: 1nullnull
new Promise(function(done,fail){
    setTimeout(function() {
        fail(1);
    });
}).catch(function(data){
    return 2;
}).then(function(data){
    console.log('then:', data);
});
then: 2nullnull
new Promise(function(){
    throw 1;
}).catch(function(data){
    console.log(data);
});
1nullnull
new Promise(function(done,fail){
    fail(2);
    throw 1;
}).catch(function(data){
    console.log(data);
});
2nullnull
new Promise(function(done){
    done(1);
}).then(function(data){
    console.log('then:', data);
},function(data){
    console.log('catch:', data);
});
then: 1nullnull
new Promise(function(done,fail){
    fail(1);
}).then(function(data){
    console.log('then:', data);
},function(data){
    console.log('catch:', data);
});
catch: 1nullnull
new Promise(function(done){
    done(Promise.resolve(1));
}).then(function(data){
    console.log(data);
});
1nullnull
new Promise(function(done){
    done(Promise.reject(1));
}).catch(function(data){
    console.log(data);
});
1nullnull
new Promise(function(done){
    done(1);
}).then(function(data){
    return data+1;
},function(data){
    console.log('catch:', data);
}).then(function(data){
    console.log('then:', data);
});
then: 2nullnull
new Promise(function(done,fail){
    fail(1);
}).then(function(data){
    console.log('then:', data);
},function(data){
    return data+1;
}).then(function(data){
    console.log('then2:', data);
});
then2: 2nullnull
new Promise(function(done,fail){
    fail(1);
}).then(function(data){
    console.log('then:', data);
},function(data){
    return Promise.resolve(data+1);
}).then(function(data){
    console.log('then2:', data);
});
then2: 2nullnull
new Promise(function(done,fail){
    fail(1);
}).then(function(data){
    console.log('then:', data);
},function(data){
    return Promise.reject(data+1);
}).catch(function(data){
    console.log('catch:', data);
});
catch: 2nullnull
var p1 = new Promise(function(done){
    setTimeout(function(){
        done(1);
    },2000);
});
var p2 = new Promise(function(done){
    setTimeout(function(){
        done(2);
    });
});
Promise.all([0,p1,p2]).then(function(data){
    console.log(data);
});
[0, 1, 2]nullnull
var p1 = new Promise(function(done){
    setTimeout(function(){
        done(1);
    },2000);
});
var p2 = new Promise(function(done,fail){
    setTimeout(function(){
        fail(2);
    });
});
Promise.all([p1,p2]).catch(function(data){
    console.log(data);
});
2nullnull
var p1 = new Promise(function(done){
    setTimeout(function(){
        done(1);
    },2000);
});
var p2 = new Promise(function(done){
    setTimeout(function(){
        done(2);
    },1000);
});
Promise.race([0,p1,p2]).then(function(data){
    console.log('then:', data);
},function(data){
    console.log('catch:', data);
});
then: 0nullnull
var p1 = new Promise(function(done){
    setTimeout(function(){
        done(1);
    },2000);
});
var p2 = new Promise(function(done){
    setTimeout(function(){
        done(2);
    },1000);
});
Promise.race([p1,p2]).then(function(data){
    console.log('then:', data);
},function(data){
    console.log('catch:', data);
});
then: 2nullnull
var p1 = new Promise(function(done){
    setTimeout(function(){
        done(1);
    },2000);
});
var p2 = new Promise(function(done,fail){
    setTimeout(function(){
        fail(2);
    },1000);
});
Promise.race([p1,p2]).then(function(data){
    console.log('then:', data);
},function(data){
    console.log('catch:', data);
});
catch: 2nullnull
var p1 = new Promise(function(done,fail){
    setTimeout(function(){
        fail(1);
    },2000);
});
var p2 = new Promise(function(done){
    setTimeout(function(){
        done(2);
    },1000);
});
Promise.race([p1,p2]).then(function(data){
    console.log('then:', data);
},function(data){
    console.log('catch:', data);
});
then: 2nullnull

转载于:https://my.oschina.net/u/993563/blog/1517122

chengzuixi7315
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用于浏览器不支持es6-promise
12-20
用于浏览器不支持es6-promise，浏览器不支持的这种模式
Javascript中的神器——Promise
10-20
JavaScript中的Promise对象是解决异步编程问题的一种重要机制，它在ES6中被引入，旨在克服传统的回调函数地狱，提供了一种更优雅的方式来管理和组织异步操作。Promise代表了一个未来可能完成或失败的操作，它拥有三...
JS-Promise的作用以及兼容
Mr_qinyivue的博客
09-23 551
Promise的作用：解决回调函数的或者解决回调地狱，promise会在成功的时候给你一个回调，失败的时候给你一个失败的回调 async//异步 await//等待 以请求写成的promise示例 async function getResult(){ //发送第一次请求 var result1 = await postSend(‘第一次请求的地址’)； result1 = JSON.parse(result1); //发送第二次请求 var result2 = await postSend(‘第二次请求地
promise兼容浏览器问题
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
09-16 5238
一、兼容ES6问题 1、在项目中使用到了ES6的Promise对象，代码在谷歌浏览器中正常运行，而在360浏览器下的兼容模式下，IE内核是不支持Promise的。 2、通过can i use网站https://caniuse.com/）查到的ES6 promise的支持情况   3、要是在项目中使用Promsie对象，解决方法是使用第三方插件bluebird.js（github地址：h...
异步编程之Javascript Promises 规范介绍
04-19 119
什么是 Promises Promises是一种关于异步编程的规范，目的是将异步处理对象和处理规则进行规范化，为异步编程提供统一接口。 传统的回调函数 说到JavaScript的异步编程处理，通常我们会想到回调函数，如下面的代码： getFileAsync("1.txt", function(error, result){ if(error){ ...
Promise浏览器兼容问题
qq_41114603的博客
02-14 1890
文章目录Promise 在360浏览器兼容模式下无法运行 Promise 在360浏览器兼容模式下无法运行 解决方案 npm install babel-polyfill --save 修改 entry: { app: ['./node_modules/babel-polyfill/dist/polyfill.js','./src/main.js'] }, 利用babel-poly...
JS点餐神器随机点菜代码
06-24
总的来说，这个"JS点餐神器随机点菜代码"项目展示了JavaScript在实现互动性功能方面的强大能力，同时也提供了一个实践和学习编程的好机会。通过学习和理解这段代码，我们可以提高自己的JS技能，并可能激发更多的创新...
JS点餐神器随机点菜特效代码
03-20
总结来说，"JS点餐神器随机点菜特效代码"是一个利用原生JavaScript实现的互动点菜工具，通过随机算法实现点菜的趣味性。通过理解和学习该项目，开发者不仅可以提升自己的JS技能，还能了解到如何利用DOM操作和事件...
webpack5 Core-js解决async 函数、promise 对象等兼容问题
最新发布
周家大小姐
11-17 1315
它能将 ES6 的一些语法进行编译转换，比如箭头函数、点点点运算符等。但是如果是 async 函数、promise 对象、数组的一些方法（includes）等，它没办法处理。过去我们使用 babel 对 js 代码进行了兼容性处理，其中使用@babel/preset-env 智能预设来处理兼容性问题。所以此时我们 js 代码仍然存在兼容性问题，一旦遇到低版本浏览器会直接报错。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。main.js中的core-js注释。
js异步与解决Promise IE兼容问题
热门推荐
猴子年华的专栏
10-31 1万+
Promise使用与解决IE兼容问题
promise兼容性问题
俊刚的博客
09-01 2716
promise兼容性如下表所示，可以看出对安卓的兼容性并不好。 而对此兼容性问题也有解决方法。 require('es6-promise').polyfill() var axios = require('axios')
【JS Polyfill】Promise.allSettled 兼容方法
時陨星的博客
08-08 1125
Promise.allSettled 兼容方法（基于 Promise.all 实现兼容，运行环境需支持 Promise API）
原生 js 实现 es6 中的 Promise
HumorMrChen的博客
07-22 5786
        es6 一经推出，Promise 就一直被大家所关注。那么，为什么 Promise 会被大家这样关注呢？答案很简单，Promise 优化了回调函数的用法，让原本需要纵向一层一层嵌套的回调函数实现了横向的调用，也就是链式调用。        既然  Promise 这么好用，那它背后的的实现原理是什么呢？要知道，作为一个有追求的程序猿，不仅要知其然，还要知其所以然，ok ，下面我就...
Vue 项目中的 Promise 兼容问题
KDDA的博客
08-13 4479
最近在一些旧型号手机上开发的时候，发现会有报错 "Promise is not defined" ，原因是低版本浏览器不支持 Promise，所以需要一个合适的方案来兼容。以基于 vue 的项目为例，可以借助 es6-promise 包实现，具体方式如下： 1. 先下载依赖 npm i es6-promise --save-dev 2. 在入口文件中引入 es6-promise 包，并使用...
原生js封装简单Promise
时远
04-16 775
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=...
setTimeout和Promise进行混合操作的执行顺序
会点php的前端小渣渣
03-06 719
console.log('同步-0.1') Promise.resolve().then(() => { console.log('P-1.1') }) setTimeout(() => { console.log('S-1.1') }); Promise.resolve().then(() => { console.log('P-1.2') }) setTimeo...
解决axios IE11 Promise对象未定义
首席码农
07-30 1万+
在你的项目中安装polyfill Babel Polyfill 按照官网方法安装并引入即可
promise对象使用介绍
weixin_65100963的博客
04-30 2658
Promise 它是一个ES6提出一个新语法，用来优化异步代码的写法。 promise：承诺 ● 生活中，它是用来表述 对将来要发生的事情的肯定。 例如 ： 高中生说，老师，我会考上一所好大学的；销售员说，老板，我一定会签下大单的；程序员说，老妈，我过年一定会带个女朋友回来的。 ● 在ES6中，它是新增的构造器（Array, Object, Promise），用来优化实现异步操作。在没有它之前，javascript中的异步处理，大多是利用回调函数来实现的。典型的几种如下:（1）setTimeout （2）a
【JavaScript】Promise 的使用
Superman_H的博客
03-16 4144
Promise 是一套处理异步场景的规范，能避免回调地狱的产生，使代码更清晰简洁。这套规范最早诞生于前端社区，并被命名为 Promise A+ 规范。参数executor称为执行器，为一回调函数调用resolve，Promise 实例的状态会从 pending 变为 fulfilled；调用reject，Promise 实例的状态会从 pending 变为 rejected；如果不调用resolvereject，则 Promise 实例的状态将一直是 pending。调用resolve。
D3.js入门指南：数据可视化神器
d3.js 是一个强大的 JavaScript 图形库，它允许开发者将数据有效地转化为网页上的可视化元素。这本书旨在介绍 d3.js 的基础，帮助读者理解和在实际项目中运用这个库。 在这本教程中，作者 Mike Dewar 提到，d3.js ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值