ES6 Promise
来源:互联网 发布:windows程序闪退日志 编辑:程序博客网 时间:2024/05/18 02:30
本文是在阅读了别人的博客后,加入自己的理解写下的,如有理解错误的地方还请告知,谅解~
1.定义:
Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,
原型上有then、catch等同样很眼熟的方法.
2.简单例子
import es6 from '../helper/es6-promise' var p = new es6.Promise(function (resolve, reject) { setTimeout(function () { console.log('执行成功') resolve('执行成功后的回调函数') reject('执行失败后的回调函数~~') }, 2000) })
在上面的代码中,我们执行了一个异步操作,也就是setTimeout,2秒后,输出“执行完成”,并且调用resolve方法。
Promise的构造函数接收一个函数,且函数需要两个参数,表示异步操作执行成功和失败之后的回调函数
resolve:是将Promise的状态设置为fullfiled
reject:是将Promise的状态设置为rejected。
3.方法提取
上面的代码中我们只是new了一个对象,并没有调用,但是已经执行了,所以我们在用Promise的时候一般是包裹在一个函数中,需要的时候在调用
function runAsync () { var p = new es6.Promise(function (resolve, reject) { setTimeout(function () { console.log('执行成功') resolve('执行成功后的回调函数') reject('执行失败后的回调函数~~') }, 2000) }) return p }
ok,Promise是个什么鬼,简单的认识了一个下,但resolve,reject,then,怎么用???
——————————————————————————————————-
执行完runAsync()函数之后会返回一个Promise对象,还记得Promise对象有then,catch方法,这就是它的强大之处。
runAsync().then(function (data) { console.log(data) })
then函数接受一个参数,是函数,会拿到在runAsync中调用resolve时传的参数。以上代码输出的结果是:
执行成功
执行成功后的回调函数
对于在runAsync这个异步任务执行完成之后被执行。这就是Promise的作用了,简单来讲,就是能把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数。
4.提问:就是个回调返回,如果我把回调封装一下,给runAsync传进去不也一样吗?
runAsync: function (callBack) { setTimeout(function () { console.log('执行成功') callBack("方法回调,返回数据") }, 2000) } runAsync(function (data) { console.log(runAsyncA) })
答案是:如果是多层回到怎么办,如果callBack也是一个异步操作且执行后也需要相应的回调函数怎么办,所以Promise的then优势就体现出来了,在then方法中返回的Promise对对象并返回
5.链式操作
…
6.reject的用法
function runAsync() { var p = new es6.Promise(function (resolve, reject) { console.log('执行成功') if(true) resolve('执行成功后的回调函数') else reject('执行失败后的回调函数~~') }) return p}runAsync().then( function (data) { console.log('resolve') console.log(data) }, function (data) { console.log('reject'); console.log(data); })
7.catch的用法
作用1:用来接收reject的回调
作用2:在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死js,而是会进到这个catch方法中。
runAsync() .then(function (data) { console.log('resolved'); console.log(data); console.log(somedata); //此处的somedata未定义 }) .catch(function (reason) { console.log('rejected'); console.log(reason); })
在.then中我们并没有定义somedata,所以会报错,如果我们没有使用Promise,代码的错误回被输出到控制台中,不在往下运行,但是使用catch,会直接将错误在catch中输出,几遍有错误也不会报错,这与使用的try/catch类似
8.all的用法
Promise.all方法提供了并行执行异步操作的能力,并且在所有异步操作完成后才执行回调
「谁跑的慢,以谁为准执行回调」
Promise.all([runAsync1(), runAsync2(), runAsync3()]).then(function(results){ console.log(results);});
1.用Promise.all来执行,all接收一个数组参数,里面的值最终都算返回Promise对象。
2.三个异步操作的并行执行的,等到它们都执行完后才会进到then里面
3.三个异步操作返回的结果都在then里面呢,all会把所有异步操作的结果放进一个数组中传给then,就是上面的results
9.race的用法
「谁跑的快,以谁为准执行回调」,在then里面的回调开始执行时,其他并行函数并没有停止,仍旧再执行。
给某个异步请求设置超时时间,并且在超时后执行相应的操作
es6.Promise.race([b.run(), b.timeOut()]).then(function (results) { console.log(results)})
- ES6--Promise
- ES6 Promise
- ES6-Promise
- ES6 Promise
- ES6 Promise
- es6 promise
- Promise ES6
- ES6 Promise
- ES6--promise
- ES6: Promise
- ES6 Promise
- es6 Promise
- 【ES6】Promise
- ES6-Promise
- ES6 Promise
- es6 promise
- es6 promise对象
- ES6 Promise 对象
- HDU
- 系统移植:1. 交叉工具链的安装
- 预制件(prefab)资源的应用
- iOS scrollView 左右滑动 内容错位
- Ubuntu 16.04 安装Matlab R2015b
- ES6 Promise
- c语言中有关字符串函数strcpy,strcmp,strcat,strstr的模拟实现
- java 浮点型数据做加减乘除
- 实用工具类
- 干货:mysql索引的数据结构
- 事件委托/事件冒泡/事件捕获&&阻止事件冒泡/阻止事件默认行为
- JavaEE基础整理(01)
- linux服务器上配置wildfly10.1.0 & maven
- Vuejs2.0之异步跨域请求