V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qingshui33
V2EX  ›  前端开发

前端请求封装之请求串行和并行

  •  
  •   qingshui33 · 2023-10-23 10:53:41 +08:00 · 1412 次点击
    这是一个创建于 432 天前的主题,其中的信息可能已经有所发展或是发生改变。

    突然遇到了个问题,怎么保证前端接口的请求顺序呢,之前好像没怎么关注过这个事情

    要实现的功能:在封装请求类库的时候,可以手动指定某些接口是串行的,如果没有指定,就默认的就行了

    一个项目中,如果某些特殊的接口需要串行,就是有的接口会依赖其他接口的返回值,比如获取 token 接口和其他接口请求的时候需要添加 token 信息

    正常来说,如果遇到上面这种请求,那直接在获取 token 的接口的回调中调用对应的接口就可以了,但是,如果这些接口不是在同一个页面呢

    上面这种情况就困住我了,目前想不到什么方法能实现这种情况的封装,求各位大哥指点下

    14 条回复    2023-12-08 09:32:20 +08:00
    nitmali
        1
    nitmali  
       2023-10-23 10:55:58 +08:00
    rxjs 可能可以解决你的需求。
    paic
        2
    paic  
       2023-10-23 11:08:36 +08:00
    promise 封装接口,然后 async await 。试着做一套登录校验逻辑,结合路由跳转更有意思。你就掌握了。
    qingshui33
        3
    qingshui33  
    OP
       2023-10-23 11:08:48 +08:00
    @nitmali 好的,感谢感谢,我去看看啊
    qingshui33
        4
    qingshui33  
    OP
       2023-10-23 11:18:38 +08:00
    @paic 登录的那个我只是举了个例子,我更希望的是有个参数可以来控制是否是串行 😂
    Pastsong
        5
    Pastsong  
       2023-10-23 11:18:47 +08:00
    await fetch('a')
    await fetch('b')
    await fetch('c')



    await Promise.all([fetch('a'), fetch('b'), fetch('c')])

    的区别呗
    paic
        6
    paic  
       2023-10-23 11:30:03 +08:00
    @nitmali 学到了
    lisxour
        7
    lisxour  
       2023-10-23 11:36:06 +08:00
    @qingshui33 #4 你可以用别的库或者自己封装来完成你想要的,Promise/A+并没有你想象中的一个参数控制串行并行。
    cxe2v
        8
    cxe2v  
       2023-10-23 12:42:17 +08:00
    写一个任务队列函数,把请求丢给任务队列来执行就是串行了
    LOG1SK
        9
    LOG1SK  
       2023-10-23 12:57:21 +08:00 via Android
    写个任务调度器就好了
    qingshui33
        10
    qingshui33  
    OP
       2023-10-23 13:17:41 +08:00
    @Pastsong
    @lisxour
    @cxe2v
    @LOG1SK 好的,感谢大哥们的指点,我研究研究哈
    liuhuihao
        11
    liuhuihao  
       2023-10-23 13:54:09 +08:00
    Promise.all 就是并行的 await 就是串行的。
    至于你说的 token 的例子,vue 里来的话,获取 token 的接口会放到 router 的导航守卫 beforeEach 中,确保进入任何一个页面的时候都先获取 token 然后再跳转,进入页面后的接口自然就都带有 token 了。你说的 不同页面 中的 串行方法 也是借助 导航守卫在跳转页面前完成前置接口即可
    qingshui33
        12
    qingshui33  
    OP
       2023-10-23 14:35:46 +08:00
    @liuhuihao token 只是举了一个例子,不过你说的这个方法确实不错👍,感谢感谢
    zhx643
        13
    zhx643  
       2023-11-29 10:53:31 +08:00
    alova.js
    ahaKai
        14
    ahaKai  
       2023-12-08 09:32:20 +08:00
    自己封装一个任务队列进行控制
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2691 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:35 · PVG 20:35 · LAX 04:35 · JFK 07:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.