ES6的promise函数用法讲解
2024-08-30 15:38:39
总结:Promise函数的出现极大的解决了Js中的异步调用代码逻辑编写太过复杂的问题,Promise对象让异步调用函数的流程显得更加的优雅,也更容易编写。
举例:
1. 异步调用:
假设现在我的一个页面中的一条数据需要我去后台查询两个接口才能完全返回,废话不说下面上代码:
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//这里会继续请求第二个接口,获取剩下的数据内容
loadXMLDoc2(xmlhttp.responseText)
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
//loadXMLDoc2和loadXMLDoc方法类似,此处就不再详细写。。。
此时是通过两个接口查询所有的数据,那如果是三个或者四个或者更多呢....,当然也是可以这种方式来实现的,但是后期维护起来的成本就会逐倍增加,因为后面维护的小伙伴会通过你写的代码去逐层去走,假如第二个接口的数据出现问题也要从第一个接口的代码处开始捋,这样就会给维护扩展工作带来很大的不便。
但是如果我们用Promise对象来重构这段代码,整个流程就会看起来清晰,废话不多说继续上代码:
function loadXMLDoc()
{
var load_Promise = new Promise(function(resolve, reject){
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//这里会继续请求第二个接口,获取剩下的数据内容
//loadXMLDoc2(xmlhttp.responseText)
resolve(xmlhttp.responseText);//这里是用来then方法中接受参数的时候调用
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send(); });
return load_Promise;
}
//调用方式
loadXMLDoc().then(function(data){
//data就是指的是我们传入的xmlhttp.responseText;
//此时可以处理data的数据结构等等
...
//在最后一个定要return一个Promise对象 不然我们的链式调用就会断
return loadXMLDoc2();
}).then().then().catch();
此处我们通过promise对象来重构了我们异步操作的代码,整个代码的流程看起来会比较舒服,也就是用一个同步的方式来编写了异步的操作,对于那些不太熟悉异步操作原理的人来说,使用Promise对象的方式也会更加容易接受。
最新文章
- lambda表达式之进化
- 关于容器为NavigationControlle时,view的起始位置的问题
- C#对于文件操作
- Java7并发编程实战(一) 线程的管理
- 【转】说说如何使用unity Vs来进行断点调试
- C#中通过Selenium IWebDriver实现人人网相册备份工具
- HDU 2157
- 编译python3
- 微软的无限存储空间-OneDrive
- VisualBox ubuntu14.04 64位 android4.4.4源码编译总结
- 删除workspace下的vss的scc文件
- asp.net(C#)利用QRCode生成二维码
- ES6 函数的扩展2
- linux(四)之元字符
- BZOJ2434: [Noi2011]阿狸的打字机(AC自动机 树状数组)
- Python3 Selenium多窗口切换
- 第25月第18天 vue
- redis安装详解
- TOJ4439微积分――曲线积分(数学,模拟)
- ConcurrentHashMap源码解析(1)
热门文章
- 题解 P1868 【饥饿的奶牛】
- 在windows下的hdfs客户端编写
- CentOS 7.4 yum安装LAMP环境
- OOP——构造函数、析构函数
- 20165318 2017-2018-2 《Java程序设计》第六周学习总结
- Day4 JavaScript(二)dom操作
- 2.编写实现:有一个三角形类Triangle,成员变量有底边x和另一条边y,和两边的夹角a(0<;a<;180),a为静态成员,成员方法有两个:求面积s(无参数)和修改角度(参数为角度)。 编写实现: 构造函数为 Triangle(int xx,int yy,int aa) 参数分别为x,y,a赋值 在main方法中构造两个对象,求出其面积,然后使用修改角度的方法,修改两边的夹角,再求出面积值。(提示
- Luogu五月月赛
- springboot activiti 整合项目框架源码 shiro 安全框架 druid 数据库连接池
- BCNF范式及其分解方法(对一次Lab作业的总结)