vue axios取消请求

Z时代
2024-01-10
分类：技术分享

应用环境，当我们项目中使用模糊匹配查询列表的时候，输入框中输入关键字，我们就会根据关键字调接口查询数据，如果输入的很快，接口反应不是很快，那么就会出现搜索出来的数据和输入的关键字不匹配的情况。这时候我们就需要配置axios请求的CancelToken来取消还没有响应完的接口，直接根据最新输入查询接口，匹配最新的结果

引入axios定义需要的变量

// 引入axios
import axios from 'axios'
...
let cancel
let promiseArr = {}const CancelToken = axios.CancelToken

在请求拦截器中配置

// 取消请求
  if (promiseArr[config.url]) {
    promiseArr[config.url]('操作取消')
    promiseArr[config.url] = cancel
  } else {
    promiseArr[config.url] = cancel  }

在get/post/put请求中配置

...
axios.get(url, {
      params: params,
      cancelToken: new CancelToken(c => {
        cancel = c
      })
    }).then(res => {    ...

axios.post(
      url,
      params,
      {
        cancelToken: new CancelToken(c => {
          cancel = c
        })
      }    ).then(res => {

vue中axios封装完整代码

// 引入axios
import axios from 'axios'
// 引入qs模块，用来序列化post类型的数据，后面会提到
// import QS from 'qs'
import store from '@/store/index'
import router from '@/router/index'
// elementUi提示组件。
import { Message } from 'element-ui'
// import {LoadingBar} from 'iview'
let cancel
let promiseArr = {}
const CancelToken = axios.CancelToken
// 环境的切换
console.log(process.env.NODE_ENV, process.env.ENV_CONFIG, '环境参数')
if (process.env.NODE_ENV === 'development') {
  console.log(router, store, 'http.js中的路由器信息')
  axios.defaults.baseURL = 'https://api.bangying.tech/new_simulate'
} else if (process.env.NODE_ENV === 'testing') {
  axios.defaults.baseURL = 'https://api.bangying.tech/new_simulate'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'https://www.bangying.tech/api'
}
// 设置请求最大时长
axios.defaults.timeout = 50000
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'
axios.defaults.headers.common['By-User-Info'] = localStorage.getItem('userInfo_admin') ? JSON.parse(localStorage.getItem('userInfo_admin')).user_id : ''
axios.defaults.withCredentials = true
// 请求拦截器
axios.interceptors.request.use(config => {
  // 如果不是登录接口，或者微信分享接口，都需要验证token, 隐私策略
  // if (window.location.hash.indexOf('login') === -1 && window.location.hash.indexOf('wechat-share') === -1 && window.location.hash.indexOf('private') === -1) {
  //   const token = store.state.userInfo.Authorization
  //   token && (config.headers.Authorization = token)
  // }
  // 取消请求
  if (promiseArr[config.url]) {
    promiseArr[config.url]('操作取消')
    promiseArr[config.url] = cancel
  } else {
    promiseArr[config.url] = cancel
  }
  // 配置request请求头header中的Authorization，如果登陆了就有Authorization就设置一下
  if (store.state.userInfo && store.state.userInfo.Authorization) {
    const token = store.state.userInfo.Authorization
    token && (config.headers.Authorization = token)
  }
  return config
}, error => {
  Message.error({
    message: '请求接口出错',
    duration: 3000
  })
  return Promise.error(error)
})
// 响应拦截器
axios.interceptors.response.use(response => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    return Promise.resolve(response)
  } else {
    return Promise.reject(response)
  }
}, error => {
  if (error.response.status) {
    switch (error.response.status) {
      // 401: 未登录
      // 未登录则跳转登录页面，并携带当前页面的路径
      // 在登录成功后返回当前页面，这一步需要在登录页操作。
      case 401:
        // Message.error({
        //   message: '无权限',
        //   duration: 1000
        // })
        // window.location.href = store.getters.base_url + 'new-home/#/login'
        // router.replace({name: 'login'})
        break
      // 403 token过期
      // 登录过期对用户进行提示
      // 清除本地token和清空vuex中token对象
      // 跳转登录页面
      case 403:
        // Message.error({
        //   message: '登录过期，请重新登录',
        //   duration: 1000
        // })
        // 清除token
        // localStorage.removeItem('token')
        // store.commit('loginSuccess', null)
        // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
        // window.location.href = store.getters.base_url + 'new-home/#/login'
        localStorage.clear()
        store.dispatch('loginOut')
        break
        // 404请求不存在
      case 404:
        Message.error({
          message: '网络请求不存在',
          duration: 1500
        })
        break
      // 其他错误，直接抛出错误提示
      default: {
        // Message.error({
        //   message: error.response.data.message,
        //   duration: 1500
        // })
      }
    }
    return Promise.reject(error.response)
  }
})
export function get (url, params, config) {
  if (config) {
    axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'
  }
  // LoadingBar.start()
  let phpApi = false
  // get方法中使用php接口地址
  if (
    url === '/index.php/file/upload_token' ||
    url === '/index.php/home_page/currency' ||
    url === '/index.php/count_channel/channel_province_count' ||
    url === '/index.php/count_channel/channel_history_count' ||
    url === '/index.php/count_channel/channel_role_count' ||
    url === '/index.php/count_channel/channel_newadd_count' ||
    url === '/index.php/count_project/project_num_count' ||
    url === '/index.php/count_project/department_count' ||
    url === '/index.php/count_project/project_count_total' ||
    url === '/index.php/user/department' ||
    url === '/index.php/count_project/project_department_num_count' ||
    url === '/index.php/count_project/province_count' ||
    url === '/index.php/count_project/clue_source_count' ||
    url === '/index.php/count_project/stage_count' ||
    url === '/index.php/count_project/reason_count' ||
    url === '/index.php/count_project/project_time_count' ||
    url === '/index.php/count_project/project_time_department_count' ||
    url === '/index.php/count_project/duban_money_count' ||
    url === '/index.php/count_project/refuse_count' ||
    url === '/index.php/count_project/project_evaltime_count' ||
    url === '/index.php/count_project/accept_count'
  ) {
    phpApi = true
  } else {
    phpApi = false
  }
  // 线上环境
  if (process.env.NODE_ENV === 'production') {
    // 上传token
    if (phpApi) {
      axios.defaults.baseURL = 'https://api.bangying.tech/prod/pg_app_api'
    } else {
      axios.defaults.baseURL = 'https://www.bangying.tech/pg-api'
    }
  } else {
    // 开发测试环境
    // 获取上传token
    if (phpApi) {
      axios.defaults.baseURL = 'https://api.bangying.tech/new_simulate/new_m_api'
    } else {
      axios.defaults.baseURL = 'https://mn.bangying.tech/pg-api'
    }
  }
  return new Promise(async (resolve, reject) => {
    await axios.get(url, {
      params: params,
      cancelToken: new CancelToken(c => {
        cancel = c
      })
    }).then(res => {
      resolve(res.data)
      // LoadingBar.finish()
    }).catch(err => {
      reject(err.data)
      // LoadingBar.error()
    })
  })
}
export function post (url, params, config) {
  if (config) {
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
  }
  // LoadingBar.start()
  console.log(window.location.hash)
  return new Promise((resolve, reject) => {
    // 线上环境
    if (process.env.NODE_ENV === 'production') {
      // php接口
      if (
        url === '/index.php/login/account' ||
        url === '/index.php/login/wechat' ||
        url === '/index.php/login/un_login'
      ) {
        axios.defaults.baseURL = 'https://api.bangying.tech/prod/pg_app_api'
      } else if (url === 'qiniu') {
        axios.defaults.baseURL = ''
        url = 'https://qiniu.pangu.tech/'
      } else {
        // java接口
        axios.defaults.baseURL = 'https://www.bangying.tech/pg-api'
      }
    } else {
      // 开发测试环境
      // 如果是php接口
      if (
        url === '/index.php/login/account' ||
        url === '/index.php/login/wechat' ||
        url === '/index.php/login/un_login'
      ) {
        axios.defaults.baseURL = 'https://api.bangying.tech/new_simulate/new_m_api'
      } else if (url === 'qiniu') {
        axios.defaults.baseURL = ''
        url = 'https://qiniu.pangu.tech/'
      } else {
        // java接口
        axios.defaults.baseURL = 'https://mn.bangying.tech/pg-api'
      }
    }
    axios.post(
      url,
      params,
      {
        cancelToken: new CancelToken(c => {
          cancel = c
        })
      }
    ).then(res => {
      resolve(res.data)
      // LoadingBar.finish()
    }).catch(err => {
      reject(err.data)
      // LoadingBar.error()
    })
  })
}
export function put (url, params) {
  // LoadingBar.start()
  console.log(window.location.hash)
  return new Promise((resolve, reject) => {
    // 线上环境
    if (process.env.NODE_ENV === 'production') {
      if (
        url === '/index.php/login/account' ||
        url === '/index.php/project/up_status'
      ) {
        axios.defaults.baseURL = 'https://api.bangying.tech/prod/pg_app_api'
      } else if (url === 'qiniu') {
        axios.defaults.baseURL = ''
        url = 'https://qiniu.pangu.tech/'
      } else {
        axios.defaults.baseURL = 'https://www.bangying.tech/pg-api'
      }
    } else {
      // 开发测试环境
      if (
        url === '/index.php/login/account' ||
        url === '/index.php/project/up_status'
      ) {
        axios.defaults.baseURL = 'https://api.bangying.tech/new_simulate/new_m_api'
      } else {
        axios.defaults.baseURL = 'https://mn.bangying.tech/pg-api'
      }
    }
    axios.put(
      url,
      params,
      {
        cancelToken: new CancelToken(c => {
          cancel = c
        })
      }
    ).then(res => {
      resolve(res.data)
      // LoadingBar.finish()
    }).catch(err => {
      reject(err.data)
      // LoadingBar.error()
    })
  })
}
export function getAxios () {
  // 线上环境
  if (process.env.NODE_ENV === 'production') {
    axios.defaults.baseURL = 'https://www.bangying.tech/pg-api'
  } else {
    // 开发测试环境
    axios.defaults.baseURL = 'https://mn.bangying.tech/pg-api'
  }
  return axios
}

以上是 vue axios取消请求的全部内容，来源链接： utcz.com/a/14095.html

回到顶部