【前端】主流API-promise解析,js基础。
前言
在js领域,promise出现的时间已经很久了,从jquery的$.get().done().fail() 这样的API开始,到现在的es6默认支持的new Promise(),它的出现无疑使异步代码变得信任可靠,更使得前端代码的信任度直线提升,就跟它的名字一样,它的到来,是一个 Promise (保证,允诺)
异步信任问题
有一个朋友在银行系统工作,有一次,我帮他review一段代码,据他所说,这段代码给他带来了一个很大的麻烦,有一位顾客使用这个页面付款的时候意外的提交了两次付款请求,boss复查发现提交的源头是前端,当我接到这段代码的时候,这位朋友已经焦头烂额,我接过了代码, 初步分析,什么也没发现,他的代码就像下面这样:
$("btn").on("click",function(){
if($(this).hasClass("no-submit")){
$(this).removeClass("no-submit");
//忽略
$.ajax({
url:"....",
type:"json",
success:function(){
submit();
}
})
}
})
他告诉我,他已经针对按钮做点击唯一提交了,怎么可能调用两次?
但是事实就是有两次submit。
通过分析代码,最后排查的结果,原因是这个jquery的$.ajax是被二次封装过的,某种情况下回调函数被调用了两次。
oh,看起来很简单的原因,这可是个巨坑! 日常代码中,我们都需要接触各种各样的第三方库,谁来保证它们都没有隐藏的问题?如果你遇到了经过加密混淆的库,因为它内部某个try catch,或者内部某个if在非正常情况下发成的误判导致重复调用,我想你就不会再淡定的喝着咖啡敲代码了。
或者你觉得,防止重复调用这个很简单,加个判断就行了:
var a = 0;
$("btn").on("click",function(){
if($(this).hasClass("no-submit")){
$(this).removeClass("no-submit");
//忽略
$.ajax({
url:"....",
type:"json",
success:function(){
if( a==0){
submit();
} }
})
}
})
完美是吧,测试上线,继续喝咖啡。
三个月后。。。。。
有些顾客反应,点击提交后,有时没有提交成功,老板这时大发雷霆,这已经是第二次出现这样的失误了。
是的,只调用一次,但是鬼知道它会不会调用一次?
这里问题的本质是什么?
它就是所谓的回调地域。
我们总是有很多的回调函数需要交给第三方工具处理,类似于$.ajax,jquery就一定是值得信任的?图样图森破!你永远不知道jquery下面可能还埋着上一位开发者给你准备的周年大礼包。最糟糕的是,这个第三方工具你没有修改的能力,要么你换掉他,要么你解密,要么换版本,谁知道作者会不会继续更新?
把我们的回调交给不受信任的第三方程序,这就是回调地域,可怕的很!
Promise调用方式
今天的主角是promise。它可以让我们的回调变得promise。
试想,我们把上述的ajax再次封装(在不能改动源代码的情况下),可能代码如下:
var then = function(resolve,reject,timeout){
var a = 0;
$("btn").on("click",function(){
if($(this).hasClass("no-submit")){
$(this).removeClass("no-submit");
//忽略
$.ajax({
url:"....",
type:"json",
success:function(){
a==0&&resolve();
a++;
},
error:function(){
a==0&&reject();
a++;
}
})
}
})
if(new Date.now()>timeout){
a==0&&reject();
a++;
}
}
var a = 0;
ok,我只是将前面的代码封装到一个叫then的函数里,这个函数需要三个参数,resolve(解决),reject(拒绝),以及一个超时时间,另外控制调用次数的变量a也有保留。
有什么不同?
不同之处在于,then函数是可信任的,至少现在我们可以确定,它要么被resolve,要么reject,绝不可能出现调用两次,或者不调用的情况。这种封装可以叫做控制反转,
我们将原本给到$.ajax的回调权再次交回自己手中,上面的代码调用起来是这样的:
then(function(){
submit()
},function(){
error()
})
ok,我们只解决了其中的一些问题,重复调用,不调用,但还有更多的问题。
让promise登场吧!
使用promise封装上面代码:
function request(){
return new Promise(function(resolve,reject){
$.ajax({
url:"....",
type:"json",
success:function(){
resolve()
},
error:function(){
reject()
}
})
})
}
request.then(function(){
submit();
},function(){
error();
})
ok,是否豁然开朗?
promise就是解决关于异步回调信任,顺便缓解了回调金字塔(一堆回调嵌套在一起,就是一个回调金字塔)问题的解决方案。
在这个Promise构造函数中传入一个函数,这个函数有两个值,resolve、reject。一旦代码请求成功,resolve被调用,决议完成并忽略后面的所有调用。或者失败后决议被拒绝,调用reject。
决议、解决、拒绝术语
一个promise通常有三种状态 pending
(进行中)、fulfilled
(已成功)和rejected
(已失败)。
可以说在任何情况下,一个promise只有一个决议。 它只可能是fulfilled或者rejected其中一种,并且是不可以逆转的。意思是你无法让一个已经被拒绝的promise回滚。它永远都会有一个确定的回复。
Promise API
promise.all(Array);
Promise.all
方法用于将多个 Promise 实例,包装成一个新的 Promise 实例,并且这个新的promise返回的最终值是传入的多个Promise决议完成的值。
有了Promise.all方法,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise
对象提供统一的接口,使得控制异步操作更加简单易懂。
像这样的调用:
Promise.all([request("url1"),request("url2")]).then((result)=>{
console.log(result) //[url1result,url2result]
})
注意传入的顺序,数组promise决议的值与返回的result数组位置是一致的。对于以往的回调方式来说,这是很强大的api。
Promise.race(array)
这个方法和all调用方式一样,但是决议的方式不一样,.all等待所有决议完成新的 Promise返回决议。 而.race,一旦有某个promise决议完成,其余的会立刻终止。也就是说它只会执行最快的那个promise。
结束
promise已经成为主流。我在这里只讲了一些浅见,至于更多的用法,与君共勉!
【前端】主流API-promise解析,js基础。的更多相关文章
- 前端面试题目汇总摘录(JS 基础篇)
JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- 从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析
http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...
- 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.02更新)
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
- 进击Node.js基础(二)promise
一.Promise—Promise似乎是ES6中的规范 PROMISE的语言标准,PROMISE/A+规范,如何使用,在什么场景下使用 Promise时JS对异步操作场景提出的解决方案(回调,观察者模 ...
- 10慕课网《进击Node.js基础(一)》初识promise
首先用最简单的方式实现一个动画效果 <!doctype> <html> <head> <title>Promise animation</titl ...
- 03慕课网《进击Node.js基础(一)》API-URL网址解析
url url.parse(url,query,host);解析域名 url必须,地址字符串 query可选 host 可选:在不清楚协议时正确解析 querystring 字符串和对象之间互相解析 ...
- 前端05 /js基础
前端05 /js基础 昨日内容回顾 css选择器的优先级 行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0) 颜色 rgb(255,255,2 ...
- 前端-js基础
HTML三把利剑之一,浏览器具有解析js的能力 一.js基础 在HTML中可以将JavaScript/JS的代码写在head中,被script标签所包裹,当浏览器解释HTML时,遇到style标签时, ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
随机推荐
- [10] 过滤器 Filter
1.过滤器的基本概念和作用 在网站的页面访问时,我们往往需要做一些控制,如普通用户无法访问VIP用户的页面.如果在每一个需要访问控制的文件中都加上判断代码,那么代码将会很冗余,一旦需要统一修改时也极其 ...
- 基本的maven的命令行命令
1.创建简单的maven 的web项目 mvn archetype:create 举例:mvn archetype:create -DgroupId=com.demo.app -DartifactId ...
- getOutputStream() has already been called for this response
错误日志里偶尔会有getOutputStream() has already been called for this response这个错误 最近发现了高概率复现条件,所以顺手解决了一下: 首先根 ...
- String类的一些转换功能(6)
1:把字符串转换成字节数组 getBytes() 如: String s = "你好啊!" //编码 byte [] arr = s.getBytes();//这里默认编码格式是g ...
- 压缩感知中的lp球:p范数最优化为什么总会导致一个稀疏的解的原因
转自:彬彬有礼. 压缩感知中的lp球:p范数最优化为什么总会导致一个稀疏的解的原因 http://blog.csdn.net/jbb0523/article/details/40268943 题目: ...
- Linux(centos)环境下Lamp环境搭建,成功版。
搭建环境必须条件:1.Linux环境,2.Apache,3.mysql ,4.PHP,搭建步骤如下 1.开启Linux,得到root权限:sudo su 接下来输入登录密码,进入root权限,因为安装 ...
- kbhit()
kbhit() 非阻塞的响应键盘输入时间 C++函数 功能和返回值:检查是否有键盘输入 ,有返回非0 ,无返回0 int khbit(void) 头文件: #include<conio.h& ...
- Qt实现基本QMainWindow主窗口程序
这个实验用Qt实现基本QMainWindow主窗口 先上实验效果图 打开一个文件,读取文件类容 详细步骤: 1.打开Qt creator新建MainWindow工程 右键工程名添加新文件,mai ...
- 针对Openlayer3官网例子的简介
网址:http://openlayers.org/en/latest/examples/ 如果大家想了解ol3能做什么,或者说已提供的API有什么,又闲一个个翻例子跟API累的话,就看看这个吧. 1. ...
- JPEG流封装AVI视频
前言:前几天工作任务,要把JPEG流封装为AVI视频,就找了些AVI文件结构资料和示例代码研究了下,现将学习总结及最终完成的可用代码分享出来,由于本人也是现学现用,如有不恰当或错误之处,欢迎提出! 1 ...