vue.js 终止请求和请求超时的方法

最新推荐文章于 2024-08-30 11:24:17 发布

长乐°

最新推荐文章于 2024-08-30 11:24:17 发布

阅读量7k

点赞数 5

分类专栏： vue es6 文章标签： vue vue.js html5 css3 es6

本文链接：https://blog.csdn.net/weixin_44168929/article/details/106251506

版权

vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

es6

2 篇文章 0 订阅

订阅专栏

当前端请求发送并且响应未完成时，终止请求，不再返回数据

1、Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的。利用axios请求的config参数，向axios添加一个包含cancelToken的config配置对象。示例：

<body>
  <div id="app">
    <button @click="getMsg" class="get-msg">获取数据</button>
    <button @click="cancelGetMsg" class="cancel">取消获取</button>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      cancel: null // 这里要先初始化
    },
    methods: {
      getMsg () {
        let CancelToken = axios.CancelToken
        let self = this
        axios.get('http://xxx.com/index/index', {
          cancelToken: new CancelToken(c => {
            this.cancel = c
            console.log(c)
            // 这个参数 c 就是CancelToken构造函数里面自带的取消请求的函数，这里把该函数当参数用
          })
        }).then(res => {})
        .catch(err => {})
      },
      cancelGetMsg () {
        this.cancel() // 终止请求
      }
    }
  })
  </script>
</body>

当前端请求发送并且响应未完成时，用时太长，终止请求，不再返回数据

2、请求超时的设置。示例：

 axios.get('http://xxx.com/index/index', {
  		timeout: 300000  //这里来设置请求超时的时间
    })
  }).then(res => {})
  .catch(err => {
	console.log('数据请求超时')
  })