es6 promise 所见
一、Promise是什么?
const request = url => { return new Promise((resolve, reject) => { $.get(url, data => { resolve(data) }); }) }; // 请求data1 request(url).then(data1 => { return request(data1.url); }).then(data2 => { return request(data2.url); }).then(data3 => { console.log(data3); }).catch(err => throw new Error(err));
promise是用来解决两个问题的:
- 回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象
- promise可以支持多个并发的请求,获取并发请求中的数据
- 这个promise可以解决异步的问题,本身不能说promise是异步的
promise的三种状态
var p1 = new Promise(function(resolve,reject){ resolve(1); }); var p2 = new Promise(function(resolve,reject){ setTimeout(function(){ resolve(2); }, 500); }); var p3 = new Promise(function(resolve,reject){ setTimeout(function(){ reject(3); }, 500); }); console.log(p1); console.log(p2); console.log(p3); setTimeout(function(){ console.log(p2); }, 1000); setTimeout(function(){ console.log(p3); }, 1000); p1.then(function(value){ console.log(value); }); p2.then(function(value){ console.log(value); }); p3.catch(function(err){ console.log(err); });
控制台输出:
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 1} Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined} Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined} 1 2 3 Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 2} Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: 3}
二、es6 promise用法大全
Promise是一个构造函数,自己身上有 all, reject, resolve 这几个眼熟的方法,原型上有 then, catch 等方法。
let p = new Promise((resolve, reject) => { //做一些异步操作 setTimeout(() => { console.log('执行完成'); resolve('我是成功!!'); }, 2000); });
- resolve :异步操作执行成功后的回调函数
- reject:异步操作执行失败后的回调函数
then 链式操作的用法
所以,从表面上看,Promise只是能够简化层层回调的写法,而实质上,Promise的精髓是“状态”,用维护状态、传递状态的方式来使得回调函数能够及时调用,它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的:
p.then( (data) => { console.log(data); }) .then( (data) => { console.log(data); }) .then( (data) => { console.log(data); });
reject的用法 :
把Promise的状态置为rejected,这样我们在then中就能捕捉到,然后执行“失败”情况的回调。看下面的代码。
let p = new Promise((resolve, reject) => { //做一些异步操作 setTimeout(function(){ var num = Math.ceil(Math.random()*10); //生成1-10的随机数 if(num<=5){ resolve(num); } else{ reject('数字太大了'); } }, 2000); }); p.then((data) => { console.log('resolved',data); },(err) => { console.log('rejected',err); } );
catch的用法
我们知道Promise对象除了then方法,还有一个catch方法,它是做什么用的呢?
其实它和then的第二个参数一样,用来指定reject的回调。用法是这样:
p.then( (data) => { console.log('resolved' , data) }). catch( (err) => { console.log('rejected' , err) })
效果和写在then的第二个参数里面一样,不过它还有第二个作用: 在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常(代码出错了),那么并不会报错卡死js,而是会进入到这个catch方法中。
p.then( (data) => { console.log('resolved', data); console.log(somedata);//此处的somedata的定义 }) .catch( (err) => { console.log('rejected', err) })
在resolve的回调中,我们console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise,代码运行到这里就直接在控制台报错了,不往下运行了。但是在这里,会得到这样的结果:
也就是说进到catch方法里面去了,而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了,这与我们的try/catch语句有相同的功能
all的用法:谁跑的慢,以谁为准执行回调。
all接收一个数组参数,里面的值最终都算返回Promise对象
Promise的all方法提供了并行执行异步操作的能力,并且在所有异步操作执行完成才执行回调。
看下面的例子:
let Promise1 = new Promise( function(resolve, reject) { }); let Promise2 = new Promise( function(resolve, reject) { }); let Promise3 = new Promise( function(resolve, reject) { }); let p = Promise.all( [Promise1, Promise2, Promise3] ) p.then(function() { //三个都成功则成功 },{ //只要有失败,则失败 })
race的用法:谁跑的快,以谁为准执行回调
race的使用场景:比如我们可以用race给某个异步请求设置超时时间,并且在超时后执行相应的操作,代码如下:
//请求某个图片资源 function requestImg(){ var p = new Promise( (resolve, reject) => { img.onload = function(){ resolve(img); } img.src = '图片的路径'; }); return p; } //延时函数,用于给请求计时 function timeout() { var p = new Promise( (resolve, reject) => { setTimeout( () => { reject('图片请求超时'); },5000) }); return p; } Promise.race([requestImg(), timeout()].then( (data) =>{ console.log(data); }).catch( (err) => { console.log(err); }) )
es6 promise 所见的更多相关文章
- Es6 Promise 用法详解
Promise是什么?? 打印出来看看 console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...
- 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise
Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...
- ES6 Promise 接口
构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...
- ES6 Promise 全面总结
转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...
- ES6 Promise 异步操作
最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...
- 微信小程序Http高级封装 es6 promise
公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是 数据请求! 看了下小程序的请求方式大概和a ...
- 解析ES6 Promise
ES6 Promise 概念之类的,大概读者都应该有所知道,接下来我们直入终点. 先让我们来看看什么是Promise吧,他是一个object,类,arry,function? 首先,学习它的时候应该讲 ...
- jquery Promise和ES6 Promise的区别
1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Defe ...
- ES6 Promise对象then方法链式调用
then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数.then()方法会返回一个新的Promise实例,所以then()方法后面可以继 ...
随机推荐
- 005 SpringCloud 学习笔记01-----系统架构的演变
1.系统架构的演变 随着互联网的发展,网站应用的规模不断扩大.需求的激增,带来的是技术上的压力.系统架构也因此不断的演进.升级.迭代.从单一应用,到垂直拆分,到分布式服务,到SOA,以及现在火热的微服 ...
- Java多线程编程(1)--Java中的线程
一.程序.进程和线程 程序是一组指令的有序集合,也可以将其通俗地理解为若干行代码.它本身没有任何运行的含义,它只是一个静态的实体,它可能只是一个单纯的文本文件,也有可能是经过编译之后生成的可执行文 ...
- C语言学习笔记01——C语言概述
作者:Eventi 出处:http://www.cnblogs.com/Eventi 欢迎转载,也请保留这段声明.谢谢! 1 C语言的起源 1972年,贝尔实验室的丹尼斯·里奇(Dennis Ritc ...
- Rust 智能指针(二)
1. Rc<T> 引用计数指针 Rc<T> 是引用计数指针,可以使用clone使得指针所指向的数据具有多个所有者. enum List { Cons(i32, Rc<Li ...
- PHP 使用 pdo 操作oracle数据库 报错
## SELECT UNID,NAME,NAME_XML WHERE UNID>=10 AND UNID<=15 ## 在10到15这5条数据中不为空数据php: symbol looku ...
- Python 基础-import 与 from...import....
简单说说python import与from-import- 在python用import或者from-import来导入相应的模块.模块其实就一些函数和类的集合文件,它能实现一些相应的功能,当我们需 ...
- 如何获取图片上传OSS后的缩略图 超简单
OSS是使用通过URL尾部的参数指定图片的缩放大小 图片路径后面拼接如下路径: ?x-oss-process=image/[处理类型],x_100,y_50[宽高等参数] ?x-oss-pro ...
- python 代码中log表示含义
log表示以e为底数的对数函数符号.其验证代码如下: a=np.log(np.e )print(a)print(np.e)
- js事件(十二)
一.事件三要素1.事件目标[谁触发的该事件(引起该事件触发的源头:target)]2.事件处理程序[处理相应事件的函数]3.事件对象[触发事件产生的携带事件信息的对象] 二.事件流[从页面中接受事件的 ...
- JMeter学习笔记(十八)——返回的响应数据出现中文乱码_解决方案
一.问题描述 使用jmeter过程中遇到了请求返回的响应数据出现中文乱码 二.原因分析 当没有对响应数据or响应页面设置支持解析中文的编码时,JMeter则会以默认的ISO-8859-1格式解析,而其 ...