当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue+axios中断正在发送的请求

vue+axios中断正在发送的请求

2020年07月09日  | 移动技术网IT编程  | 我要评论

前言：
axios内部提供axios.CancelToken.source().cancel()方法用于取消正在发送的请求，我们可以利用这个去处理

  1. 简单的api封装，具体看公司项目的封装方式
import axios from 'axios'
export function getDataList (cancelToken) {
  return axios({
    method: 'get',
    url: 'http://xxx.xxx.x.x:4399/getList',
    cancelToken // 需要设置cancelToken字段，用于取消请求使用
  })
}
  1. vue组件中发请求，取消正在发送的请求
<template>
  <div>
    <el-button @click="handleGetData">发送请求</el-button>
    <el-button @click="handleCancel">取消请求</el-button>
  </div>
</template>

<script>
// 这里为了方便直接将axios导入了，其实可以在封装api的时候做一下处理可能会更好
import { getDataList } from './request'
import axios from 'axios'
export default {
  data() {
    return {
      source: null
    }
  },
  methods: {
    // 发送请求
    async handleGetData() {
      const source = axios.CancelToken.source()
      this.source = source
      // source接收的是axios内部提供用于取消请求的方法
      // 我个人的理解是，每一个请求都有对应自己的token，axios通过这个去取消对应的请求
      try {
        const res = await getDataList(source.token)
        console.log(res)
      } catch (error) {
        // console.log(error)
      }
    },
    // 取消请求
    handleCancel() {
      this.source.cancel('取消请求')
      // cancel内的取消请求可以当成是取消请求后抛出的提示文案，可打印this.source.cancel('取消请求')看看
    }
  }
}
</script>

本文地址：https://blog.csdn.net/sxiagn/article/details/107174743

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网