promise連續調用的問題

問題的背景

最近在作本身的項目的時候,遇到了一個問題.我在組件裏面監聽了一個對象的變化.一旦發生變化.先經過這個對象的ID去進行異步請求.獲取到一個屬性:URL(播放地址).而後將這個屬性綁定到audio的src屬性上.而後再去利用this.$refs獲取dom調用radio.play方法.

代碼

currentSong() {
              var v = this;
              v.loadSongUrl(id);
              v.$nextTick(() => {
                  v.$refs.audio.play();
              });
          },
複製代碼

碰見的問題

vue異步請求成功以後,還沒綁定數據就當即去執行獲取dom元素了.

示意流程

正確: currentSong變化 -> 進行異步請求 -> 綁定數據到dom -> 獲取dom 錯誤:(遇到的狀況) currentSong變化 -> 進行異步請求 -> 獲取dom ->綁定數據到dom

問題分析

爲何會有這樣的狀況出現？其實這裏是連續的異步調用.在第一次進行異步請求URL以後.在同步隊列中.個人異步請求完成以後會加入到‘任務隊列’中.因此會立刻去執行同步隊列的任務.

解決方法

v.loadSongUrl(id).then(()=>{
    v.$nextTick(() => {
                  v.$refs.audio.play();
      });
})
複製代碼

同時必須給loadSongUrl添加return:

return v.$axios.get('api/song/url', {
        params: {
            id: songsIds
        }
    }).then(response => {
        //console.log(response.data.data);
        if (response.data.code === 200) {
            songUrlList = response.data.data;
            //console.log(songUrlList);
            v.manageSongList(list,songUrlList);
        }
    }).catch(error => {
        console.log(error);
    });
複製代碼

原理

在ES6中.有封裝promise.then()方法.這個方法保證多個異步請求按序進行.回調函數中會把上一個then中返回的值當作參數值供當前then方法調用.then方法執行完畢後須要返回一個新的值給下一個then調用（沒有返回值默認使用undefined）.也就是說.每一個then只可能使用前一個then的返回值.有了這個方法.就能保證去獲取dom以前.先去綁定dom的效果.