开发很多的时候需要异步操作,常用的做法就是用回调函数,假如需要一连串的调用,并且后面一个调用依赖前一个返回的结果的时候,就得多层嵌套回调函数,比如下面这种情况:

$('.animateEle').animate({
opacity:'.5'
}, 4000,function(){ //回调
$('.animateEle2').animate({
width:'100px'
},2000,function(){ //回调
$('.animateEle3').animate({
height:'0'
},1000,function(){
.......太乱
});
});
});

  回调函数嵌入太多了,看晕了都,代码很不美观,于是es6加入了新特性解决这个问题,Promise.

  Promise最大的好处就是可以链式的调用函数,起到异步回调函数的作用,看起来更加直观简洁,

  resolve 和 reject

  这是Promis最重要的两个方法,resolve方法可以让Promise对象的状态变为成功,reject是失败,举个例子一目了然:

        function print (ready) {
return new Promise ((resolve, reject)=>{
if(ready){
resolve("Hello World!");
}else{
reject("Good bye!");
}
})
} print(true).then(message=>{
alert(message);
},error=>{
alert(error);
}
);

  then

  Promise通常配合then方法来链式的使用,then方法里面第一个回调函数表示成功状态,也就是resolve,第二个是失败状态-reject,如果默认写一个参数的话,默认resolve

  代码会输出 Hello World!

  一个看不出来,多几个依赖状态就看着明显了:

        function Print (ready) {
return new Promise ((resolve,reject)=>{
if(ready){
resolve("Hello World!");
}else{
reject("Good bye!");
}
});
}
function print1 () {
alert("World");
}
function print2 () {
alert("!");
}
Print(true)
.then(message=>{alert(message);})
.then(print1)
.then(print2)

  上面的代码依次等到上一个Promise对象返回成功后依次调用,否则按照老式的写法还得包进回调函数里,包好几层就很不方便容易看晕,这样链式的调用取代老式写法,这是Promise最常用的。

  catch:

  当返回发生错误的时候,会触发catch,可以写成then(fn).catch(fn),相当于 then(fn).then(null, fn);

        function Print (ready) {
return new Promise ((resolve,reject)=>{
if(ready){
resolve("Hello World!");
}else{
reject("Good bye!");
}
});
}
function print1 () {
alert("World");
}
function print2 () {
alert("!");
}
    function catch_error () {
      alert('error');
    }
Print(false)
.then(message=>{alert(message);})
.then(print1)
.then(print2)
       .catch(catch_error)

  失败的状态其实可以写进then的第二个参数里,但是一般不用那么些,用catch捕获更符合promise的初衷

  all: 

  Promise.all 可以接收一个元素为 Promise 对象的数组作为参数,当这个数组里面所有的 Promise 对象都变为 resolve 时,该方法才会返回

var p1 = new Promise(resolve=>{
setTimeout(()=>{
resolve("Hello");
},3000);
}); var p2 = new Promise(resolve=>{
setTimeout(()=>{
resolve("World");
},1000);
}); Promise.all([p1, p2]).then(result=>{
console.log(result);
});

  还有一个和 Promise.all 相类似的方法 Promise.race,它同样接收一个数组,不同的是只要该数组中的 Promise 对象的状态发生变化(无论是 resolve 还是 reject)该方法都会返回。

  es6的Promise还有一些方法,就不写了,以上是常用的.

  es7里还有async函数,也起到异步作用,就不多说了先.

  兼容性不是很好,vue开发的时候常常会用babel转码,要么使用jquery的Deferred对象,用法跟Promise差不多。

