总结: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函数用法讲解的更多相关文章

  1. ES6关于Promise的用法详解

    Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发. 当然,这并不代表迸发成了全栈.全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交 ...

  2. ES6关于Promise的用法

    Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示.简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作. 它的一般表示形 ...

  3. 阿里前端测试题--关于ES6中Promise函数的理解与应用

    今天做了阿里前端的笔试题目,原题目是这样的 //实现mergePromise函数,把传进去的数组顺序先后执行,//并且把返回的数据先后放到数组data中 const timeout = ms => ...

  4. 解读Es6之 promise

            单线程:  在同一时间只能有同一任务进行.JavaScript就是一门单线程语言                 当有多个任务需要进行时,则需要进行排队,前一个执行完毕才能执行下一个; ...

  5. ES6 Promise 用法讲解

    Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...

  6. ES6 Promise用法讲解

    所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. ES6 规定,Promise对象是一个构造函数,用来生成Promise实例. 下面代码创造了一个 ...

  7. 转--ES6 Promise 用法讲解

    Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...

  8. ES6之Promise用法详解

    一 前言 本文主要对ES6的Promise进行一些入门级的介绍.要想学习一个知识点,肯定是从三个方面出发,what.why.how.下面就跟着我一步步学习吧~ 二 什么是Promise 首先是what ...

  9. ES6之Promise的基本用法

    之前多次看过阮一峰的ES6教程,对Promise也简单的理解过,但是,由于没在项目中运用过,所以记忆的并不深刻,昨天在进行项目的改良,有一个地方需要用到Promise 所以就这样写了: onload函 ...

随机推荐

  1. 如何处理高并发情况下的DB插入

    1.  我们需要接收一个外部的订单,而这个订单号是不允许重复的 2.  数据库对外部订单号没有做唯一性约束 3.  外部经常插入相同的订单,对于已经存在的订单则拒绝处理 对于这个需求,很简单我们会用下 ...

  2. 前端技术-HTML页面的加载

    HTML页面的加载 HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染. http协议的请求过程是基于TCP协议的.http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉 ...

  3. 51 nod 1682 中位数计数

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1682 1682 中位数计数 基准时间限制:1 秒 空间限制: ...

  4. Paxos算法简单陈述

    上文二段式和三段式提交协议是相对比较容易理解的.1990年Leslie Lamport 提出的Paxos算法是一种基于消息传递且具有高度容错特性的一致性算法.但是Paxos算法比较复杂,对于不能沉心学 ...

  5. OSM

    一.OSM是什么 开放街道图(OpenStreetMap,简称OSM)是一个网上地图协作计划,目标是创造一个内容自由且能让所有人编辑的世界地图(wiki:http://wiki.openstreetm ...

  6. 【转】iOS - SQLite 数据库存储

    本文目录 1.SQLite 数据库 2.iOS 自带 SQLite 的使用 3.fmdb 的使用 4.fmdb 多线程操作 5.其他 SQLite 的第三方封装库 回到顶部 1.SQLite 数据库 ...

  7. Django提示Unknown database处理方法

    cmd.exe运行别人的程序 C:\Python27\Python.exe E:\Django\Guest\Guest\manage.py runserver 提示 django.db.utils.I ...

  8. Burpsuite-Intruder基础学习(一)

    上周吧,将公司的短信及邮箱服务测试了一遍,就学习了Burpsuite的Intruder.(自学成才,还好网上有资料,入手还是挺简单的) 网上资料:https://www.gitbook.com/boo ...

  9. mysql root密码忘记重置及相关注意事项

    1.使用mysqld_safe --skip-grant-tables跳过授权,进入mysql操作界面或者在配置文件mysqld 添加skip-grant-tables也行,找回后需要删除..恢复原样 ...

  10. P1796 汤姆斯的天堂梦

    题目描述 汤姆斯生活在一个等级为0的星球上.那里的环境极其恶劣,每天12小时的工作和成堆的垃圾让人忍无可忍.他向往着等级为N的星球上天堂般的生活. 有一些航班将人从低等级的星球送上高一级的星球,有时需 ...