詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問(wèn)題
業(yè)務(wù)上出現(xiàn)一個(gè)問(wèn)題:如果連續(xù)對(duì)同一個(gè)接口發(fā)出請(qǐng)求,參數(shù)不同,有時(shí)候先請(qǐng)求的比后請(qǐng)求的返回?cái)?shù)據(jù)慢,導(dǎo)致數(shù)據(jù)順序混亂,或者數(shù)據(jù)被覆蓋的問(wèn)題,所以需要控制請(qǐng)求的順序。
解決方法:
1.直接跟后臺(tái)溝通,將所有參數(shù)放到數(shù)組里后臺(tái)統(tǒng)一接收并返回所有數(shù)據(jù)再由前端進(jìn)行數(shù)據(jù)的拆分使用。
2.對(duì)于出現(xiàn)返回的數(shù)據(jù)混亂問(wèn)題。
假設(shè)場(chǎng)景: 頁(yè)面中需要對(duì)三個(gè)部門請(qǐng)求對(duì)應(yīng)的部門人員,三個(gè)部門人員的數(shù)據(jù)為一個(gè)二維數(shù)組,連續(xù)發(fā)送請(qǐng)求,但由于返回?cái)?shù)據(jù)的順序不定,導(dǎo)致數(shù)組中的數(shù)據(jù)順序不是按照部門的順序。
解決方法:使用promise.all + axios。
//獲取部門人員的請(qǐng)求 getDepartPerson (departData) { let that = this return new Promise(function(resolve,reject) { that.$axios({ method: 'get', url: ..., params: { ... } }).then(res => { const data = res.data.map(item => { return { value: item.userId, label: item.userName } }) resolve(data) }) }) }, //使用promise.all控制返回的數(shù)據(jù)順序 setPersonData() { const data = [{ departId: 1, departName: '部門1' }, { departId: 2, departName: '部門2' }, { departId: 3, departName: '部門3' }] let promise1 = this.getDepartPerson(data[0]) let promise2 = this.getDepartPerson(data[1]) let promise3 = this.getDepartPerson(data[2]) console.log(promise1,promise2,promise3) let that = this Promise.all([promise1,promise2,promise3]).then(value => { console.log(value) //value返回的數(shù)據(jù)是按順序的 }) },
這里要注意
在promise中this不能指向vue的,所以在promise使用前賦值
let that = this
3.對(duì)于返回?cái)?shù)據(jù)出現(xiàn)覆蓋的問(wèn)題
假設(shè)場(chǎng)景:切換菜單的時(shí)候總是會(huì)向后臺(tái)發(fā)送同一個(gè)請(qǐng)求,不同參數(shù)。且假設(shè)這幾個(gè)菜單共用vuex中的一個(gè)state,假設(shè)從a菜單切換到b菜單中,a返回的數(shù)據(jù)比b返回的慢,導(dǎo)致覆蓋了state,此時(shí)雖然切換到b菜單,但是頁(yè)面上的數(shù)據(jù)是a的數(shù)據(jù)。
解決方法:使用axios中的CancelToken,對(duì)于之前的請(qǐng)求進(jìn)行禁止。
//取消接口相同參數(shù)不同的處于pending狀態(tài)下的請(qǐng)求 export const pending = [] let CancelToken = axios.CancelToken let cancelPending = (config) => { for(let i=pending.length-1; i>=0; i--){ if (!!config) { if (pending[i].u === config.url && pending[i].delPending) { console.log('delete request') pending[i].f() // 取消請(qǐng)求 pending.splice(i, 1) // 移除當(dāng)前請(qǐng)求記錄 } } else { pending[i].f() // 取消請(qǐng)求 pending.splice(i, 1) // 移除當(dāng)前請(qǐng)求記錄 } } }
接著在請(qǐng)求前進(jìn)行攔截
/** * 請(qǐng)求前攔截 */ export function requestSuccessFunc (config) { cancelPending(config) config.cancelToken = new CancelToken((c) => { pending.push({'u': config.url, 'f': c, delPending: config.delPending}) }) return config } /** * 請(qǐng)求結(jié)果預(yù)處理 * @param response * @returns {Promise<never>} */ export function responseSuccessFunc (response) { cancelPending(response.config) }
拓展:如果在切換路由的時(shí)候可以將之前頁(yè)面中請(qǐng)求處于pengding狀態(tài)的取消
export function routerAfterEachFunc () { // 這里可以做路由后操作 //切換路由時(shí)取消之前頁(yè)面處于pending的請(qǐng)求 for(let i=pending.length-1; i>=0; i--){ pending[i].f() // 取消請(qǐng)求 pending.splice(i, 1) // 移除當(dāng)前請(qǐng)求記錄 } console.log(pending) } .... const ROUTER = new Router({ routes: CONST_ROUTER }) ROUTER.afterEach(routerAfterEachFunc) export default ROUTER
4.假設(shè)這里不是請(qǐng)求同一個(gè)接口,而是上一個(gè)接口返回的數(shù)據(jù)作為下一個(gè)接口請(qǐng)求的參數(shù),這是可以使用async await
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue開(kāi)發(fā)之LogicFlow自定義業(yè)務(wù)節(jié)點(diǎn)
這篇文章主要為大家介紹了vue開(kāi)發(fā)之LogicFlow自定義業(yè)務(wù)節(jié)點(diǎn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01vue.js實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果
這篇文章主要介紹了vue.js實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06結(jié)合mint-ui移動(dòng)端下拉加載實(shí)踐方法總結(jié)
下面小編就為大家?guī)?lái)一篇結(jié)合mint-ui移動(dòng)端下拉加載實(shí)踐方法總結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11使用vue實(shí)現(xiàn)點(diǎn)擊按鈕滑出面板的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用vue實(shí)現(xiàn)點(diǎn)擊按鈕滑出面板的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-01-01如何通過(guò)URL來(lái)實(shí)現(xiàn)在Vue中存儲(chǔ)業(yè)務(wù)狀態(tài)實(shí)用技巧
這篇文章主要為大家介紹了如何通過(guò)URL來(lái)實(shí)現(xiàn)在Vue中存儲(chǔ)業(yè)務(wù)狀態(tài)實(shí)用技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10Vue的hover/click事件如何動(dòng)態(tài)改變顏色和背景色
這篇文章主要介紹了Vue的hover/click事件如何動(dòng)態(tài)改變顏色和背景色問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11Vue中使用this.$set()如何新增數(shù)據(jù),更新視圖
這篇文章主要介紹了Vue中使用this.$set()實(shí)現(xiàn)新增數(shù)據(jù),更新視圖方式。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06