• 技术文章 >web前端 >Vue.js

    一文讲解Vue中路由切换终止异步请求(附代码)

    奋力向前奋力向前2021-08-25 10:16:19转载161

    之前的文章《深入解析js中实现队列(代码分享)》中,给大家了解了js中实现队列。下面本篇文章给大家了解Vue中路由切换终止异步请求,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。

    问题:

    SPA模式开发当中,比如VUE,当前路由切换的时候如何终止正在发生的异步请求呢。

    结果:

    假如请求超时并且有设定超时时间。有一堆的异步请求在执行,当用户切换到另一个页面,这些请求还未终止,并且当服务器响应之后,反馈的结果不是当前页面所期待的。最终会误导用户造成一些不必要的结果。也给web造成性能问题。

    解决方案:

    把执行的请求存入队列,当路由切换的时候终止队列里的异步请求。

    首先搞一棵树来存储请求队列

    import Vue from "vue";
    import Vuex from "vuex";
    Vue.use(Vuex);
    let store = new Vuex.Store({
      state: {
        requests: [],
      },
    });
    
    new Vue({
      el: "#app",
      router: router,
      render: (h) => h(App),
      store,
    });

    利用ajax请求和终止

    var xhr = $.ajax({
      type: "POST",
      url: "xxxsx",
      data: "",
      success: function () {
        alert("ok");
      },
    });
    //xhr.abort()  终止请求
    this.$store.state.requests.push(xhr);

    利用superagent请求和终止

    const request = require('superagent')
    var xhr = request('post','/api/xxxx/xxxx')
    xhr.send(data)
    //xhr.query(data) //get 传参
    xhr.end((err,res)=>{
        ...todo...
    })
    //xhr.abort() 终止请求
    this.$store.state.requests.push(xhr)

    利用axios请求

    import axios from "axios";
    var CancelToken = axios.CancelToken;
    var source = CancelToken.source();
    axios
      .get("/api/xxxxx/xxxxx", {
        cancelToken: source.token,
      })
      .catch(function (thrown) {
        if (axios.isCancel(thrown)) {
          console.log("Request canceled", thrown.message);
        } else {
          // 处理错误
        }
      });
    
    // 取消请求(message 参数是可选的)
    //source.cancel('Operation canceled by the user.');
    
    this.$store.state.requests.push(source);

    利用vue-resource请求

    import Vue from "vue";
    import req from "vue-resource";
    Vue.use(req);
    
    this.$http
      .get("/someUrl", {
        before(request) {
          this.$store.state.requests.push(request);
          //request.abort(); 终止请求
        },
      })
      .then(
        (response) => {
          // success callback
        },
        (response) => {
          // error callback
        }
      );

    利用fetch请求

    fetch貌似无法监控读取进度和终端请求,他没有 timeout 机制,没有 progress 提示,但是可以利用 Promise 来实现终止

    var _fetch = (function (fetch) {
      return function (url, options) {
        var abort = null;
        var abort_promise = new Promise((resolve, reject) => {
          abort = () => {
            reject("abort.");
            console.info("abort done.");
          };
        });
        var promise = Promise.race([fetch(url, options), abort_promise]);
        promise.abort = abort;
        return promise;
      };
    })(fetch);
    
    var xhr = _fetch("/api/xxx/xxxx", { methods: "POST", body: data });
    xhr.then(
      function (res) {
        console.log("response:", res);
      },
      function (e) {
        console.log("error:", e);
      }
    );
    xhr.abort(); //终止
    
    this.$store.state.requests.push(xhr);

    那么知道如何终止请求,然后也存储了请求实例,剩下的只要监听路由就行了

    let router = new Router({....})
    //每次路由改变之前终止所有的请求实例
    router.beforeEach(function (to, from, next) {
        this.$store.state.requests.forEach(xhr=>xhr.abort()) //终止所有的请求实例
        this.$store.state.requests =[] //执行完清空,等待下一次的页面的请求装载
        next()
    })

    这种只是假设,自然请求完成之后最好,还是手动释放树的请求示例。例如ajax请求完成之后在complite里面splice store里面的实例。

    [完]

    推荐学习:vue.js教程

    以上就是一文讲解Vue中路由切换终止异步请求(附代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:禅境花园,如有侵犯,请联系admin@php.cn删除
    专题推荐:vue javascript
    上一篇:MAC环境下安装node、vue等环境配置 下一篇:Uniapp自定义vue导航菜单组件完成菜单动态高亮
    线上培训班

    相关文章推荐

    • vue怎么引用css• 分享五个好用的VueUse函数,一起用起来吧!• 分享golang和vue3开发的一个im应用• 教你怎么使用Vue实现动画效果(附代码)• 深入解析vue中路由切换白屏的问题(附代码)• 浅析Vue中入口缓存的问题(代码分享)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网