最近笔者在一个项目中用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,因为是都是新手,知识面都还不全。 不过,希望这次的分享能够帮助到你们,祝学习愉快!

ng中用$http接后台接口的异步坑的更多相关文章

  1. thinkjs学习-this.assign传递数据和ajax调用后台接口

    在页面加载时,就需要显示在页面上的数据,可以在后台使用this.assign赋值,在前台通过ejs等模板获取:用户点击按钮,或者触发某些事件和后台进行交互时,就需要用到ajax调用后台接口.本文通过一 ...

  2. Swagger结合mustache模板生成后台接口代码、以及前后台建模代码

    之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...

  3. 前后端通信中使用Ajax与后台接口api交互(以登录功能为例)

    一.查阅开发文档 首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回的数据. 这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Aj ...

  4. node作为中间层 —> 跨域请求java后台接口(使用http-proxy-middleware中间件)

    情景:利用node的express 作为中间层,跨域调取java后台接口,由于java接口对session有判断,因此每次请求都必须在req的headers中需要带上cookie,否则接口报500错误 ...

  5. fetch 代替 XMLHttpRequest (json-server 模拟后台接口)

    一.fetch 是 XMLHttpRequest 的替代方案.说白了就是除了 ajax 获取后台数据之外也可以用fetch 来获取. 二.fetch 的支持性还不是很好.挂载于BOM中可以通过浏览器直 ...

  6. Utils--前台调用后台接口工具类

    Utils--前台调用后台接口工具类 package com.taotao.manage.httpclient; import java.io.IOException; import java.net ...

  7. 微信小程序 带参调用后台接口 循环渲染页面 wx.request wx:for

    test.js 文件里的onLoad function getarticles(p,order,mythis) { wx.request({ url: 'https://ganggouo.cn/ind ...

  8. 原创:微信小程序调用PHP后台接口,解析纯html文本

    ---效果图片预览---    1.微信js动态传参:wx.request({        url: 'https://m.****.com/index.php/Home/Xiaoxxf/activ ...

  9. app与php后台接口登录认证、验证(seesion和token)

    简要:随着电商的不断发展,APP也层次不穷,随着科技的发展主要登录形式(微信.QQ.账号/密码):为此向大家分享一下"app与php后台接口登录认证.验证"想法和做法:希望能够帮助 ...

随机推荐

  1. 读《HTML5与CSS3权威指南(上册)》笔记

    第二章 1.内容类型:“text/html”.DOCTYPE声明:<!DOCTYPE html>.指定字符编码:<meta charset="utf-8"> ...

  2. Tkinter教程之Entry篇

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811302 #Tkinter教程之Entry篇#Entry用来输入单行文本'''1.第一个En ...

  3. 直接调用系统Camera

    关键思路: 初始化 组件: 创建并启动拍照intent: 使用回调函数onActivityResult()处理图像. 关键代码: 初始化 组件: takePicBtn = (Button) findV ...

  4. openstack domain serverID connect uri

  5. Struts2在Action中访问WEB资源

    什么是WEB资源? 这里所说的WEB资源是指:HttpServletRequest, HttpSession, ServletContext 等原生的 Servlet API. 为什么需要访问WEB资 ...

  6. MYSQL数据库性能调优之一:调优技术基础

    1.mysql数据库优化技术有哪些? 2.数据库三层结构? 3.数据库3NF

  7. Com进程通信(Delphi2007)

    相关资料: 1.http://my.oschina.net/u/582827/blog/2847662.http://www.cnblogs.com/findumars/p/5277561.html3 ...

  8. HDU 5828 Rikka with Sequence (线段树)

    Rikka with Sequence 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5828 Description As we know, Rik ...

  9. HDU 1702 队列与栈的简单运用http://acm.hdu.edu.cn/showproblem.php?pid=1702

    #include<stdio.h> #include<string.h> #include<queue> #include<stack> #define ...

  10. Elasticsearch和mysql数据同步(logstash)

    1.版本介绍 Elasticsearch: https://www.elastic.co/products/elasticsearch 版本:2.4.0   Logstash: https://www ...