ES6的promise函数用法讲解
总结: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对象的方式也会更加容易接受。
ES6的promise函数用法讲解的更多相关文章
- ES6关于Promise的用法详解
Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发. 当然,这并不代表迸发成了全栈.全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交 ...
- ES6关于Promise的用法
Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示.简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作. 它的一般表示形 ...
- 阿里前端测试题--关于ES6中Promise函数的理解与应用
今天做了阿里前端的笔试题目,原题目是这样的 //实现mergePromise函数,把传进去的数组顺序先后执行,//并且把返回的数据先后放到数组data中 const timeout = ms => ...
- 解读Es6之 promise
单线程: 在同一时间只能有同一任务进行.JavaScript就是一门单线程语言 当有多个任务需要进行时,则需要进行排队,前一个执行完毕才能执行下一个; ...
- ES6 Promise 用法讲解
Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...
- ES6 Promise用法讲解
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. ES6 规定,Promise对象是一个构造函数,用来生成Promise实例. 下面代码创造了一个 ...
- 转--ES6 Promise 用法讲解
Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...
- ES6之Promise用法详解
一 前言 本文主要对ES6的Promise进行一些入门级的介绍.要想学习一个知识点,肯定是从三个方面出发,what.why.how.下面就跟着我一步步学习吧~ 二 什么是Promise 首先是what ...
- ES6之Promise的基本用法
之前多次看过阮一峰的ES6教程,对Promise也简单的理解过,但是,由于没在项目中运用过,所以记忆的并不深刻,昨天在进行项目的改良,有一个地方需要用到Promise 所以就这样写了: onload函 ...
随机推荐
- 根据需求设计类并且画UML类图练习
题目如下: // 打车时,可以打专车或者快车.任何车都有车牌号和名称// 不同车价格不同,快车每公里1元,专车每公里2元// 行程开始时,显示车辆信息// 行程结束时,显示打车金额(假定行程就5公里) ...
- virtualbox+vagrant学习-4-Vagrantfile-1-简介
Vagrantfile Vagrantfile的主要功能是描述项目所需的机器类型,以及如何配置和提供这些机器.之所以称为Vagrantfiles,是因为文件的实际文本文件名是Vagrantfile(除 ...
- SSM框架之整合EhCache
本文主要讲ssm框架整合EhCache.或许有人会问什么是ehcache. 关于EhCache的介绍和优劣,我想下面的解答足以让读者明白: EhCache 是一个纯Java的进程内缓存框架,具有快速. ...
- c++——深拷贝和浅拷贝
深拷贝和浅拷贝 默认复制构造函数可以完成对象的数据成员值简单的复制 对象的数据资源是由指针指示的堆时,默认复制构造函数仅作指针值复制 1浅拷贝问题 1.c++默认的拷贝构造函数 2.=号操作符 都是浅 ...
- P1414 又是毕业季II
题目描述 彩排了一次,老师不太满意.当然啦,取每位同学的号数来找最大公约数显然不太合理.于是老师给每位同学评了一个能力值.于是现在问题变为,从n个学生中挑出k个人使得他们的默契程度(即能力值的最大公约 ...
- 3DES加解密 C语言
3DES(或称为Triple DES),它相当于是对每个数据块应用三次DES加密算法.3*8字节密钥. 设Ek()和Dk()代表DES算法的加密和解密过程,K代表DES算法使用的密钥,P代表明文,C代 ...
- 更改KVM虚拟机root的密码
今天在使用qemu-kvm安装一个虚拟机,因为已经有一个虚拟机的image文件(qcow2格式的),所以创建虚拟机很简单,直接通过以下命令从image启动就行了. qemu-kvm -cpu host ...
- centos安装telnet
安装环境:CentOS 6.4 上篇已经讲述了memcached的安装,现在要测试Memcached功能的时候,需要使用到telnet服务.于是就有了本篇. 一.安装telnet 1.检测t ...
- linux文件系统初始化过程(5)---加载initrd(下)
一.目的 linux把文件分为常规文件.目录文件.软链接文件.硬链接文件.特殊文件(设备文件.管道文件.socket文件等)几种类型,分别对应不同的新建函数sys_open().sys_mkdir() ...
- [示例] Firemonkey ListView 仿 iPhone X 浏海
Apple iPhone X 推出后,全屏上多了一个浏海,虽然褒贬不一,也有 Xcode 开发者做出了不错的 ListView 效果,当然 Delphi 也不落人後,马上试做看看. 源码下载:[示例] ...