vue-爬坑之路二（路由切换时取消之前的正在进行的请求）

原创于 2019-01-15 15:46:48 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

45 篇文章

订阅专栏

23 篇文章

订阅专栏

本文介绍如何在Vue应用中使用vue-resource处理HTTP请求，并在路由切换时取消未完成的请求，避免内存泄漏和不必要的数据加载。通过全局定义Vue.Cancel数组存储请求对象，在beforeEach钩子中遍历并调用请求对象的abort方法。

main.js

Vue.Cancel = [] //全局定义一个对象

router.beforeEach((to, from, next) => {

while (Vue.Cancel.length > 0) { // 存储的对象进行abort()

Vue.Cancel.shift().abort()

}

}

请求的地方加上

 oneRequest = context.$http.post(url, newParams, //这里用的是vue-resource
            { // 发送请求前把request存放在Vue.Cancel对象中，为后面路由切换的时候中断使用
              // use before callback
              before (request) {
                Vue.Cancel.push(request)
              }
            }
          )