说明

Node.js中,以异步(Async)回调著称,使用了异步,提高了程序的执行效率,但是,代码可读性较差的。

假如有几个异步操作,后一个操作需要前一个操作的执行完毕之后返回的数据才能执行下去,如果使用Node.js,就需要一层层嵌套下去,Promised对象就是针对此问题所提出来的的解决办法。

基本概念

Promise对象状态:

  1. pending

    初始状态,也称为未定状态,就是初始化Promise时,调用executor执行器函数后的状态。
  2. fulfilled

    完成状态,意味着异步操作成功。
  3. rejected

    失败状态,意味着异步操作失败。

状态转换只有这两种pending->fulfilled pending->rejected,可返回的这个Promise对象的状态主要是根据promise1.then()方法返回的值:

状态转化是单向的,不可逆转,已经确定的状态(fulfilled/rejected)无法转回初始状态(pending)

当状态为rejected,该promise无法继续往下执行,需要添加一个catch获得异常信息

回调函数:

  • resolve

    pending状态转为fulfilled状态时候回调(操作成功)
  • reject

    pending状态转为rejected状态时候回调(操作失败)

方法:

  • then()
  • catch()
  • all()
  • race()

基本使用

new Promise(function(resolve,reject){
//这里面实现异步操作,ajax等..
//获得结果,回调传参
if(/*success*/){
resolve();
}else{
reject();
}
});
//虽然没有去执行setTimeOut函数,但是Promise会自动执行,所以,一般需要将Promise写在一个function里面
new Promise(function(resolve,reject){
setTimeout(function(){
let num = Math.random();
//当随机数小于0.5,当前promise完成了执行
if(num<0.5){
resolve(num);
}else{
reject("错误,num>=0.5");
}
console.log('执行完成');
},2000);
});
let p =new Promise(function(resolve,reject){
setTimeout(function(){
let num = Math.random();
//当随机数小于0.5,当前promise完成了执行
if(num<0.5){
resolve(num);
}else{
reject(num);
}
console.log('执行完成');
},2000);
});
p.then(function(data){
//这里的data是之前resolve中的回调参数
console.log(data);
},function(error){
//这里的error是之前resolve中的回调参数
console.log("错误原因为"+error);
});

进阶使用

then()

Promise then(fun(resolve,reject))

p.then(function(data){
//这里的data是之前resolve中的回调参数
console.log(data);
},function(data){
//这里的data是之前resolve中的回调参数
console.log("错误");
console.log(data);
});

then方法,可以接收回调的参数并进行处理,then方法返回的是一个Promise对象。这里,我们主要关心的是返回的Promise对象的状态。

可返回的这个Promise对象的状态主要是根据promise1.then()方法返回的值:

  1. 如果then()方法中返回了一个参数值,那么返回的Promise将会变成接收状态。
  2. 如果then()方法中抛出了一个异常,那么返回的Promise将会变成拒绝状态。
  3. 如果then()方法调用resolve()方法,那么返回的Promise将会变成接收状态。
  4. 如果then()方法调用reject()方法,那么返回的Promise将会变成拒绝状态。
  5. 如果then()方法返回了一个未知状态(pending)的Promise新实例,那么返回的新Promise就是未知状态。
  6. 如果then()方法没有明确指定的resolve(data)/reject(data)/return data时,那么返回的新Promise就是接收状态,可以一层一层地往下传递。
let p =new Promise(function(resolve,reject){
setTimeout(function(){
let num = Math.random();
//当随机数小于0.5,当前promise完成了执行
if(num<0.5){
resolve(num);
}else{
reject(num);
}
console.log('执行完成');
},2000);
});
p.then(function(data){
//用上次获得的数据执行相关的异步操作
},function(error){
//出现错误,处理错误信息
});
let p =new Promise(function(resolve,reject){
setTimeout(function(){
resolve("hello");
console.log('执行完成');
},2000);
});
p.then(function(data){
console.log(data);
}).then(function(){
setTimeout(function(){
console.log("过了5s,继续执行");
},5000);
});
let p =new Promise(function(resolve,reject){
setTimeout(function(){
resolve("hello");
console.log('执行完成');
},2000);
});
p.then(function(data){
console.log(data);
//处理完数据之后,返回新的数据,给下次异步操作处理
return "this is new data"
}).then(function(data){
setTimeout(function(){
console.log("过了5s,继续执行");
console.log(data);
},5000);
});

