异步解决方案----Promise与Await.pdfVIP

异步解决⽅案Promise与Await 前⾔ 异步编程模式在前端开发过程中，显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。随着ES6新标 准的到来，处理异步数据流⼜有了新的⽅案。我们都知道，在传统的ajax请求中，当异步请求之间的数据存在依赖关系的时候，就可能产⽣ 很难看的多层回调，俗称回调地狱（callback hell），这却让⼈望⽽⽣畏，Promise的出现让我们告别回调函数，写出更优雅的异步代 码。在实践过程中，却发现Promise并不完美，Async/Await是近年来JavaScript添加的最⾰命性的的特性之⼀，Async/Await提供了⼀ 种使得异步代码看起来像同步代码的替代⽅法。接下来我们介绍这两种处理异步编程的⽅案。 ⼀、Promise的原理与基本语法 1.Promise的原理 Promise 是⼀种对异步操作的封装，可以通过独⽴的接⼝添加在异步操作执⾏成功、失败时执⾏的⽅法。主流的规范是 Promises/A+。 Promise中有⼏个状态： pending: 初始状态, ⾮ fulfilled 或 rejected ； fulfilled: 成功的操作，为表述⽅便，fulfilled 使⽤ resolved 代替； rejected: 失败的操作。 pending可以转化为fulfilled或rejected并且只能转化⼀次，也就是说如果pending转化到fulfilled状态，那么就不能再转化到rejected。并 且fulfilled和rejected状态只能由pending转化⽽来，两者之间不能互相转换。 2.Promise的基本语法 Promise实例必须实现then这个⽅法 then()必须可以接收两个函数作为参数 then()返回的必须是⼀个Promise实例 lt;script src=/bluebird/3.5.1/bluebird.min.jsgt;lt;/scriptgt;//如果低版本浏览器不⽀持Promise，通过cdn这种⽅式 lt;script type=text/javascriptgt; function loadImg(src) { var promise = new Promise(function (resolve, reject) { var img = document.createElement(img) img.onload = function () { resolve(img) } img.onerror = function () { reject(图⽚加载失败) } img.src = src }) return promise } var src = /static/img/index/logo_new.png var result = loadImg(src) result.then(function (img) { console.log(1, img.width) return img }, function () { console.log(error 1) }).then(function (img) { console.log(2, img.height) }) lt;/scriptgt; ⼆、Promise 多个串联操作 Promise还可以做更多的事情，⽐如，有若⼲个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执⾏错误 处理函数。要串⾏执⾏这样的异步任务，不⽤Promise需要写⼀层⼀层的嵌套代码。 有了Promise，我们只需要简单地写job1.then(job2).then(job3).catch(handleError); 其中job1、job2和job3都是Promise对象。 ⽐如我们想实现第⼀个图⽚加载完成后，再加载第⼆个图⽚，如果其中有⼀个执⾏失败，就执⾏错误函数： var src1 = /static/img/index/logo_new.png v