场景一:页面中存在多个按钮(A、B、C……按钮们都可以达到大致相同的目的,A点不动可以试试B,依次类推),每个按钮点击后都会触发请求,假设用户点击按钮A后迟迟未响应,于是很自然地点击按钮B,B收到响应结果后没多久A也收到了(A请求一直pending,从未中断),就会发现原本已经展示B结果的页面忽然闪了一下展示A的结果了,这一定不是我们想要的(早不来晚不来,现在别人给我答案了,你却来了)。

场景二:搜索框一般会有边输入边搜索的功能,在输入的每个阶段,都向后台发送http请求,我们不希望如此频繁,更不希望最后返回的不是用户想要的结果。

解决方法:在util.js中定义一个公用方法request()以及它需要调用的cancelRequest()

util.js

import axios from 'axios'

const util = {
  // axios请求频繁时取消上一次请求
  request (url, params, handleSuc, handleErr) {
    let that = this
    // let CancelToken = axios.CancelToken
    // let source = CancelToken.source()
    // 取消上一次请求
    this.cancelRequest()
    axios.post(url, params, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      },
      cancelToken: new axios.CancelToken(function executor (c) {
        that.source = c
      })
    }).then((res) => {
      handleSuc(res)
    }).catch((err) => {
      if (axios.isCancel(err)) {
        // 请求如果被取消,这里是返回取消的message
        // console.log('Rquest canceled', err.message)
      } else {
        handleErr(err)
      }
    })
  },
  cancelRequest () {
    if (typeof this.source === 'function') {
      this.source('终止请求')
    }
  }
}

export default util

main.js

import util from '@/util'

// 将util绑定到Vue的原型上
Vue.prototype.$util = util

调用方法:

this.$util.request(url, params, (res) => {
  // 请求成功,执行代码
}, (err) => {
  // 请求失败,执行代码
})
0
分类: vue面试
浏览:1,048

0 条评论

发表评论

电子邮件地址不会被公开。

你必须允许浏览器启用JavaScript才能看到验证码

Scroll Up