傑瑞的技術日記

你今天前端了嗎？

Promise 搭配 $nextTick

發表於 更新於 分類於
最近的一個專案中，切版的部分是外包，我要引入對方的 jQuery 套件和一些第三方 JS...

最近的一個專案中，切版的部分是外包，我要引入對方的 jQuery 套件和一些第三方 JS
正常會有幾個做法，最簡單的就是在 Vue Cli 的 public/index.html 直接貼上 script
另外也可以在 mounted hook 的時候引入這些東西
但是當東西太多，上面兩個方法都行不通的時候，我當下呈現這個表情：
Image

幾經波折跟同事研究之後，決定用 $nextTick 來處理，但還有牽扯到打 API 拿資料，這時候情況就會變得比較複雜了
Image

我們分了幾個步驟：

把打 API 的 function 改成 return promise
在成功打到 API 之後採用 $nextTick
挖出要執行的 jQuery code 放在 $nextTick 裡面
在 mouted hook 引用 promise

PS. 這裡會用 Promise.all 是因為不只打了一隻 API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
mounted() {
  Promise.all([this.getData()])
    .then(() => {})
},
methods: {
  getData() {
    return new Promise((resolve, reject) => {
      this.axios.post(url, {})
        .then(() => {
          this.$nextTick(() => {
            // 要放的 jQuery code
            resolve()
          })
        })
    })
  }
},

這樣就成功的解決了呢，我們研究了很久才終於搞定，真的是平安喜樂呢！
Image

今年因為疫情的關係，沒有辦法出國玩，卻不知不覺的學習了很多東西，也是得償所望啊
願我們能在技術這條路上，繼續走下去，共勉之。
最後祝大家：
Image