切換頁面攔截未完成的請求

1.把請求存入 vue oulacancel裏面 

  request (context, url, params) {
    return new Promise((resolve) => {
      let newParams
      if (params) {
        newParams = JSON.parse(JSON.stringify(params)) // 爲了防止多傳入url和methodw
      }
      if (context) {
        let oneRequest
        if (process.env.NODE_ENV === 'production') {
          oneRequest = context.$http.post(url, newParams,
            {
              // use before callback
              before (request) {
                Vue.oulaCancel.push(request)
              }
            }
          )
        } else {
          oneRequest = context.$http.post(url, newParams,
            {
              // use before callback
              before (request) {
                Vue.oulaCancel.push(request)
              }
            }
          )
        }
        if (oneRequest) {
          oneRequest.then(res => {
            if (res && res.body) {
              let meta = res.body.meta
              let data = res.body.data
              if (meta) {
                if (meta.success === true) {
                  resolve(data)
                } else {
                  if (meta.errorType === 'MSG') {
                    if (url === Url.API_SERVICE_ADDRESS + Url.URL_LOGIN) { // 登錄
                      resolve({
                        type: false,
                        errorMsg: meta.errorMsg
                      })
                    } else if (url === Url.API_SERVICE_ADDRESS + Url.URL_CHANGE_PWD) { // 修改密碼
                      context.$store.commit('alert', {show: true, message: meta.errorMsg})
                    } else if (url === Url.API_SERVICE_ADDRESS + Url.VANKE_CREATE_NEW_BENCH_RPC) { // 新增對標
                      context.$store.commit('alert', {show: true, message: meta.errorMsg})
                    } else if (url === Url.API_SERVICE_ADDRESS + Url.VANKE_ADD_NEW_BENCH_RPC) { // 新增對標(區域板塊)
                      context.$store.commit('alert', {show: true, message: meta.errorMsg})
                    } else {
                      resolve({})
                      // context.$store.commit('alert', {show: true, message: meta.errorMsg})
                      context.$store.commit('alert', {show: true, message: '系統異常,請聯繫管理員'})
                    }
                  } else if (meta.errorType === 'REDIRECT') {
                    sessionStorage.removeItem('x-login-status')
                    sessionStorage.removeItem('x-user-info')
                    sessionStorage.removeItem('x-user-selectList')
                    sessionStorage.removeItem('x-user-date')
                    sessionStorage.removeItem('X-CSRF-TOKEN')
                    sessionStorage.removeItem('x-user-vanke-city')
                    context.$store.commit('setUserInfo', null)
                    router.push('/' + meta.errorMsg.toLowerCase())
                    // router.push('/login')
                    // window.location.reload()
                  }
                }
              } else {
                resolve(res)
              }
            }
          })
        } else {
          resolve(null)
        }
      } else {
        resolve(null)
      }
    })
  },

2.頁面切換時候去阻止未完成的請求

Vue.oulaCancel = []
router.beforeEach((to, from, next) => {
  while (Vue.oulaCancel.length > 0) {
    Vue.oulaCancel.shift().abort()
  }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章