一個函式搞定等待提示（promise-gif v3釋出）

在外掛column-relation和form-choice中（詳情請看本篇的系列文章3和4），多次使用了一個前端元件。這東西小巧玲瓏，用法極其方便，特此發文推薦。

效果如圖所示，用法只要一個函式

例如使用axios傳送get請求後想要顯示一個轉圈圈的動畫，可以這麼寫：

axios.get('http://www.xxx.tt')
     .gif()        //就是這個函式 gif()
     .then(res => {
         //成功的處理
     })
     .catch(err => {
         //失敗的處理
     })

也就是在promise物件後面鏈式呼叫一個 gif() 函式就完事了。就是這麼簡單，一個函式搞定。

如果使用者瞎胡鬧，故意在多個分頁按鈕之間依次、快速、反覆的點選會怎麼樣？

只要axios傳送了請求，就會正常顯示gif動畫；無論傳送了多少個請求，同一時間只會顯示一個gif動畫（不會出現多圖疊加的現象）。當所有的請求都有了結果（或成功或失敗）的時候，gif動畫才會最終消失。一句話總結就是：該等的時候就轉圈，都完事了就隱藏。

不喜歡這動畫，可否替換？

當然可以，給gif()傳遞引數就可以了。例如想用一個wait.gif的圖片替換，並修改最終顯示的寬、高，可以像下面這樣寫

//圖片src也可以直接傳遞base64編碼
promiseInstance.gif({width: '3rem', height: '3rem', src: 'wait.gif'})

為了除錯方便，想在控制檯裡查一下get請求傳回的結果，可以這麼寫

//請求成功會顯示 Resolved：資料
//失敗會顯示 Rejected：錯誤資訊
promiseInstance.gif({log: true})

業務邏輯分多步，可否多次呼叫gif動畫？

可以的，在一條鏈上可以無限次呼叫，例如

axios.get('http://www.xxx.tt')
     .gif()        //首次呼叫
     .then(res1 => {
         //處理成功的請求，
         return axios.post();
     })
     .gif()        //再次呼叫
     .then(res2 => {
         //接著處理
     })

總之一句話：只要是個promise物件，就可以呼叫gif()開啟動畫；無論成敗，只要有結果就關閉動畫。

安裝或解除安裝

可以通過npm進行安裝或解除安裝

//安裝
npm install zhaiduting/promise-gif
//或者這樣安裝
npm install github:zhaiduting/promise-gif

//在app.js檔案裡面載入這個函式（掛載到全域性Promise物件的原型鏈上）
Promise.prototype.gif= require('@zhaiduting/promise-gif').default;

//載入之後就可以在vue元件內部直接呼叫了
promiseInstance.gif().then().catch()

//解除安裝方法如下（有個@符號）
npm remove @zhaiduting/promise-gif

本作品採用《CC 協議》，轉載必須註明作者和本文連結