can.yang

morningstar

  • 主页
  • 归档
所有文章 关于我

can.yang

morningstar

  • 主页
  • 归档

JSONP问题分析

2017-05-18

用户收藏不了商品

①正确的商品尺码如下:

②异常的商品尺码如下(第二个商品取到了第一个商品的尺码信息):

问题分析:

正确的情况是:
①当鼠标放到商品区域时,才会去请求对应商品的尺码信息。
②已经请求过的商品尺码,成功获取到数据后不会再请求。

而现在这种情况是:

①用鼠标划过两个商品时,在极短时间内(可以认为是同时)发起了两个请求,此时可以看到控制台报错:

②而第一个商品(mid = 129820643) 在第二次 hover 操作时又会再发送一次请求(意味着加载尺码失败了)。

③第二个商品(mid = 129820647)拿到了第一个商品的尺码信息,可是请求确认是无误的,同时接口返回数据也是正确的。

jquery 中一个 jsonp 请求的流程,大致如下:

可是如果同时发起两个相同 callback 名的请求:

猜想异步请求类似于生产消费者模式、事件订阅模式:
(1)事件订阅模式:callback 是同名的话,那么就是订阅的事件名相同,所以抛出事件的时候就不知道给谁了。像示例里描述的场景,其实应该是从事件名中区分出来,这样就不会出现返回数据的时候不知道给谁处理了。
(2)生产消费者模式:当前生产者处理数据太快(同时发送太多相同请求),消费者来不及处理(执行回调)导致的异常,那也就意味着只要消费者消费结束生产者再生产就不会有问题了。

保留思考:

上面提到了第一次请求的接口响应比第二次请求响应快的时候就会出现异常,可是如果第二次响应更快地返回时,又可以正确展示,为什么?(有兴趣的同学可以看下 jquery 源码中 jQuery.ajaxPrefilter 部分相关的代码)

优化建议:

(1)要注意当前的业务场景,高并发的请求(数据变化快,期望获取实时的数据)是不应该固定回调名,根据
当前的业务场景可以用在 callback 里引入 mid 就可以又区分事件名又走 cdn 了(getGoodsSize_[mid])。
(2)并不是报 XX is not a function 就是上面的场景,所有涉及到执行回调会被置为空的场景都会出现这种情况,例如超时。

  • 问题分析
循环
Chrome插件
  1. 1. 用户收藏不了商品
  2. 2. 问题分析:
  3. 3. 而现在这种情况是:
  4. 4. jquery 中一个 jsonp 请求的流程,大致如下:
  5. 5. 可是如果同时发起两个相同 callback 名的请求:
    1. 5.1. 保留思考:
  6. 6. 优化建议:
© 2020 can.yang
Hexo Theme Yilia by Litten
  • 所有文章
  • 关于我

tag:

  • 工具
  • javascript
  • 基础
  • vue
  • 问题分析
  • 计算机网络
  • seo
  • others
  • 算法
  • 性能优化
  • 安全
  • 数据结构

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

Hi

好好学习
天天向上