Windows8异步编程的注意事项

Windows8项目中涉及到下载数据和上传数据。针对小的数据使用的是WinJS.xhr(),而针对大的文件,不方便使用post方式直接上传的文件都使用BackgroundTransfer进行传输。因为Windows8 App虽然后台运行程序也是一个类似IE的进程,但是app和网页在开发中还是有一些不同,所以以下有两点总结。

1.默认Ajax请求,相同的url会缓存。

WWAHost.exe也会像IE一样,对相同的url返回的数据进行缓存。一般app都会进行CRUD操作,所以当我们进行操作完之后,我们必须更新数据。但是在一开始我更新了数据,但是界面始终不更新。

var rand = Math.random(); //为了演示,这里直接用了一个随机数,实际开发中最好以当前时间为种子的随机数,防止缓存

WinJS.xhr({ url: "http://localhost:50623/Default.aspx?t="+rand }) .done(function complete(result) { //do something. }, function error(result) { console.log(result.responseText); });

这样我们每次请求default.aspx返回的数据应该是最新的。ASP.NET推出Web API之后,后台最好不要写.aspx页面或者hanler,最好都使用Web API,这样传统的web应用,然后mobile app和Windows8 app都可以调用相同的数据服务接口。相对而已比后台使用WCF还是要方便一些。

2.Ajax的异步。在Windows8 App开发中,这一点开发人员始终要牢记,否则代码出了问题,我们根本无法定位到代码哪里出错了。原先代码如下:

var userInfo = null; function ShowUser() { var userid = 10001; GetUserInfoByAjax(userid); showUserInfo(); } function GetUserInfoByAjax(userid) { var random = Math.random(); WinJS.xhr({url:"http://localhost:50623/userinfo.aspx?userid="+userid+"&t="+rand}) .done(function complete(result) { //set the userInfo. userInfo = JSON.parse(result.responseText); }, function error(result) { Console.log(result.responseText); }); } function showUserInfo(){ document.getElementById("username").innerHTML=userInfo.username; document.getElementById("hometown").innerHTML=userInfo.hometown; }
<!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } -->

自己一股劲的在调试,但是界面一直不显示username和hometown,断点显示userInfo为null。但是在GetUserInfoByAjax()方法体里面userInfo确实取得了服务器返回的数据。因为前端和后台代码都是自己写,所以有时真不确定是哪头的代码出了问题,所以有时单元测试特别的重要。这里又要提到Web API,等项目结束之后把后台的代码重构为web api出来。

其实这个问题新手很容易范,因为GetUserInfoByAjax(userid);在showUserInfo(); 之前,所以肯定是先获得了userInfo,但是为什么在showUserInfo()里面的userInfo为null。我在写代码时,把Ajax异步请求的概念忘了,WinJS.xhr()发送请求之后不能马上获得数据,这就是异步。所以在代码执行到showUserInfo()内部时,可能userInfo还没有重新赋值,所以还是null。旁边的同事帮我看了一眼就发现我的错误做法。

在获得Ajax数据之后要执行的事情全部要放到Ajax成功方法体内,代码如下:

function GetUserInfoByAjax(userid) { var random = Math.random(); WinJS.xhr({url:"http://localhost:50623/userinfo.aspx?userid="+userid+"&t="+rand}) .done(function complete(result) { //set the userInfo. userInfo = JSON.parse(result.responseText); showUserInfo(); }, function error(result) { Console.log(result.responseText); }); }
<!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } -->

程序运行正常。从以上来看,我们在web开发过程中,很多问题都是由于我们对基础概念掌握的不好,或者忽略了最基本的概念,等到程序代码一多,问题就显得非常多,并且自己经常处在“不识庐山真面目,只缘身在此山中”。一直在自己写的错误代码里面打转。

<!-- .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } -->

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏漫漫前端路

vue-cli 3.0 下发布一个 TypeScript 组件

vue-cli 3.0 提供了一系列功能,包括对 Babel, TypeScript, ESlint, PWA 等开箱即用的支持,同时,它也提供了一个 CLI ...

23420
来自专栏小尘哥的专栏

thymeleaf中使用layui

头部引入css,尾部引入js,定义两个模板(一个也可以,里面的碎片分开写,我喜欢写两个分别引入),注意th:fragment,fragment即碎片,可以在模板...

1.1K60
来自专栏快乐八哥

Windows8异步编程的注意事项

Windows8 App开发中涉及到下载数据和上传数据。针对小的数据使用的是WinJS.xhr(),而针对大的文件,不方便使用post方式直接上传的文件都使用B...

222100
来自专栏葡萄城控件技术团队

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎。不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12...

22280
来自专栏程序员宝库

Intellij IDEA神器居然还有这些小技巧

Intellij IDEA真是越用越觉得它强大,它总是在我们写代码的时候,不时给我们来个小惊喜。出于对Intellij IDEA的喜爱,我决定写一个与其相关的专...

21540
来自专栏黑泽君的专栏

js代码与html代码分离示例

17620
来自专栏ionic3+

【技巧】ionic后FileTransfer时代的文件传输

FileTransfer是常用的Codrodva插件之一,在过去的几篇文章中都能看到它的身影:

16530
来自专栏游戏杂谈

推荐一款移动端的web UI控件 -- mobiscroll

用mobiscroll 可实现ios系统自带的选择器控件效果,支持几乎所有的移动平台(iOS, Android, BlackBerry, Windows Ph...

18440
来自专栏前端小作坊

网页上的复制与剪切

IE 10及以上的版本修改了Document.execCommand()方法,增加了对剪切和复制的支持。Chrome从43版本开始也支持了这项特性。

13420
来自专栏Puppeteer学习

一步一步学习Vue(十一)

18020

扫码关注云+社区

领取腾讯云代金券