Vue中取消请求与错误处理-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaofeiweb/article/details/89151014

本文介绍在Vue项目中如何使用Promise和$http进行请求管理，实现请求的取消及错误的统一处理。通过将请求存入特定数组并在路由变化时取消未完成请求，确保资源的有效利用和用户体验的提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()
  }

切换页面拦截未完成的请求