axios怎么取消请求和避免重复请求？-群英

上一篇：vue框架怎样实现选择题的答题功能？下一篇：使用JS怎样做窗口滚动的效果？

axios怎么取消请求和避免重复请求？在实际的应用中，在项目的一些场景会有连续发送多个请求的情况，而异步会导致最后得到的是我们不想要的结果，这对于性能的影响是很大的，因此了解axios怎么取消请求和避免重复请求还是很有必要的，下面我们就来具体了解看看。

起源

某个页面需要下载全部数据的功能，下载数据量大，接口延迟长.....

某个页面加载初始数据量延长长，但单个检索快速，出现初始数据加载中时，检索接口返回，初始数据后续返回覆盖了检索数据的展示....

这些情况需要我们：

能够手动取消/终止请求Request。
某些页面接口同时只能有一个在请求。

现状

系统基于老哥花裤衩开源的vue-element-admin做的二次开发，其中的请求采用的是axios，其中封装的request.js关键代码如下所示：

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 500000, // request timeout
  transformRequest: [function(data) {
    // 对 data 进行任意转换处理
    return Qs.stringify({
      ...data
    },
    // 数组的转换
    { arrayFormat: 'brackets' })
  }]
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

发起请求的方法：

export function remoteApi(data) {
  return request({
    url: '/api',
    method: 'post',
    data
  })
}

取消请求 cancelToken

其官方文档：取消:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

修改后的请求方法

export function remoteApi(data, cancelToken) {
  return request({
    url: '/api',
    method: 'post',
    cancelToken,
    data
  })
}

实际请求时，创建cacelToken：

// 组件方法内
this.cancelToken = CancelToken.source()
remoreApi(data, this.cancelToken).then(....).catch(....).finally(....)

需要取消请求时，执行：

// 组件方法内
this.cancelToken.cancel('取消下载')

避免重复请求

避免一个接口的重复请求，以免延时长的接口返回数据覆盖另一个接口的返回数据，造成数据显示错误。思路也相对简单，使用一个全局Map存储请求标识与对应的cancelToken。请求，在发起请求前，按照请求标识，唤起对应cancelToken的cancel方法，然后再发出新请求，即可满足条件。

总结

关于axios怎么取消请求和避免重复请求就介绍到这，上述实例具有一定的借鉴价值，感兴趣的朋友可以参考学习，希望能对大家有帮助，想要了解更多大家可以关注群英网络其它相关文章。

文本转载自脚本之家

标签： axios怎么取消请求

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：vue框架怎样实现选择题的答题功能？下一篇：使用JS怎样做窗口滚动的效果？