Javascript中内置的延迟对象Promise_第1页
Javascript中内置的延迟对象Promise_第2页
Javascript中内置的延迟对象Promise_第3页
Javascript中内置的延迟对象Promise_第4页
Javascript中内置的延迟对象Promise_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、Javascript中内置的延迟对象Promise阅读目录Promise的基本使用：Promise实例的三种状态：then方法：catch方法：构造函数Promise的四个方法：官方的例子：其他：浏览器支持情况： Promise的基本使用：利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题， 更简洁地控制函数执行流程；通过new实例化Promise， 构造函数需要两个参数， 第一个参数为函数执行成功以后执行的函数resolve， 第二个函数为函数执行失败以后执行的函数reject：运行下面代码new Promise(function(resolve , reject) );通过

2、Promise，我们把回调函数用线性的方式写出来，而不是一层套一层， 这个函数有四层回调；运行下面代码复制代码fn("args", function(a) fn1("foo", function(b) fn2("bar", function(c) fn3("baz", function(d) alert("回调成功，获知的内容为："+a+b+c+d) ) ) )复制代码以上的Demo只有包含成功的回调， 如果失败的回调也算的话， 也就更麻烦了；如果使用Promise的方式，我们可以改装成线性的代

3、码， 更加符合阅读的习惯，只要在then函数下写逻辑即可；运行下面代码复制代码new Promise(function(resolve , reject) resolve(1);).then(function(val) console.log(val); return new Promise(function(resolve , reject) resolve(2); );).then(function(val) console.log(val); return new Promise(function(resolve , reject) resolve(3); );).then(functi

4、on(val) console.log(val); return new Promise(function(resolve , reject) resolve(4); );).then(function(val) console.log(val););复制代码这是一个ajax异步获取数据的例子， 我们使用了回调函数；运行下面代码复制代码<html><head> <meta charset="utf-8"></head><body><script> var callback = function(res)

5、 console.log(res); ; var ajax = function(url, callback) var r = new XMLHttpRequest(); r.open("GET", url, true); r.onreadystatechange = function () if (r.readyState != 4 | r.status != 200) return; var data = JSON.parse(r.responseText); callback(data); ; r.send(); ; /执行请求： ajax("?rows=1

6、0&f=firstName", callback); /再做别的事情；</script></body></html>复制代码因为ES6内置了Promise， 我们可以把以上的callback改写成promise的方式， 首先ajax函数返回一个Promise对象；运行下面代码复制代码<html><head> <meta charset="utf-8"></head><body> <script> var callback = function(res

7、) console.log(res); ; var ajax = function(url) return new Promise(function(resolve, reject) var r = new XMLHttpRequest(); r.open("GET", url, true); r.onreadystatechange = function () if (r.readyState != 4 | r.status != 200) return; var data = JSON.parse(r.responseText); resolve(data); ; r.

8、send(); ) ; /执行请求： ajax("?rows=10&f=firstName").then(function(data) callback(data); ); /再做别的事情； </script></body></html>复制代码回到顶部Promise实例的三种状态：每一个实例化的Promise都有三个状态；pending(等待) rejected(拒绝) resolved(解决) ，默认的状态为pending，如果执行了resolve()， 那么这个promise的状态会变为resolve，如果执行了reject

9、(), 那么这个promise的状态就会变成rejected， 而且这些状态是不可撤销的，一经更改，不会再变了；回到顶部then方法：promise有一个then方法，then方法接收两个参数， 第一个为函数的成功回调， 第二个为函数的失败回调：运行下面代码复制代码var promise = new Promise(function(resolve , reject) resolve(); /执行成功回调;);console.log(0);promise.then(function(val) console.log(1); , function() console.log("失败&q

10、uot;););console.log("2");复制代码运行下面代码复制代码var promise = new Promise(function(resolve , reject) reject(););console.log(0);promise.then(function(val) console.log(1);, function() console.log("失败"););console.log("2");复制代码then方法每一次都是返回不同的Promise实例，then的第一个参数是成功回调， 这个成功回调的参数为： 上

11、一个Promise实例执行resolve方法的参数；一般来说， then方法会返回当前的promise， 如果在then方法里面return 一个新的Promise实例，那么此时的then返回的就是新的Promise实例， 利用这个特性，就可以实现多层回调；运行下面代码复制代码new Promise(function(resolve , reject) resolve(1);).then(function(val) console.log(val); return new Promise(function(resolve , reject) resolve(2); );).then(funct

12、ion(val) console.log(val); return new Promise(function(resolve , reject) resolve(3); );).then(function(val) console.log(val); return new Promise(function(resolve , reject) resolve(4); );).then(function(val) console.log(val););复制代码不管代码是异步还是同步的， 都可以用Promise的then方法， 同步的代码直接写在then方法第一个参数， 把需要参数通过resolve

13、传给下一个then方法，如果是异步的代码， 就直接return一个Promise实例：运行下面代码复制代码new Promise(function(resolve , reject) resolve(1);).then(function(val) console.log(val); return 2;).then(function(val) console.log(val); return 3;).then(function(val) console.log(val); return new Promise(function(resolve,reject) /异步操作些这里 resolve(4

14、); );).then(function(val) console.log(val); return 5;).then(function(val) console.log(val););复制代码回到顶部catch方法：catch方法和失败回调时一样的， 如果上一个异步函数抛出了错误了， 错误会被捕获， 并执行catch方法或者失败回调；运行下面代码复制代码var promise = new Promise(function(resolve , reject) resolve(); /执行成功回调;);console.log(0);promise.then(function(val) conso

15、le.log("成功"); throw new Error("heheda");).catch(function(e) console.log(e);).then(function() console.log("继续执行"););复制代码 Promise中的错误是会一层层传递的， 如果错误没有没有被捕获， 会一直传递给下一个promise对象， 直到被捕获为止， 然后继续往下执行：运行下面代码复制代码new Promise(function(resolve , reject) resolve(1);).then(function(va

16、l) console.log(val); return new Promise(function(resolve , reject) throw new Error("err"); ); ).then(function(val) console.log(val); return new Promise(function(resolve , reject) resolve(3); ); ).then(function(val) console.log(val); return new Promise(function(resolve , reject) resolve(4);

17、 ); ).then(function(val) console.log(val); ).catch(function(err) console.log(err); ).then(function() console.log("继续执行") )复制代码回到顶部构造函数Promise的四个方法：构造函数Promise有四个方法, Promise.all， Promise.race, Promise.reject, Promise.resolve：Promise.all(iterable)返回一个promise对象，当iterable参数里所有的promise都被解决后，该pr

18、omise也会被解决要注意all方法是Promise函数的方法，不是实例的方法， 参数是一个数组， 数组里面全是Promise的实例 ： 运行下面代码复制代码var p0 = new Promise(function(resolve) setTimeout(function() resolve(0) ,1000);)var p1 = new Promise(function(resolve) setTimeout(function() resolve(1) ,2000);)var p2 = new Promise(function(resolve) setTimeout(function()

19、resolve(2) ,3000);)Promise.all(p0,p1,p2).then(function(arr) console.log(arr)复制代码Promise.race(iterable)当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。Promise.reject(reason)调用Promise的rejected句柄，并返回这个Promise对象。Promise.resolve(value)用成功值value解决一个Prom

20、ise对象。如果该value为可继续的（thenable，即带有then方法），返回的Promise对象会“跟随”这个value，采用这个value的最终状态；否则的话返回值会用这个value满足（fullfil）返回的Promise对象。回到顶部官方的例子：运行下面代码复制代码<html><head> <meta charset="utf-8"></head><body><div id="log"></div><script> 'use strict

21、' var promiseCount = 0; function testPromise() var thisPromiseCount = +promiseCount; var log = document.getElementById('log'); log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 开始(同步代码开始)<br/>'); / 我们创建一个新的promise: 然后用'result'字符串解决这个promise (3秒后) var

22、 p1 = new Promise(function (resolve, reject) / 解决函数带着解决（resolve）或拒绝（reject）promise的能力被执行 log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise开始(异步代码开始)<br/>'); / 这只是个创建异步解决的示例 window.setTimeout(function () / 我们满足（fullfil）了这个promise! resolve(thisPromiseCount) , Math

23、.random() * 2000 + 1000); ); / 定义当promise被满足时应做什么 p1.then(function (val) / 输出一段信息和一个值 log.insertAdjacentHTML('beforeend', val + ') Promise被满足了(异步代码结束)<br/>'); ); log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 建立了Promise(同步代码结束)<br/><br/>'); testPromise();</script></body></html>复制代码既然有了Promise ， 我们就可以把封装XMLHttpRequest封装成GET方法， 方便使用：运行下面代码复制代码function get(

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论