Promise 篇 - 一言既出 駟馬難追

楔子

夫子之說君子也，駟不及舌
--出自《論語·顏淵》

一言而非，駟馬不能追；一言而急，駟馬不能及
--出自《鄧析子·轉辭》

君子的所爲 —— Promise

一言既出駟馬難追，古代人對君子的追求，造就了他們對承諾的認真和執着，而做爲程序員的咱們，雖不能讀萬卷書，卻依然能從 Promise 裏感覺到那份執着與純真。

Promise的世界觀

和咱們小時候相似，Promise 從小便被教育這個世界是非黑即白。壞人就是絕對的壞人，好人就是絕對的好人，當 Promise 處於少年期 ( Pending ) 時期時，就一直在考慮未來長大了會怎麼樣，誠然，全部的 Promise 都想着當大俠 ( 變成 Fulfilled 狀態 )，惋惜並非全部的 Promise 最終都能變成大俠 ( Fulfilled ) 狀態，有不少 Promise 會由於種種不肯定的緣由變成 Rejected 狀態，還有一部分可能終其一輩子都在少年期 ( Pending ) 徘徊。

Promise的用處

剛開始接觸 Promise，可能感受不到他的明顯的用處，可是最近項目的一次實踐，使我真正感覺到了他的威力。

// 右鍵彈窗出現後等待用戶點擊重命名，故此處新建一個promise
      new Promise(resolve => {
        this.reNameResolve = resolve
      }).then(() => {
        data.isEdit = true
        this.$nextTick(() => {
          this.$refs.input.focus()
        })
        // 等待用戶再次點擊右鍵，在沒有enter以前
        return new Promise(resolve => {
          this.preReNameResolve = resolve
        }).then(() => {
           data.isEdit = false
        })
      })
複製代碼

這是一個右鍵彈窗功能函數的一部分

單純的一個右鍵，功能其實很簡單，就是將這個彈窗組件顯示便可，可是爲何要執行這個 Promise 呢？咱們來分析一下彈窗的後續操做，當彈窗出現後，咱們勢必要去點擊這個重命名，那麼問題就來了，重命名也要有重命名的對象，咱們到底要給誰重命名呢？因而咱們會看到，這個 Promise 其實就是在彈窗的時候將傳過來的參數進行了緩存，這樣，當咱們點擊重命名的時候，就能夠將最外層的 Promise 的狀態改變，變爲 Fulfilled，同時咱們在將其變成 Fullfilled 以後，又會新建一個 Promsie，這個 Promsie 的做用是再次把對應的該條數據的 isEdit 屬性變回到 false 狀態，這個 resolve 會在下面這個右鍵彈窗函數裏判斷後執行

// 右鍵重命名
    rename() {
      if (this.preReNameResolve) {
        this.preReNameResolve()
      }
      this.reNameResolve()
      this.contextmenuFlag = false
    }
複製代碼

看到這裏，想必你們應該清楚了 Promise 的妙處了，最後也但願咱們你們都能像 Promise 同樣——單純、執着，信守承諾。