es6 Promise 异步函数调用
开发很多的时候需要异步操作,常用的做法就是用回调函数,假如需要一连串的调用,并且后面一个调用依赖前一个返回的结果的时候,就得多层嵌套回调函数,比如下面这种情况:
- $('.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 异步函数调用的更多相关文章
- javascript es6 Promise 异步同步的写法(史上最简单的教程了)
1 来个简单的例子 var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.lo ...
- ES6笔记(7)-- Promise异步编程
系列文章 -- ES6笔记系列 很久很久以前,在做Node.js聊天室,使用MongoDB数据服务的时候就遇到了多重回调嵌套导致代码混乱的问题. JS异步编程有利有弊,Promise的出现,改善了这一 ...
- 【ES6】Generator+Promise异步编程
一.概念 首先我们要理解Generator和Promise的概念. Generator:意思是生成器,可以在函数内部通过yeild来控制语句的执行或暂停状态. *Foo(){ yeild consol ...
- ES6入门八:Promise异步编程与模拟实现源码
Promise的基本使用入门: ——实例化promise对象与注册回调 ——宏任务与微任务的执行顺序 ——then方法的链式调用与抛出错误(throw new Error) ——链式调用的返回值与传值 ...
- ES6 Promise 全面总结
转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...
- Js中强大的Promise异步机制
少年别激动 我的这份随笔里面只涉及promise概念 如果想深入了解Promise的用法 可以去阮老师es6入门里面详读 奉上链接 http://es6.ruanyifeng.com/#docs/pr ...
- ES6 Promise 接口
构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...
- Es6 Promise 用法详解
Promise是什么?? 打印出来看看 console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...
- ES6/7 异步编程学习笔记
前言 在ES6的异步函数出现之前,Js实现异步编程只有settimeout.事件监听.回调函数等几种方法 settTmeout 这种方法常用于定时器与动画的功能,因为其本质上其实是浏览器的WebAPI ...
随机推荐
- element-ui 框架中使用 NavMenu 导航菜单组件时,点击一个子菜单会出现多个子菜单同时展开或折叠?
我在使用 elment-ui 框架的导航组件时,直接粘贴复制了官网上 (http://element-ui.cn/#/zh-CN/component/menu)的例子不会出错,但是当我将他们转化为动态 ...
- Fence Obstacle Course
Fence Obstacle Course 有n个区间自下而上有顺序的排列,标号\(1\sim n\),第i个区间记做\([l_i,r_i]\),现在从第n个区间的起点s出发(显然s在\([l_n,r ...
- Java 基础 - final vs static
总结 共同点,都可以修饰类,方法,属性.而不同点: static 含义:表示静态或全局,被修饰的属性和方法属于类,可以用类名.静态属性 / 方法名 访问 static 方法:只能被static方法覆盖 ...
- CSS3——过渡
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 帧动画:通过一帧 ...
- 0908CSP-S模拟测试赛后总结
我早就料到昨天会考两场2333 话说老师终于给模拟赛改名了啊. 距离NOIP祭日还有60天hhh. 以上是废话. %%%DeepinC无敌神 -rank1 zkt神.kx神.动动神 -rank2 有钱 ...
- 命令学习_nslookup
nslookup 域名 这是最常用最简单的用法,可以直接获得目标域名的IP地址和CNAME. 如下是A记录的返回情况 nslookup命令会采用先反向解释获得使用的DNS服务器的名称,上图中ns.gu ...
- Spring MVC(十四)--SpringMVC验证表单
在Spring MVC中提供了验证器可以进行服务端校验,所有的验证都必须先注册校验器,不过校验器也是Spring MVC自动加载的,在使用Spring MVC校验器之前首先要下载相关的jar包,下面是 ...
- mui 上拉加载 实现分页加载功能
mui 上拉加载 实现分页加载功能,效果图: 分页功能(上拉加载): 1.引入需要的css.js文件 <link href="static/css/mui.css" rel= ...
- leetcode-第五场双周赛-1133-最大唯一数
第一次提交: class Solution: def largestUniqueNumber(self, A: List[int]) -> int: dict = {} for i in A: ...
- 介绍了Apache日志文件每条数据的请意义以及一些实用日志分析命令
这篇文章主要介绍了apache日志文件每条数据的请意义,以及一些实用日志分析命令,需要的朋友可以参考下(http://wap.0834jl.com) 一.日志分析 如果apache的安装时采用默认的配 ...