Angular .then()不工作(发送get请求后未刷新视图) - 腾讯云开发者社区

文章/答案/技术大牛

发布

现代web开发方法

让我们看看传统的Web应用程序是如何工作的。通常，一个完整的堆栈服务器端应用程序在服务器本身上生成Web应用程序的所有数据。只有这样才能在页面呈现之前将其发送给客户端 ?...单页应用程序概述（SPA）内容从数据库中获取，然后通过控制器传递，最后在视图模板发送前与视图模板合并这体现在每次浏览应用程序或网站时重新加载的页面的形式。...单个页面应用程序向服务器发送一个HTML文件框架的请求，以及样式和脚本与此同时，以Ajax请求的形式向服务器发出后续请求。...Ajax请求 - 将请求发送到服务器以便在不重新加载页面的情况下获取数据。...请求的数据,达到在不刷新整个页面的情况下,在用户执行某些DOM事件(比如点击,滚动)等时,页面的局部刷新呈递新数据的展现,至于更深的体会,还是要多撸代码,概念的东西说多了都是故事,虚无缥缈的,代码就是对概念理论最好的解释

3.2K1 0

【AngularJS】—— 13 服务Service

$http的使用　　AngularJS为我们提供了很多种服务，$http用于发送http请求，动态的请求数据。　　...采用如下的格式： $http({ 　　method:'GET',//http请求的类型　　url:'data.json'//请求的地址 }).success(function(data,status,...name":"test1" },{ "name":"test2" },{ "name":"test3" }] 　　利用web容器，本文使用的是基于nodejs的http-server，启动后在网页中输入相应的...这样可以有效的防止，不停的刷新请求，造成网页的刷新抖动。　　在函数内部，调用了我们自己的服务提供的userList方法。当请求成功时，绑定返回值到users中。users会动态的刷新内容。　　...通过测试发现：当我们快速的输入4321时，虽然$watch都监控到了变量的变化，但是只有停止时间超过350ms才会发送请求。　　全部的代码样例： <!

1.9K5 0

您找到你想要的搜索结果了吗？

是的

没有找到

AngularJS入门 & 分页 & CRUD示例

var app = angular.module("dintalk",[]); //$scope 是控制层和视图层交换数据的桥梁...list"> {{x.name}} {{x.age}} 2.8 $http : (发送...ajax请求) $http.get(url).success(function(data){}) $http.post(url,params).success(function(data){}) 三.AngularJS...$http.get('.....$http.get('..

4.6K4 0

【Hybrid开发高级系列】AngularJS(二)——常用$服务

cache: 布尔类型或者缓存对象，设置之后angular会缓存get请求。 timeout: 数值，延迟请求 responseType：字符串，响应类型。...拦截器允许你: 通过实现 request 方法拦截请求: 该方法会在 http 发送请求道后台之前执行，因此你可以修改配置或做其他的操作。...通过实现 requestError 方法拦截请求异常: 有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。...切换视图的原理：Angular发起下图的请求： XHR：SmlHttpRequest，本质是Ajax。...angule js中ng-view中使用了ng-include，如何实现ng-include的这个页面刷新，外部的ng-view不刷新 http://www.oschina.net/question/2356458

2.5K4 0

AngularDart4.0 英雄之旅-教程-08HTTP 顶

/angular.dart'; import 'package:http/http.dart'; import 'hero.dart'; 刷新浏览器。...更新HeroService.getHero（）方法以创建一个get-by-id请求：lib/src/hero_service.dart (getHero) Future getHero(int...更新英雄的细节尝试在英雄详情视图中编辑英雄的名字。当你输入时，英雄的名字在视图标题中被更新。但是，如果您单击后退按钮，更改将丢失。更新之前没有丢失。什么改变了？...当用户在搜索框中输入一个名字时，你会对这个名字过滤的英雄进行重复的HTTP请求。首先创建HeroSearchService，将搜索查询发送到服务器的Web API。...你永远不会比300ms更频繁地发出请求。 distinct（）确保仅当过滤器文本发生更改时才发送请求。

12.9K3 0

2020vue面试题及答案_人际关系面试题及答案

会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转主要用在单页面应用(SPA) history 模式工作原理: 主要利用 history.pushState() API 来改变URL, 而不刷新页面...其实一共有五种模式可以实现改变URL, 而不刷新页面....⽽⼦组件修改好数据后，想把数据传递给⽗组件。可以采⽤emit⽅法。...url地址显⽰：query更加类似于我们ajax中get传参，params则类似于post，说的再简单⼀点，前者在浏览器地址栏中显⽰参数，后者则不显⽰注意点：query刷新不会丢失query...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

10K2 0

Angular（06）- 为什么数据变化，绑定的视图就会自动更新了？

这里提一点，前端三大框架（Angular，React，Vue）的数据驱动来更新视图的原理，即 MVVM 的实现。为什么数据发生变化，绑定的视图就会刷新了呢？...，只需要关心数据的变化工作即可。...总结一下：三大框架实现的原理其实有所差异 react 是通过调用 setState() 方式来告知视图刷新； vue 是通过将声明在 data 中的数据属性转换为存取器数据（set 和 get）...的方式，来监听数据变化的时机； angular 则是在会触发视图变化的情况下，主动去检测绑定的数据源，比对下是否有发生变化来判断是否需要刷新视图。...对于三大框架来说，他们的视图刷新并非是这么简单的实现。

2.3K1 0

【Hybrid开发高级系列】AngularJS(三)——开发实践

前面说的那些繁重的工作都会被交给Yeoman来完成。让我们来试试用Yeoman来创建一个AngularJS项目吧！...当选中了’generator-angular’后，按下回车执行安装，它所依赖的Node包就会开始被下载了。 ...Yeoman将会自动构建你的应用、拉取需要的依赖并在你的工作流中创建一些有帮助的Grunt任务(GruntTasks)。几分钟后，我们就能正式开始啦！...angule js中ng-view中使用了ng-include，如何实现ng-include的这个页面刷新，外部的ng-view不刷新 http://www.oschina.net/question/2356458...p=1 深入理解ng里的scope http://get.ftqq.com/462.get angularJs前端的页面分解与组装 http://hudeyong926.iteye.com/blog/2111664

1.5K2 0

Angular: 最佳实践

组件 Component 组件是 Angular 的核心特性，如果你设法让它们被组织得井井有条，你可以认为你工作已经完成了一半。考虑拥有一个或者几个基本组件类。...我们知道一个路由对应一个 Angular 组件，但是我推荐你使用容器组件，它将处理数据（如果有数据需要传递的话）并将数据传递给另外一个组件，该组件将使用输入所包含的真实视图和 UI 逻辑。...模版 Templates Angular 是使用 html 模版（当然，还有组件、指令和管道）去渲染你应用程序中的视图，所以编写模版是不可避免的事情，并且要保持模版的整洁和易于理解是很重要的。...，而无需深入查看视图。...读者可能意识到我并没有写关于 Directives 和 Pipes 的相关内容，那是因为我想写篇详细的文章，关于 Angular 中 DOM 是怎么工作的。

4.3K4 0

VUE跨页面传值的精妙

众所周知，以前开发者只要掌握HTML、CSS、JavaScript 三驾马车就能胜任一份Web前端的工作。...而在技术日新月异的现在，Vue, React，Angular在代替旧的前端框架已经是大势所趋了。一、vue简介 Vue是一套用于构建用户界面的渐进式框架。...json形式传参传参方式： 1.自己拼接为键值对 2.使用transformRequest，在请求发送前将请求数据进行转换 3.如果使用模块化开发...，可以使用qs模块进行转换 axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库 2.2 ajax传参格式 ajax是jquery...封装的一个前端方法，通过请求后台API接口方式，用以局部刷新和动态展示页面。

4.1K3 0

第217天：深入理解Angular双向数据绑定的原理

将设计转换成浏览器能理解的语言，便是html和css主要做的工作。而将数据显示在页面上，并且有一定的交互效果（比如点击等用户操作及对应的页面反应）则是js主要完成的工作。...很多时候我们不可能每次更新数据便刷新页面（get请求），而是通过向后端请求相关数据，并通过无刷新加载的方式进行更新页面（post请求）。...那么数据进行更新后，页面上相应的位置也能自动做出对应的修改，便是数据绑定。在以前的开发模式中，这一步一般通过jq操作DOM结构，从而进行更新页面。但这样带来的是大量的代码和大量的操作。...ng-bind:将angular中的变量显示到页面中。...$watch(‘totalCart’, calculateDiscount); 4、$scope（上下文模型）视图和控制器之间的桥梁用于在视图和控制器之间传递数据利用$scope暴露数据模型（数据

4.7K2 0

某知名it培训班前端三阶段vue相关面试题

**JSONP**：仅支持GET请求，通过动态创建标签请求；4.**Nginx反向代理**：生产环境通过Nginx转发请求，统一域名；5....**性能优化**：按需执行逻辑，避免无效代码（如仅在挂载后请求数据）。...--------------------------||URL表现|带#（如http://xxx/#/home）|无#（如http://xxx/home）||底层原理|基于hashchange事件，#后的内容不会发送到服务器...key=value）|嵌入路径中（/user/1）||路由配置|无需特殊配置|需在路由path中定义（如/user/:id）||刷新页面|参数不会丢失|若路由未定义参数，刷新后丢失||取值方式|this...**异步性**：支持异步操作（如请求数据、定时器）；2.**不直接修改state**：需提交mutation修改state；3.

1050 0

【Hybrid开发高级系列】AngularJS(一)——基础专题

我也一样对此表示不解，因为不写onclick已经很多年。。。.../angular.js"> 这行代码载入angular.js脚本,当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本,angular.js脚本运行后将会寻找含有...2.1.3 angular.module Angular Module声明和获取重载 http://www.cnblogs.com/whitewolf/p/angular-module-declare-and-get.html...$http向你的Web服务器发起一个HTTP请求 app/js/controllers.js function PhoneListCtrl(scope, http) { $http.get('phones...angule js中ng-view中使用了ng-include，如何实现ng-include的这个页面刷新，外部的ng-view不刷新 http://www.oschina.net/question/2356458

3.6K8 0

深究AngularJS(3)——$res

'}, 'delete': {method:'DELETE'} }; 这些方法会调用内置的$http服务~ 当异步请求成功，数据从服务器端取回后，被封装到一个$resource服务的一个对象实例中...$save(); }); 这种方式封装Ajax，不仅仅使得代码更加优雅，而且还能配合ng的视图渲染：当数据没有返回之前，模板引擎不会渲染，一旦异步数据获取完成，会自动触发模板引擎的渲染机制把数据呈现到视图中...User.get({id:'123'}, successFn, errorFn); 该方法向url发送一个get请求，并期望一个json类型的响应。...这里会向/api/users/123发送一个请求，successFn处理请求成功响应，errorFn处理错误。...save(params, payload, successFn, errorFn); save方法会发起一个post请求，params参数用来填充url中变量，对象payload会作为请求体进行发送

1.6K1 0

JSON Web Token(JWT)教程：一个基于Laravel和AngularJS的例子

它的工作原理浏览器向包含用户身份和密码的服务器发出POST请求。服务器使用在用户浏览器上设置的cookie进行响应，并包含用于标识用户的会话ID。...JSON Web Token 的工作原理浏览器或移动客户端向包含用户登录信息的认证服务器发出请求。认证服务器生成新的JWT access token并将其返回给客户端。...我们将使用我们的AngularJS SPA视图 Route::get('/', function () { return view('spa'); }); 用户注册当我们使用用户名和密码向/signup...一旦我们进入我们项目的主页，后端将提供resources/views/spa.blade.php视图用来引导Angular应用程序。...每个路线都对应于部分HTML视图。我们还定义了两个常量，其中包含我们对后端的HTTP请求的URL。请求拦截器 AngularJS的$ http服务允许我们与后端通信并发出HTTP请求。

35.6K1 0

Angular 服务

本节课的重构完成之后，HeroesComponent 变得更精简，并且聚焦于为它的视图提供支持。这也让它更容易使用模拟服务进行单元测试。...它当然不应该调用某个函数来向远端服务（比如真实的数据服务）发起 HTTP 请求。...ngOnInit() { this.getHeroes();} 查看运行效果刷新浏览器，该应用仍运行的一如既往。显示英雄列表，并且当你点击某个英雄的名字时显示出英雄详情视图。...这节课，HeroService.getHeroes() 将会返回 Observable，因为它最终会使用 Angular 的 HttpClient.get 方法来获取英雄数据，而 HttpClient.get...从 HeroService 中发送一条消息修改 getHeroes 方法，在获取到英雄数组时发送一条消息。

4.9K7 0

Angular v20 版本发布

在收集了 RFCs 的反馈并对实现进行迭代后，我们将 signal、computed、input 和视图查询 API 提升为稳定状态。...HTTP GET 请求。...让我在这里分享我们做的工作吧！...开发者现在可以更深入地了解 Angular 的内部工作原理，通过颜色编码的条目区分开发者编写的 TypeScript 代码和 Angular 编译器生成的代码。...Angular DevTools 中的增量水合为了简化增量水合和可延迟视图的调试，您现在可以直接在 Angular DevTools 中预览它们！

1.6K1 0

vue页面刷新_vue强制重置组件

. wiindow.location.reload([bForceGet]) 该方法强迫浏览器刷新当前页面 bForceGet 可选参数，默认为false,从客户端缓存里取当前 true,则以get方式...，从服务器端获取最新的页面，相当于页面f5刷新 wiindow.location.replace(URL) 该URL参数未你所要跳转的地址，如果想实现当前页面刷新，你可以这样做 wiindow.location.replace... 这里我来说明一下，我们的主体思路，我想可以通过视图的显隐来达到我们想要的刷新，所以我们就在这里声明了一个方法，先让视图消失随后又出现，这种方法有什么好处呢，你可以刷新局部页面，也可以刷新全部页面...，刷新次数无限飙升，还没有两秒，刷新次数已经达到了上万次，你试的想一下，如果你有后台，不断地刷新，向后台发送请求，就这每秒请求的频率，不把你服务器搞崩才怪，那为什么会陷入死循环呢，很简单，你刚加载页面的时候他触发一次刷新...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

2.8K1 0

什么是前端开发？

发送 HTTP 请求：告诉服务器“我想要什么” 浏览器向服务器发送 HTTP 请求，告诉服务器想要访问哪个网页或资源。...HTTP 请求包含请求方法 (如 GET、POST)、请求头 (如 User-Agent、Cookie) 和请求体 (可选)。 4....服务器响应：返回“你要的东西” 服务器收到 HTTP 请求后，会进行相应的处理，并返回 HTTP 响应。...View（视图）：用户界面，是用户看到的部分。视图只负责显示数据，不包含业务逻辑。...在MVC模式中，用户与视图进行交互，视图将用户的请求发送到控制器，控制器调用模型处理数据，并将结果返回给视图进行显示。

3131 0

Angular路由

window.location.pathname; window.location.replace('http://example.com/#' + initialPage); } 1. reload方法用于刷新当前文档...F5和crtl+R是软刷，发送空的头，如果页面打开过服务器会返回302，走缓存 2. ctrl+F5 重走服务器，页面会返回200，不走缓存 1.5 search 属性向服务器发送字符串数据你可能不在意这个...来发送请求。...其实是一样的道理 2.0 Angular路由 2.1 routerLink //1 // 2 通过roterLink不会刷新目前页面，只会根据routerLink改变浏览器的hash，导向对应的视图 routerLink

1.8K5 0

点击加载更多

现代web开发方法

【AngularJS】—— 13 服务Service

AngularJS入门 & 分页 & CRUD示例

【Hybrid开发高级系列】AngularJS(二)——常用$服务

AngularDart4.0 英雄之旅-教程-08HTTP 顶

2020vue面试题及答案_人际关系面试题及答案

Angular（06）- 为什么数据变化，绑定的视图就会自动更新了？

【Hybrid开发高级系列】AngularJS(三)——开发实践

Angular: 最佳实践

VUE跨页面传值的精妙

第217天：深入理解Angular双向数据绑定的原理

某知名it培训班前端三阶段vue相关面试题

【Hybrid开发高级系列】AngularJS(一)——基础专题

深究AngularJS(3)——$res

JSON Web Token(JWT)教程：一个基于Laravel和AngularJS的例子

Angular 服务

Angular v20 版本发布

vue页面刷新_vue强制重置组件

什么是前端开发？

Angular路由

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