catch()

catch()方法和then()方法一样,都会返回一个新的Promise对象,它主要用于捕获异步操作时出现的异常。

因此,我们通常省略then()方法的第二个参数,把错误处理控制权转交给其后面的catch()函数。

下面的两段代码块,实现的功能是一样的。

let p =new Promise(function(resolve,reject){
setTimeout(function(){
let num = Math.random();
//当随机数小于0.5,当前promise完成了执行
if(num<0.5){
resolve(num);
}else{
reject(num);
}
console.log('执行完成');
},2000);
});
p.then(function(data){
//用上次获得的数据执行相关的异步操作
},function(error){
//出现错误,处理错误信息
});
let p =new Promise(function(resolve,reject){
setTimeout(function(){
let num = Math.random();
if(num<0.5){
resolve(num);
}else{
reject(num);
}
console.log('执行完成');
},2000);
});
p.then(function(data){
//用上次获得的数据执行相关的异步操作
}).catch(function(error){
//处理错误信息
});

race()

传入参数为可迭代的对象,如数组

两个异步任务同时向同一个url发送请求,谁先得到数据,另外的那个异步任务获得的数据就会被丢弃

//2s后输出“执行完成1”
let p =new Promise(function(resolve){
setTimeout(function(){
resolve("hello");
console.log('执行完成1');
},2000);
});
//1s后输出“执行完成2”
let p1 =new Promise(function(resolve){
setTimeout(function(){
resolve("hello 2");
console.log('执行完成2');
},1000);
});
//两个异步任务同时开始
let mixedPromisesArray = [p,p1];
let p3 = Promise.race(mixedPromisesArray).then(data=>{
//这里的data为hello 2,hello被丢弃
console.log(data);
});

all()

参数也是可迭代的对象,如数组

一般用于几个任务同时并行运行的情况

当某个任务失败,状态就会变为reject

//2s后输出“执行完成1”
let p =new Promise(function(resolve){
setTimeout(function(){
resolve("hello");
console.log('执行完成1');
},2000);
});
//1s后输出“执行完成2”
let p1 =new Promise(function(resolve){
setTimeout(function(){
resolve("hello 2");
console.log('执行完成2');
},1000);
});
//两个异步任务同时开始
let mixedPromisesArray = [p,p1];
let p3 = Promise.all(mixedPromisesArray).then(data=>{
//这里的data数组,存放着之前两个异步回调传的数据
console.log(data);
});

参考

ES6关于Promise的用法

MDN Promise

