vue項(xiàng)目中發(fā)現(xiàn)的一個(gè)問(wèn)題技矮。
項(xiàng)目中使用axios去請(qǐng)求接口黄琼，每次請(qǐng)求都伴隨著一個(gè)element ui的el-loading的加載動(dòng)畫锥涕，可是在一個(gè)畫面里请琳，請(qǐng)求接口的時(shí)候沒(méi)有看到loading動(dòng)畫。
剛開(kāi)始我只是粗略地看了下畫面殊橙，就定位到了axios里辐宾，心想是不是這個(gè)el-loading寫法的問(wèn)題，看了幾遍沒(méi)有發(fā)現(xiàn)問(wèn)題膨蛮，便切回瀏覽器又看了看畫面叠纹，還是沒(méi)有找到原因。接著我又看了幾個(gè)有相同問(wèn)題的畫面敞葛，發(fā)現(xiàn)出現(xiàn)問(wèn)題的點(diǎn)都在于誉察，沒(méi)有l(wèi)oading動(dòng)畫的地方都有打開(kāi)el-dialog對(duì)話框的操作。再次切回第一個(gè)畫面的時(shí)候惹谐，才知道為什么第一次沒(méi)有發(fā)現(xiàn)這個(gè)問(wèn)題持偏。是因?yàn)榈谝粋€(gè)畫面打開(kāi)對(duì)話框時(shí)，API的請(qǐng)求時(shí)間太短了氨肌，導(dǎo)致el-loading動(dòng)畫還沒(méi)有加載出來(lái)就被銷毀鸿秆。
仔細(xì)看了幾個(gè)畫面，打開(kāi)對(duì)話框的時(shí)候怎囚，其實(shí)是有l(wèi)oading動(dòng)畫的卿叽，但是被對(duì)話框擋住了。剛打開(kāi)對(duì)話框的時(shí)候恳守，對(duì)話框的下面是能看到loading動(dòng)畫的遮罩層的考婴。
定位了問(wèn)題以后我開(kāi)始嘗試解決。參照element ui的文檔井誉，我嘗試改變loading的options參數(shù)蕉扮，但很不幸，沒(méi)有起效颗圣。隔了一天喳钟，再次看這個(gè)問(wèn)題的時(shí)候屁使，忽然發(fā)現(xiàn)代碼里是先去請(qǐng)求API，再打開(kāi)對(duì)話框（將Dialog的visible屬性設(shè)置成ture）奔则。
我嘗試將兩行代碼調(diào)換位置蛮寂，但結(jié)果依然令人沮喪。打開(kāi)對(duì)話框時(shí)易茬，依然看不到那個(gè)朝思暮想的Loading圈圈酬蹋。后來(lái)想想覺(jué)得挺蠢的，ajax是異步執(zhí)行的抽莱，肯定在賦值語(yǔ)句后執(zhí)行范抓，那么難道el-dialog是在loading動(dòng)畫后渲染的？食铐。想到這里匕垫，忽然茅塞頓開(kāi)。
如果在對(duì)話框打開(kāi)以后虐呻，再請(qǐng)求API象泵，是不是就可以了。我便將請(qǐng)求API的語(yǔ)句放在Dialog 打開(kāi)動(dòng)畫結(jié)束時(shí)的回調(diào)函數(shù) opened中斟叼。果然偶惠，這次我打開(kāi)對(duì)話框的時(shí)候，loading動(dòng)畫覆蓋在了對(duì)話框之上朗涩，成功解決問(wèn)題忽孽！
記在最后，關(guān)于前端中谢床，各種執(zhí)行扒腕，渲染的順序還需要繼續(xù)深入了解才是。
