本文將為你介紹路由的高階特性，這些高階特性可以用於處理專案複雜的非同步邏輯。

關於單詞promises，直譯是承諾，但是個人覺得還是使用原文吧。讀起來順暢點。

1，promises（承諾）

       Ember的路由處理非同步邏輯的方式是使用promises。簡而言之，promises就是一個表示最終結果的物件。這個物件可能是fulfill（成功獲取最終結果）也可能是reject（獲取結果失敗）。為了獲取這個最終值，或者是處理promises失敗的情況都可以使用then方法，這個方法接受兩個可選的回撥方法，一個是promises獲取結果成功時執行，一個是promises獲取結果失敗時執行。如果

//  app/routes/promises.js
 
import 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.js
 
import 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獲取結果成功，應該執行的是獲取成功對應的回撥方法。瀏覽器控制檯列印結果如下：

fetchPhotoOfUsers
applyInstagramFilters
uploadThrendyPhotAlbum
displaySuccessMessage

       但是如果我把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.js
 
import 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庫，它可以讓你更加簡單的組織你的promises程式碼。

在附上幾個promises的參考網站：

極力推薦看第二個網站的教材，這個網站可以直接執行js代碼。還有源碼和PDF。非常棒！！！

2，promises中止路由

       當發生路由切換的時候，在model回撥（或者是beforeMode、afterModel）中獲取的資料集會在切換完成的時候傳遞到路由對應的controller上。如果model回撥返回的是一個普通的物件（非promises物件）或者是陣列，路由的切換會立即執行，但是如果model回撥返回的是一個promises物件，路由的切換將會被中止直到promises執行完成（返回fulfill或者是reject）才切換。

       路由器任務任何一個包含了then方法的物件都是一個promises。

       如果promises獲取結果成功則會從被中止的地方繼續往下執行或者是執行路由鏈的下一個路由，如果promises返回的依然是一個promises，那麼路由依然再次被中止，等待promises的返回結果，如果是fulfill則從被中止的地方開始往下執行，以此類推，一直到獲取到model回撥所需的結果。

       傳遞到每個路由的setupController回撥的值都是promises返回fulfill時的值。如下程式碼：

//  app/routes/tardy.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              return new Ember.RSVP.Promise(function(resolver) {
                     console.log('start......');
                     Ember.run.later(function() {
                            resolver({ msg: 'Hold your horses!!'});
                     }, 3000);
              });
       },
       setupController(controller, model) {
              console.log('msg = ' + model.msg);
       }
});

       一進入路由tardy，model回撥就會被執行並且返回一個延遲3秒才執行的promises，在這期間路由會中止。當promises返回fulfill路由會繼續執行，並將model返回的物件傳遞到setupController方法中。

       雖然這種中止的行為會影響響應速度但是這是非常必要的，特別是你需要保證model回撥得到的資料是完整的資料的時候。

3，promises獲取結果失敗

       文章前面主要講的是promises獲取結果成功的情況，但是如果是獲取結果失敗的情況又是怎麼處理呢？？

       預設情況下，如果model回撥返回的是一個promises物件並且此promises返回的是reject，此時路由切換將被終止，也不會渲染對應的模板，並且會在瀏覽器控制檯打印出錯誤日誌資訊，例子promises-ret-reject.js會演示。

       你可以自定義處理出錯資訊的邏輯，只要在route的actions雜湊物件中配置即可。當promises獲取結果失敗的預設情況下會執行一個名為error的處理事件，否則會執行你自定義的處理事件。

//  app/routes/promises-ret-reject.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              //  為了測試效果直接返回reject
              return Ember.RSVP.reject('FAIL');
       },
       actions: {
              error: function(reason) {
                     console.log('reason = ' + reason);
 
                     //  如果你想讓這個事件冒泡到頂級路由application只需要返回true
                     //  return true;
              }
       }
});

       如果沒有不允許事件冒泡列印結果僅僅是“reason = FAIL”。並且頁面上什麼都不顯示（不渲染模板）。

       如果去掉最後一行程式碼的註釋，讓事件冒泡到頂級路由application中的預設方法處理，那麼結果又是什麼呢？

結果是先列印了處理結果，然後再打印出提示錯誤的日誌資訊。並且頁面上什麼都不顯示（不渲染模板）。

4，恢復promises的reject狀態

       在前面第3點介紹了promises獲取結果失敗時會終止路由切換，但是如果model返回是一個promises鏈呢？程式能到就這樣死了！！！顯然是不行的，做法是把model回撥中返回的reject轉換為fulfill。這樣就可以繼續執行或者切換到下一個路由了！

//  app/routes/funky.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              var promises = Ember.RSVP.reject('FAIL');
              //  由於已經知道promises返回的是reject，所以fulfill回撥直接寫為null
              return promises.then(null, function() {
                     return { msg: '恢復reject狀態：其實就是在reject回撥中繼續執行fulfill狀態下的程式碼。' };
              });
       }
});

為了驗證model回撥的結果，直接在模板上顯示msg。

<!--  app/templates/funky.hbs  -->
 
funky模板
<br>
{{model.msg}}

說明model回撥進入到reject回撥中，並正確返回了預期結果。

       到本文為止有關路由這以整章的內容也全部介紹完畢了！！難點在《Ember.js 入門指南——查詢引數》這一篇。能力有限沒有把這篇的內容講明白，暫時擱下待日後完善！

       總的來說路由主要職責是獲取資料，根據邏輯處理資料。有點MVC架構的dao層，專門做資料的CRUD操作。當然另外一個重要職責就是路由的切換，以及切換的時候引數的設定問題。

       結束完這一章下一章接著介紹元件（Component），正好是國慶休息幾天再繼續吧！！祝大夥國慶快樂！！！