Ember 异步路由

由 ubuntu的疯狂 创建， 最后一次修改 2017-01-06 本文将为你介绍路由的高级特性，这些高级特性可以用于处理项目复杂的异步逻辑。关于单词promises，直译是承诺，但是个人觉得还是使用原文吧。读起来顺畅点。1，promises（承诺）Ember的路由处理异步逻辑的方式是使用Promise。简而言之，Promise就是一个表示最终结果的对象。这个对象可能是fulfill（成功获取最终结果）也可能是reject（获取结果失败）。为了获取这个最终值，或者是处理Promise失败的情况都可以使用then方法，这个方法接受两个可选的回调方法，一个是Promise获取结果成功时执行，一个是Promise获取结果失败时执行。如果promises获取结果成功那么获取到的结果将作为成功时执行的回调方法的参数。相反的，如果Promise获取结果失败，那么最终结果（失败的原因）将作为Promise失败时执行的回调方法的参数。比如下面的代码段，当Promise获取结果成功时执行fulfill回调，否则执行reject回调方法。// app/routes/promises.jsimport Ember from 'ember';export default Ember.Route.extend({ beforeModel: function() { console.log('execute model()'); var promise = this.fetchTheAnswer(); promise.then(this.fulfill, this.reject); }, // promises获取结果成功时执行 fulfill: function(answer) { console.log("The answer is " + answer); }, // promises获取结果失败时执行 reject: function(reason) { console.log("Couldn't get the answer! Reason: " + reason); }, fetchTheAnswer: function() { return new Promise(function(fulfill, reject){ return fulfill('success'); //如果返回的是fulfill则表示promises执行成功 //return reject('failure'); //如果返回的是reject则表示promises执行失败 }); }});上述这段代码就是promises的一个简单例子，promises的then方法会根据promises的获取到的最终结果执行不同的回调，如果promises获取结果成功则执行fulfill回调，否则执行reject回调。promises的强大之处不仅仅如此，promises还可以以链的形式执行多个then方法，每个then方法都会根据promises的结果执行fulfill或者reject回调。// app/routes/promises.jsimport Ember from 'ember';export default Ember.Route.extend({ beforeModel() { // 注意Jquery的Ajax方法返回的也是promises var promiese = Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls'); promiese.then(this.fetchPhotoOfUsers) .then(this.applyInstagramFilters) .then(this.uploadThrendyPhotAlbum) .then(this.displaySuccessMessage, this.handleErrors); }, fetchPhotoOfUsers: function(){ console.log('fetchPhotoOfUsers'); }, applyInstagramFilters: function() { console.log('applyInstagramFilters'); }, uploadThrendyPhotAlbum: function() { console.log('uploadThrendyPhotAlbum'); }, displaySuccessMessage: function() { console.log('displaySuccessMessage'); }, handleErrors: function() { console.log('handleErrors'); }});这种情况下会打印什么结果呢？？在前的文章已经使用过Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');获取数据，是可以成功获取数据的。所以promises获取结果成功，应该执行的是获取成功对应的回调方法。浏览器控制台打印结果如下：fetchPhotoOfUsersapplyInstagramFiltersuploadThrendyPhotAlbumdisplaySuccessMessage但是如果我把Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');改成一个不存在的URL，比如改成Ember.$.getJSON('https://www.my-example.com');执行代码之后控制台会提示出404错误，并且打印'handleErrors'。说明promises获取结果失败，执行了then里的reject回调。为了验证每个回调的reject方法再修改修改代码，如下：// app/routes/promises.jsimport Ember from 'ember';export default Ember.Route.extend({ beforeModel() { // 注意Jquery的Ajax方法返回的也是promises var promiese = Ember.$.getJSON(' https://www.my-example.com '); promiese.then(this.fetchPhotoOfUsers, this.fetchPhotoOfUsersError) .then(this.applyInstagramFilters, this.applyInstagramFiltersError) .then(this.uploadThrendyPhotAlbum, this.uploadThrendyPhotAlbumError) .then(this.displaySuccessMessage, this.handleErrors); }, fetchPhotoOfUsers: function(){ console.log('fetchPhotoOfUsers'); }, fetchPhotoOfUsersError: function() { console.log('fetchPhotoOfUsersError'); }, applyInstagramFilters: function() { console.log('applyInstagramFilters'); }, applyInstagramFiltersError: function() { console.log('applyInstagramFiltersError'); }, uploadThrendyPhotAlbum: function() { console.log('uploadThrendyPhotAlbum'); }, uploadThrendyPhotAlbumError: function() { console.log('uploadThrendyPhotAlbumError'); }, displaySuccessMessage: function() { console.log('displaySuccessMessage'); }, handleErrors: function() { console.log('handleErrors'); }});由于promises获取结果失败故执行其对应的失败处理回调。这种调用方式有点类似于try……catch……，但是本文的重点不是讲解promises，更多有关promises的教材请读者自行Google或者百度吧，在这里介绍一个js库RSVP.js，它可以让你更加简单的组织你的promises代码。在附上几个promises的参考网站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promiseht