這篇文章主要介紹了vue中如何解決使用axios對同一個(gè)接口連續(xù)請求導(dǎo)致返回?cái)?shù)據(jù)混亂的問題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，先為海淀等服務(wù)建站，海淀等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為海淀企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

業(yè)務(wù)上出現(xiàn)一個(gè)問題：如果連續(xù)對同一個(gè)接口發(fā)出請求，參數(shù)不同，有時(shí)候先請求的比后請求的返回?cái)?shù)據(jù)慢，導(dǎo)致數(shù)據(jù)順序混亂，或者數(shù)據(jù)被覆蓋的問題，所以需要控制請求的順序。

解決方法:

1.直接跟后臺溝通，將所有參數(shù)放到數(shù)組里后臺統(tǒng)一接收并返回所有數(shù)據(jù)再由前端進(jìn)行數(shù)據(jù)的拆分使用。

2.對于出現(xiàn)返回的數(shù)據(jù)混亂問題。

假設(shè)場景： 頁面中需要對三個(gè)部門請求對應(yīng)的部門人員，三個(gè)部門人員的數(shù)據(jù)為一個(gè)二維數(shù)組，連續(xù)發(fā)送請求，但由于返回?cái)?shù)據(jù)的順序不定，導(dǎo)致數(shù)組中的數(shù)據(jù)順序不是按照部門的順序。

解決方法：使用promise.all + axios。

//獲取部門人員的請求
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.對于返回?cái)?shù)據(jù)出現(xiàn)覆蓋的問題

假設(shè)場景：切換菜單的時(shí)候總是會向后臺發(fā)送同一個(gè)請求，不同參數(shù)。且假設(shè)這幾個(gè)菜單共用vuex中的一個(gè)state，假設(shè)從a菜單切換到b菜單中，a返回的數(shù)據(jù)比b返回的慢，導(dǎo)致覆蓋了state，此時(shí)雖然切換到b菜單，但是頁面上的數(shù)據(jù)是a的數(shù)據(jù)。

解決方法：使用axios中的CancelToken，對于之前的請求進(jìn)行禁止。

//取消接口相同參數(shù)不同的處于pending狀態(tài)下的請求
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() // 取消請求
    pending.splice(i, 1) // 移除當(dāng)前請求記錄
   }
  } else {
   pending[i].f() // 取消請求
   pending.splice(i, 1) // 移除當(dāng)前請求記錄
  }
 }
}

接著在請求前進(jìn)行攔截

/**
 * 請求前攔截
 */
export function requestSuccessFunc (config) {
 cancelPending(config)
 config.cancelToken = new CancelToken((c) => {
  pending.push({'u': config.url, 'f': c, delPending: config.delPending})
 })
 return config
}

/**
 * 請求結(jié)果預(yù)處理
 * @param response
 * @returns {Promise<never>}
 */
export function responseSuccessFunc (response) {
 cancelPending(response.config)
}

拓展：如果在切換路由的時(shí)候可以將之前頁面中請求處于pengding狀態(tài)的取消

export function routerAfterEachFunc () {
 // 這里可以做路由后操作
 //切換路由時(shí)取消之前頁面處于pending的請求
 for(let i=pending.length-1; i>=0; i--){
  pending[i].f() // 取消請求
  pending.splice(i, 1) // 移除當(dāng)前請求記錄
 }
 console.log(pending)
}

....

const ROUTER = new Router({
 routes: CONST_ROUTER
})
ROUTER.afterEach(routerAfterEachFunc)
export default ROUTER

4.假設(shè)這里不是請求同一個(gè)接口，而是上一個(gè)接口返回的數(shù)據(jù)作為下一個(gè)接口請求的參數(shù)，這是可以使用async await

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue中如何解決使用axios對同一個(gè)接口連續(xù)請求導(dǎo)致返回?cái)?shù)據(jù)混亂的問題”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

新聞名稱：vue中如何解決使用axios對同一個(gè)接口連續(xù)請求導(dǎo)致返回?cái)?shù)據(jù)混亂的問題
鏈接URL：http://chinadenli.net/article20/jhpdco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站導(dǎo)航、域名注冊、App開發(fā)、自適應(yīng)網(wǎng)站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)