2017年9月19日 星期二

Vue-Resource finally

在 Vue / Vue-Resource 接 api 時候,前陣子有一件事一直很困擾我,那就是 Promise 沒有一個狀態讓我知道已經完成,不論 request 是否成功或失敗,我只能知道 resolve, reject, cache... ,但我希望有一個像 jQuery 的 always 一樣,能夠給我放一個 callback 在 request 完成時呼叫 (不論結果如何)。

今天看到一篇文章 (Finally the Promise.prototype.finally() is available),說 Promise 的 finally 已經在 TC39 ECMAScript Proposal 裡面,現在急要用的話可以走 polyfill,該文章有幾種 polyfill 的做法,可以參考看看。不過我看 Vue-Resource 的原始碼,已經有幫我處理過 finally 的樣子,因此我也沒有特別做 polyfill。

舉個之前為什麼需要 finally 的例子,因為在發 api 之前需要顯示 loading 轉轉轉,但是不管 api 的 http status 是 200 還是其他,在結束 ajax 之後,都應該關掉 loading 轉轉轉:

loading.show();

ProductService.getCategory()

 .then((res)=> {

  // success

  this.category = res.body;

  loading.close();

 }, (res)=>{

  // error

  this.category = null;

  loading.close();

 });


寫了兩次的 loading.close 感覺就很麻煩,因此有了 finally,只需要一次:

loading.show();

ProductService.getCategory()

 .then((res)=> {

  // success

  this.category = res.body;

 }, (res)=>{

  this.category = res.body;

  // error

 }).finally(() => {

  loading.close();

 });

如果有其他做法可以分享也歡迎留言~

參考:
https://stackoverflow.com/questions/35999072/what-is-the-equivalent-of-bluebird-promise-finally-in-native-es6-promises
https://hospodarets.com/promise.prototype.finally
https://github.com/pagekit/vue-resource/issues/262

沒有留言:

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...