• 张益铭遇到的ng中用$http接后台接口的异步坑


      (SEO排名尝试)

      最近笔者在一个项目中用ng去接后台的接口。因为前后端都是新手,前端的不懂后台,且没有经验;后端的不懂前端,也没有经验,然后接口bug百出,文档写得乱。一个接口,后台改了三次,我也是寸步难行。

      首先来看看接口文档,开始这次的异步坑话题:

     ① 

      可以看到图③是页面中要提供后端数据的四个下拉框,图②是提供给图③中学校下拉框的数据(当然接口文档数据只是提供参考的,真正数据在sql中,所以显示在视图中的数据和接口文档中的数据不大一样),图①是提供用户的默认数据的接口。

      看完这些,在这方面稍有经验的前端都会知道接口文档中的school/campus/grade/department这四个数据应该是以json格式提供,即{id:"name"}的格式,这样才是正确的,为什么呢?我是掉进了这个大坑之后才醒目过来的:

      ng中使下拉框提供默认数据是要ng-model中的值等于x.id,如图(至于基础性的问题比如ng-options为什么这样写,不懂的朋友就去翻翻《angularjs权威指南》啦,一本好书来的):

      

      按照后端给的接口,没有经验的我傻乎乎地做了一次转换:

      controller.js:

      

      service.js:

      

      原本笔者以为只要用一个函数,将图①的中文(等价于图②中的name)转换为图②中的id即可。是的,这样是可以,但是会出现每次刷新的时候在图③的下拉框位置显示的默认值时有时无,为什么呢? 那是因为我忽略了ng中$http请求时异步的,我们来看官网API:

      

      当我的页面中有多个$http请求的时候,每次刷新,因为请求时异步的,所以没法控制哪个请求先,哪个请求后,这样的话,就造成了service.js图中分别提供nameList和changeObj数据的接口有可能有一个已经得到相应数据了,并且执行changeAsId函数了,但是另一个接口的数据还没响应回来,所以会出现无法提供ng-model的值的情况;

      当然啦,如果项目中用到了ng,是新手的前端和后端在做交互的时候都应该注意到这个问题,因为笔者饱受此痛苦。

      这几天遇到太多bug,因为是都是新手,知识面都还不全。 不过,希望这次的分享能够帮助到你们,祝学习愉快!

     


  • 相关阅读:
    Win10 VirtualBox 安装 OpenWrt/LEDE
    在华为云、腾讯云服务器中部署 Hadoop 集群
    记一次部署Hadoop后遭受kthreaddi挖矿病毒
    四种基本编程命名法
    词云图制作
    在Ubuntu18.04lts下安装NS2(含nam)
    二叉树的建立与遍历
    国内pip镜像
    java高斯消元模板
    图的3种储存方式
  • 原文地址:https://www.cnblogs.com/Garven/p/5881370.html
Copyright © 2020-2023  润新知