es6 Promise 异步函数调用的更多相关文章

  1. javascript es6 Promise 异步同步的写法(史上最简单的教程了)

    1 来个简单的例子 var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.lo ...

  2. ES6笔记(7)-- Promise异步编程

    系列文章 -- ES6笔记系列 很久很久以前,在做Node.js聊天室,使用MongoDB数据服务的时候就遇到了多重回调嵌套导致代码混乱的问题. JS异步编程有利有弊,Promise的出现,改善了这一 ...

  3. 【ES6】Generator+Promise异步编程

    一.概念 首先我们要理解Generator和Promise的概念. Generator:意思是生成器,可以在函数内部通过yeild来控制语句的执行或暂停状态. *Foo(){ yeild consol ...

  4. ES6入门八:Promise异步编程与模拟实现源码

    Promise的基本使用入门: ——实例化promise对象与注册回调 ——宏任务与微任务的执行顺序 ——then方法的链式调用与抛出错误(throw new Error) ——链式调用的返回值与传值 ...

  5. ES6 Promise 全面总结

    转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...

  6. Js中强大的Promise异步机制

    少年别激动 我的这份随笔里面只涉及promise概念 如果想深入了解Promise的用法 可以去阮老师es6入门里面详读 奉上链接 http://es6.ruanyifeng.com/#docs/pr ...

  7. ES6 Promise 接口

    构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...

  8. Es6 Promise 用法详解

     Promise是什么??    打印出来看看  console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...

  9. ES6/7 异步编程学习笔记

    前言 在ES6的异步函数出现之前,Js实现异步编程只有settimeout.事件监听.回调函数等几种方法 settTmeout 这种方法常用于定时器与动画的功能,因为其本质上其实是浏览器的WebAPI ...

随机推荐

  1. PHP算法之无重复字符的最长子串

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb"输出: 3 解释: 因为无重复字符的最长子串是 "abc&quo ...

  2. 记一次数据丢失(电脑硬盘closed to down)的经历

    早上-高高兴兴上班去. 到了公司,突然发现出现windows.logo一两秒的时候会蓝屏,surprise. 百度了一下代码,ok修改硬盘格式,从ACHI到IDE 进入Bios,嗯?感觉界面变了,咋回 ...

  3. 阿里云代码管理平台 Teambition Codeup(行云)亮相,为企业代码安全护航

    2019杭州云栖大会企业协作与研发效能专场,企业协同平台Teambition负责人齐俊元正式发布阿里云自研的代码管理平台Teambition Codeup(行云),Codeup是一款企业级代码管理产品 ...

  4. 使用treeNMS管理及监控Redis

    Redis做为现在web应用开发的黄金搭担组合,大量的被应用,广泛用于存储session信息,权限信息,交易作业等热数据.做为一名有10年以上JAVA开发经验的程序员,工作中项目也是广泛使用了Redi ...

  5. django-filter 实现过滤时查询是否包含在数组的方法,in数组的实现

    查了半天无解,还是在官网找到的,记录一下 使用 BaseInFilter 官网地址:https://django-filter.readthedocs.io/en/master/ref/filters ...

  6. EJB(Enterprise JavaBean)科普

    该文章是引用的,主要用于自己的学习,然后是记载免得忘记的时候到处乱找.结尾有引用地址. 到底EJB是什么?被口口相传的神神秘秘的,百度一番,总觉得没有讲清楚的,仍觉得一头雾水.百度了很久,也从网络的文 ...

  7. East Central North America 2006 Hie with the Pie /// 状压dp oj22470

    题目大意: 输入n,有n个地方(1~n)需要送pizza pizza点为0点 接下来n+1行每行n+1个值 表示 i 到 j 的路径长度 输出从0点到各点送pizza最后回到0点的最短路(点可重复走) ...

  8. iOS逆向系列-theos

    概述 theos是GitHub开源的一个项目,通过nic.pl创建tweak项目.通过编写我们注入代码,然后执行编译.打包.安装等操作将代码注入iPhone安装的制定程序. theos环境配置 安装签 ...

  9. Linux-c对一个十六进制数的某一位取反

    enum SWITCH_FLAG { SWITCH_ALL_FLAG = , SWITCH_WEB_FLAG = , …… } unsigned int switch_by_bit_value = 0 ...

  10. Leetcode166. Fraction to Recurring Decimal分数到小数

    给定两个整数,分别表示分数的分子 numerator 和分母 denominator,以字符串形式返回小数. 如果小数部分为循环小数,则将循环的部分括在括号内. 示例 1: 输入: numerator ...