ES6 入门Promise
Promise是一个对象用来传递异步操作的消息,有三种状态:Pending(进行中),Resolved(已完成又称Fulfilled)和Rejected(已失败)。
特点:对象状态不受外界的影响。一旦状态改变就不会在变,任何时候都可以得到这个结果。将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数。
有all、reject、resolve,原型上有then、catch的方法。
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('执行完成');
resolve('数据返回');
}, 2000);
});
function runAsync(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('执行完成');
resolve('数据返回');
}, 2000);
});
return p;
}
runAsync()
function runAsync(callback){
setTimeout(function(){
console.log('执行完成');
callback('数据返回');
}, 2000);
} runAsync(function(data){
console.log(data);
});
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
});
这样能够按顺序,每隔两秒输出每个异步回调中的内容,在runAsync2中传给resolve的数据,能在接下来的then方法中拿到。
执行的顺序:异步任务1完成 数据1,异步任务2完成 数据2,异步任务3完成 数据3,
function runAsync1(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('异步任务1完成');
resolve('数据1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('异步任务2完成');
resolve('数据2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('异步任务3完成');
resolve('数据3');
}, 2000);
});
return p;
}
在then方法中,你也可以直接return数据而不是Promise对象,在后面的then中就可以接收到数据:执行的顺序:异步任务1完成 数据1,异步任务2完成 数据2,返回数据啦
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return '返回数据啦';
})
.then(function(data){
console.log(data);
});
reject的作用就是把Promise的状态置为rejected,这样我们在then中就能捕捉到,然后执行“失败”情况的回调。看下面的代码。
function getNumber(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*100); //生成1-100的随机数
if(num<=5){
resolve(num);
}
else{
reject('数字太大了');
}
}, 2000);
});
return p;
} getNumber()
.then(
function(data){
console.log('resolved');
console.log(data);
},
function(reason, data){
console.log('rejected');
console.log(reason);
}
);
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});
效果和写在then的第二个参数里面一样。不过它还有另外一个作用:在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常了(代码出错了),不会报错卡死js,而是会进到这个catch方法中。
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});
all的用法
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});
ES6 入门Promise的更多相关文章
- ES6中Promise的入门(结合例子)
一.Promise的前言 解决回调地狱 //以往回调方式 函数1(function(){ //代码执行...(ajax1) 函数2(function(){ //代码执行...(ajax2) 函数3(f ...
- ES6入门八:Promise异步编程与模拟实现源码
Promise的基本使用入门: ——实例化promise对象与注册回调 ——宏任务与微任务的执行顺序 ——then方法的链式调用与抛出错误(throw new Error) ——链式调用的返回值与传值 ...
- ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
- es6入门4--promise详解
可以说每个前端开发者都无法避免解决异步问题,尤其是当处理了某个异步调用A后,又要紧接着处理其它逻辑,而最直观的做法就是通过回调函数(当然事件派发也可以)处理,比如: 请求A(function (请求响 ...
- ES6入门十二:Module(模块化)
webpack4打包配置babel7转码ES6 Module语法与API的使用 import() Module加载实现原理 Commonjs规范的模块与ES6模块的差异 ES6模块与Nodejs模块相 ...
- ES6入门十一:Generator生成器、async+await、Promisify
生成器的基本使用 生成器 + Promise async+await Promise化之Promisify工具方法 一.生成器的基本使用 在介绍生成器的使用之前,可以简单理解生成器实质上生成的就是一个 ...
- ES6的promise对象研究
ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...
- ES6的Promise
推荐一下我觉得不错关于Promise的好文章,通俗易懂 说起ES6的Promise就要提及一下JQ的$.when()方法,两者基本相同 面试的时候经常会问Promise,如果同学们能在回答Promis ...
- es6入门3--箭头函数与形参等属性的拓展
对函数拓展兴趣更大一点,优先看,前面字符串后面再说,那些API居多,会使用能记住部分就好. 一.函数参数可以使用默认值 1.默认值生效条件 在变量的解构赋值就提到了,函数参数可以使用默认值了.正常我们 ...
随机推荐
- Visual Basic 2017 操作Excel和word【2】持续更新……
1.控制台程序创建Excel,并设置状态栏显示“Hello World”文本 Module Module1 Private exitXL As Boolean = False Dim WithEven ...
- 软工作业No.7 甜美女孩第五周--测试与发布
Alpha版本发布说明 一.功能介绍 本团队所做的多模式自定义2048是用来进行纸牌模式以及正常基础模式版本的2048小游戏的.Alpha版本具有的功能大体如下: 初始界面- 纸牌模式- 基础模式- ...
- GetSystemInfo 和 GlobalMemoryStatus获取系统信息,内存信息
// GetSystemInfo.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #in ...
- setTimeout中调用this
项目案例: 左右切换tab容器的动作,封装到一个对象中: var slidingComp = { startX : 0 , moveX : 0 , ...... start : function(e) ...
- More is better
题目描述: Mr Wang wants some boys to help him with a project. Because the project is rather complex, the ...
- oracle11g的监听配置文件中的program和env两个配置,必须干掉,客户端才能正常连接
oracle11g的监听配置文件中的program和env两个配置,必须干掉,客户端才能正常连接 oracle11g的监听配置文件中的program和env两个配置,必须干掉,客户端才能正常连接 or ...
- js实现table表格相同内容按需合并
uniteTdCells(tableId) { var table = document.getElementById(tableId); for (let i = 0; i < table.r ...
- vue 使用vux封装的微信分享
main.js引入 import {WechatPlugin} from 'vux' Vue.use(WechatPlugin) 公共的jswxShare.js import Vue from 'vu ...
- ORA-00847: MEMORY_TARGET/MEMORY_MAX_TARGET and LOCK_SGA cannot be set together
群里有位兄弟,测试系统修改sga_lock=true参数后,重启库报错 ORA-00847: MEMORY_TARGET/MEMORY_MAX_TARGET and LOCK_SGA cannot b ...
- Js高级 事件 对象
1.事件 浏览器客户端上客户触发的行为都成为事件 所有的事件都是天生自带的,不需要我们我去绑定,只需要我们去触发. 通过obj.事件名=function(){} 事件名:onmouseover onm ...