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

Angular 学起来真是太难了, 国内资料少, 用 G 搜呢,总感觉表达不准确,搜不到好的结果

  •  
  •   loveuer · 2021-09-09 22:31:45 +08:00 · 5612 次点击
    这是一个创建于 1170 天前的主题,其中的信息可能已经有所发展或是发生改变。

    请教一下大佬们, 我现在有一个情况是这样的,后端我统一 返回格式是:

    {
      "status": 200,
      "msg: "xxx success",
      "data": any
    }
    

    我想通过 拦截器 或者在 service 里面将 status 判断好了, 给 component 的数据就 仅是上面的 data, 出错就给个 默认值 这样的效果,但我实在不知道怎么实现了, 还请大家指点一二。

    34 条回复    2021-09-21 12:07:02 +08:00
    EPr2hh6LADQWqRVH
        1
    EPr2hh6LADQWqRVH  
       2021-09-09 22:36:47 +08:00
    你这功能和框架没一毛钱关系啊,把框架都忘了,自己再想想。
    NCry
        2
    NCry  
       2021-09-09 22:40:24 +08:00
    拦截器那边统一判断 status 的值,然后把返回结果过滤一下不就行了,这确实和 angular 无关
    loveuer
        4
    loveuer  
    OP
       2021-09-09 22:44:09 +08:00 via Android
    @avastms emmmm,直接用 subscribe 读出来,是可以,但是后续怎么搞呢,自己用 promise 包它么?我主要还是后端,平时没那么深入前端,所以说学下全套解决方案 angular,见笑了见笑了😢😢😢
    wunonglin
        5
    wunonglin  
       2021-09-09 22:44:49 +08:00   ❤️ 2
    https://angular.io/guide/http#intercepting-requests-and-responses

    这个章节不是教你怎么使用拦截器了么。。。
    Kimen
        6
    Kimen  
       2021-09-09 22:50:57 +08:00
    像 axios 就有拦截器啊,这跟是不是 Angular 没关系吧
    loveuer
        7
    loveuer  
    OP
       2021-09-09 22:55:56 +08:00 via Android
    @wunonglin 额,谢谢大佬回复,这个文档我看了,或许因为我不够仔细没看到,return next ( req )是一个 rxjs 的 obv,这里面怎么操作数据啊。请不要笑我菜😰😰😰
    wunonglin
        8
    wunonglin  
       2021-09-09 23:04:25 +08:00
    @loveuer #7 建议不要在拦截器做返回数据操作。在 service 做就好,具体原因你深入就知道了。一会我写个 demo 你就知道了
    loveuer
        9
    loveuer  
    OP
       2021-09-09 23:06:44 +08:00 via Android
    @wunonglin 非常感谢大佬😁
    wunonglin
        10
    wunonglin  
       2021-09-09 23:15:09 +08:00
    @loveuer #9

    https://stackblitz.com/edit/angular-ivy-6xpbns?file=src%2Fapp%2Fapp.component.html

    对于外部进来的数据,都在 service 层处理好,component 负责调用 service 的方法。

    发送数据也是如此
    wunonglin
        11
    wunonglin  
       2021-09-09 23:16:13 +08:00
    @loveuer #9 当然你也可以继承 HttpClient,二开它,就看你需不需要了
    kev1nzh
        12
    kev1nzh  
       2021-09-09 23:37:59 +08:00
    我这边是 service 层单独处理的,网上的 ng 相关资料其实挺多的。。
    elone
        13
    elone  
       2021-09-10 00:45:21 +08:00
    ng 只需要看官方和 stackoverflow 就可以了。资料还是很多的。
    find456789
        14
    find456789  
       2021-09-10 00:48:55 +08:00
    来学 vue 、react 吧
    littleshy
        15
    littleshy  
       2021-09-10 08:53:23 +08:00   ❤️ 1
    说 Angular 也有关系,楼主应该是要说 Angular 的 Http 拦截器。
    在 interceptor 里克隆一个 response,替换掉 body 就行了啊。
    skiy
        16
    skiy  
       2021-09-10 09:02:10 +08:00
    中文教程直接上 https://angular.cn 啊,也是官方的。说得清清楚楚。唉,我也快忘记了。
    cslive
        17
    cslive  
       2021-09-10 09:05:59 +08:00
    forbreak
        18
    forbreak  
       2021-09-10 09:15:37 +08:00
    看看这个 https://angular.cn/guide/http#intercepting-requests-and-responses angular 中文文档做的很好了,遵循最佳实践,基本遇到的问题官网上都有写。 还要啥资料,没事多看看官方文档。
    meshell
        19
    meshell  
       2021-09-10 09:36:04 +08:00
    要不看下我刚不久写得: https://loocode.com/post/10198 哈哈
    nzbin
        20
    nzbin  
       2021-09-10 09:38:18 +08:00
    plk403
        21
    plk403  
       2021-09-10 09:45:26 +08:00
    一般 axios 封装里好像都有 你可以看下..
    zhuangzhuang1988
        22
    zhuangzhuang1988  
       2021-09-10 09:46:55 +08:00
    最好不要用拦截器 太坑了.
    NoDocCat
        23
    NoDocCat  
       2021-09-10 11:27:02 +08:00
    你要看的是 rxjs, 而不是 Angular. 实际上就是加个 map 操作符的事
    rrfeng
        24
    rrfeng  
       2021-09-10 11:30:03 +08:00 via Android
    本质上是英语不好。
    Angular 的中文文档太少了。
    另外要学 ts + rxjs 可能新手没意识到这俩知识点。

    rxjs 是真好用。
    xiaopang132
        25
    xiaopang132  
       2021-09-10 13:48:26 +08:00 via iPhone
    如果是学习过程,建议直接找官方文档,然后翻译,遇到不太懂的就看英文原文。
    jguo
        26
    jguo  
       2021-09-10 14:11:06 +08:00
    angular 是最好学的,官方文档什么都讲了
    xingguang
        27
    xingguang  
       2021-09-10 17:47:00 +08:00
    建议不要这样玩,我曾经深受其害,大致业务简化下就是想通过后端返回一个特殊的 code 码,然后返回做不同操作之类的东西,可惜我们的请求曾给拦截了,我们拿不到,恶心了我好久,最后在请求曾做了这个特殊判断,十分不优雅
    xingguang
        28
    xingguang  
       2021-09-10 17:48:08 +08:00
    @xingguang #27,我建议调用的时候把 code 和 data 都返回。
    wszgrcy
        29
    wszgrcy  
       2021-09-10 18:00:20 +08:00
    有问题可以圈我,不过只会讲技术级别(至于你要实现的功能是否蛋疼不管的....)
    zarvin
        30
    zarvin  
       2021-09-10 18:06:47 +08:00
    用 vue
    nzbin
        31
    nzbin  
       2021-09-10 18:52:54 +08:00
    @xingguang 可以用白名单处理,也可以用更高级的抽象,一般来说拦截的数据够用了
    shilianmlxg
        32
    shilianmlxg  
       2021-09-10 23:31:27 +08:00
    @rrfeng 请问大佬 求 rxjs 上手教程。比如想在 react 里用 rxjs 之类的 /。
    gaigechunfeng
        33
    gaigechunfeng  
       2021-09-11 17:03:22 +08:00
    那为什么要学呢?
    lolizeppelin
        34
    lolizeppelin  
       2021-09-21 12:07:02 +08:00
    我真心觉得,水平不行的人用 angluar 才是最好的选择,就是入门麻烦一点点.

    对比之前写的 react 代码,发现我自己这种水平完全把控不住代码写着写着就瞎几把写了
    反观 angluar..真是清清楚楚.就是啰啰嗦嗦不漂亮
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2698 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:35 · PVG 20:35 · LAX 04:35 · JFK 07:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.