JavaScript ES6 Promiss对象的更多相关文章

  1. JavaScript ES6 promiss的理解。

    本着互联网的分享精神,我将我对promise的理解分享给大家. JavaScript ES6的promise方法主要应用在处理异步函数返回的结果,注意他不是将异步函数转换为同步函数,而是等异步函数有结 ...

  2. JavaScript ES6 Promise对象

    说明 Node.js中,以异步(Async)回调著称,使用了异步,提高了程序的执行效率,但是,代码可读性较差的. 假如有几个异步操作,后一个操作需要前一个操作的执行完毕之后返回的数据才能执行下去,如果 ...

  3. 每天一点点之javascript(ES6) - Map对象

    1.语法 键/值对的集合. mapObj = new Map() 注:集合中的键和值可以是任何类型.如果使用现有密钥向集合添加值,则新值会替换旧值. 2.属性下表列出了 Map 对象的属性和描述. 构 ...

  4. javaScript Es6数组与对象的实例方法

     个人心得 我们在没有接触Es6方法之前,做一些算法之类的事情是就比较麻烦,在做的过程中也要考虑很多的问题,比较麻烦,而Es6的方法正是来方便我们在平常运用时能够将问题简便化,大大的减少我们的日常代码 ...

  5. [转]JavaScript ES6 class指南

    [转]JavaScript ES6 class指南 前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建 ...

  6. JavaScript ES6 新特性详解

    JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读 const ,  let and var 的区别: const , let 是 ES6 中用于声明变量的新关键字. ...

  7. JavaScript es6 class类的理解。

    本着互联网的分享精神,在本篇文章我将会把我对JavaScript  es6 class类的理解分享给大家. JavaScript 类主要是 JavaScript 现有的基于原型的继承的语法糖. 类语法 ...

  8. javascript中的对象拷贝

    js中的数据类型 在介绍javascript中的对象的拷贝之前,我先介绍一个基础的东西,javascript中的数据类型. 我们做前端的应该都知到在es6 之前,javascript中的数据类型Boo ...

  9. JavaScript中的对象与原型—你不知道的JavaScript上卷读书笔记(四)

    一.对象 对象可以通过两种形式定义:声明(文字)形式和构造形式.即: var myObj = { key: value // ... }; 或: var myObj = new Object(); m ...

随机推荐

  1. Excel导入导出各种方式分析

    1.引言 1.1解决哪些问题   现在很多公司用的导出基本上采用的通过gridView导出excel,此种导出存在以下几种问题 1.数据量大的时候有时导出有时会让浏览器卡死,因为导出的excel不是真 ...

  2. Docker最全教程之使用Node.js搭建团队技术文档站(二十三)

    前言 各种编程语言均有其优势和生态,有兴趣的朋友完全可以涉猎多门语言.在平常的工作之中,也可以尝试选择相对适合的编程语言来完成相关的工作. 在团队技术文档站搭建这块,笔者尝试了许多框架,最终还是选择了 ...

  3. WebP 大战 JPEG,谁才是真正的王者?

    目前在互联网上,图片流量仍占据较大的一部分.因此,在保证图片质量不变的情况下,节省流量带宽是大家一直需要去解决的问题.传统的图片格式,如 JPEG,PNG,GIF 等格式图片已经没有太多的优化空间.因 ...

  4. Zabbix集成Cloud Alert(睿象云)实现电话短信预警

    Zabbix 集成 睿象云智能告警平台 CA ( Cloud Alert ) 一 .简介与前期了解 Cloud Alert 通过应用,接入监控系统/平台的告警,集中管理您的告警,统一分派通知,统一分析 ...

  5. ABP开发框架前后端开发系列---(5)Web API调用类在Winform项目中的使用

    在前面几篇随笔介绍了我对ABP框架的改造,包括对ABP总体的介绍,以及对各个业务分层的简化,Web API 客户端封装层的设计,使得我们基于ABP框架的整体方案越来越清晰化, 也越来越接近实际的项目开 ...

  6. Django之F、Q查询,事务,自定义char字段

    F查询 from django.db.models import F,Q # 当查询条件来自于数据库的某个字段,这个时候就必须使用F # 查询卖出数大于库存数的商品 res = models.Prod ...

  7. Hive 学习之路(七)—— Hive 常用DML操作

    一.加载文件数据到表 1.1 语法 LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (p ...

  8. vuex分模块3

    nuxt 踩坑之 -- Vuex状态树的模块方式使用 原创 2017年12月20日 11:24:14 标签: vue / nuxt / vuex / 模块化 / 状态管理 874 初次看到这个模块方式 ...

  9. 算法与数据结构基础 - 队列(Queue)

    队列基础 队列具有“先进先出”的特点,用这个特点我们可以用它来处理时间序列相关或先后次序相关的问题,例如 LeetCode题目 933. Number of Recent Calls,时间复杂度O(1 ...

  10. PATA 1065 A+B and C (64bit)

    1065. A+B and C (64bit) (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 HOU, Qiming G ...