资讯专栏INFORMATION COLUMN

fetch模拟abort请求,忽略不需要的请求,增加用户体验

StonePanda / 2230人阅读

摘要:有一种场景,在框改变的时候,不管用户怎么连续操作,我只关心用户最后一次的结果,并不是有方法,这里模拟了一种,忽略不需要的请求正在请求。。。请求请求完成正在请求。。。

有一种场景,在select框改变的时候,不管用户怎么连续操作,我只关心用户最后一次的结果,fetch并不是ajax有abort方法,这里模拟了一种,忽略不需要的请求

{{cont}}
new Vue({
    el: "#app",
    data: {
      nextSeqid: 0,
      baseUrl: "http://www.liuweibo.cn:7654",
      titleId:[192,191,190],
      cont: "正在请求。。。"
    },
    created() {
    },
    methods: {
      _getTitle(e) {
        const seqid = ++this.nextSeqid;
        console.log(seqid, this.nextSeqid, "请求")
        let url = `${this.baseUrl}/api/detail?id=${e.target.value}`;
        axios.get(url).then(res => {
          let {title} = res.data[0];

          console.log(seqid, this.nextSeqid, "请求完成")
          if (seqid === this.nextSeqid) {
            this.cont = title;
          }else {
            this.cont="正在请求。。。"
          }
        })
      },
    }
  })

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96091.html

相关文章

  • 页面跳转时,点击上报丢失问题解析

    摘要:背景最近在工作中,遇到了页面跳转时点击上报丢失的问题,突出表现在微信的上,上报后直接跳转的失败率达到了惊人的。对这三种失效的方案有兴趣的可以看页面跳转时,统计数据丢失问题探讨把要跳转的放到中,然后在下一个页面上上报点击。 背景 最近在工作中,遇到了页面跳转时点击上报丢失的问题,突出表现在微信ios的webview上,上报后直接跳转的失败率达到了惊人的93%。喝口水压压惊,开始逐步分析问...

    Bmob 评论0 收藏0
  • 页面跳转时,点击上报丢失问题解析

    摘要:背景最近在工作中,遇到了页面跳转时点击上报丢失的问题,突出表现在微信的上,上报后直接跳转的失败率达到了惊人的。对这三种失效的方案有兴趣的可以看页面跳转时,统计数据丢失问题探讨把要跳转的放到中,然后在下一个页面上上报点击。 背景 最近在工作中,遇到了页面跳转时点击上报丢失的问题,突出表现在微信ios的webview上,上报后直接跳转的失败率达到了惊人的93%。喝口水压压惊,开始逐步分析问...

    gclove 评论0 收藏0
  • fetch使用常见问题及其解决办法

    首先声明一下,本文不是要讲解fetch的具体用法,不清楚的可以参考MDN fetch教程。 引言 说道fetch就不得不提XMLHttpRequest了,XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调,尽管开发者只关心请求成功后的业务处理,但是也要配置其他繁琐内容,导致配置和调用比较混乱,也不符合关注分离的原则;fetch的出现正是为了解决XHR存在的这些问题。例如下面代码: f...

    pubdreamcc 评论0 收藏0
  • fetch使用常见问题及其解决办法

    摘要:首先声明一下,本文不是要讲解的具体用法,不清楚的可以参考教程。该模式用于跨域请求但是服务器不带响应头,也就是服务端不支持这也是的特殊跨域请求方式其对应的为。 首先声明一下,本文不是要讲解fetch的具体用法,不清楚的可以参考 MDN fetch教程。 fetch默认不携带cookie 配置其 credentials 项,其有3个值: omit: 默认值,忽略cookie的发送 sam...

    pkwenda 评论0 收藏0
  • 99%程序都没有考虑网络异常

    摘要:本文由云社区发表绝大多数程序只考虑了接口正常工作的场景,而用户在使用我们的产品时遇到的各类异常,全都丢在看似的中。在面板,还可以对请求进行暂停延迟等网络异常的模拟。小程序实现最后,留一道思考题。 本文由云+社区发表 绝大多数程序只考虑了接口正常工作的场景,而用户在使用我们的产品时遇到的各类异常,全都丢在看似 ok 的 try catch 中。如果没有做好异常的兼容和兜底处理,会极大的影...

    HollisChuang 评论0 收藏0

发表评论

0条评论

StonePanda

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<