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

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

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('数据请求超时')
  })
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读