vue中axios请求中断

最新推荐文章于 2024-09-04 14:18:57 发布

原创

最新推荐文章于 2024-09-04 14:18:57 发布 · 965 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #axios #请求 #请求中断 #交互中断

本文介绍了在Vue项目中如何解决交互过慢问题，通过中断axios请求避免页面卡顿。详细展示了配置文件request.js中的相关设置，以及组件中调用和中断请求的方法。

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

最近在项目中遇到一个交互过慢的问题，在进行其他操作的时候，就必须要中断上次请求，以免页面卡顿，具体实现代码如下：

配置文件：request.js

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 108000000 // request timeout
})

export default service

方法：

import request from '@/utils/request'

import axios from 'axios'

export function breakAxios (data, that) {
  return request({
    url: 'xxxxxx',
    method: 'post',
    data,
    cancelToken: new axios.CancelToken(function executor (c) {
      // 设置 cancel token
      that.source = c
    })
  })
}

组件中调用方法：

import axios from 'axios'
<script>
export default {
  components: {},
  data () {
    return {
        // axios请求中断
        source: null
    }
  },
  methods: {
    aa(){
        breakAxios(p, that).then(function (res)