切换tab太快,导致tab与请求数据显示不一致。因业务需求,仅对某个接口进行处理。

1、api.js

import axios from 'axios'

getData: (data, that) => {
	return request({ 
		url: 'getData', 
		data, 
		method: 'get', 
	    cancelToken: new axios.CancelToken(function executor(c) {
	        that.source = c;
	    })
	}) 
},

2、request.js

export default function request({ url, data = {}, method = 'get', cancelToken }) {
  return new Promise((resolve, reject) => {
    const options = {
      url,
      method,
      cancelToken,
    }
    if (method.toLowerCase() === 'get') {
      options.params = data
    }
    else {
      options.data = data
    }
    service(options).then(res => {
      resolve(res.data)
    })
      .catch(error => {
        reject()
        console.error(error)
      })
  })
}

3、index.vue发起请求前先阻断上一次的请求

export default {
  data() {
    return {
 	  queryParams: {},
      source: null,
    };
  },
  methods: {
    getData(){
      this.cancelQuest();
      this.$api.getData(this.queryParams, this).then((res) => {
       
      })
    },
    cancelQuest() {
      if (typeof this.source === 'function') {
        this.source('您的操作过于频繁,请稍后重试!');
      }
    },
  },
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