Windows8异步编程的注意事项
Windows8 App开发中涉及到下载数据和上传数据。针对小的数据使用的是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;
}
自己一股劲的在调试,但是界面一直不显示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);
});
}
程序运行正常。从以上来看,我们在web开发过程中,很多问题都是由于我们对基础概念掌握的不好,或者忽略了最基本的概念,等到程序代码一多,问题就显得非常多,并且自己经常处在“不识庐山真面目,只缘身在此山中”。一直在自己写的错误代码里面打转。
- 我的WCF之旅(13):创建基于MSMQ的Responsive Service
- 开发自己的Data Access Application Block[上篇]
- 18.9/18.10 LVS NAT模式搭建
- 谈谈WCF中的Data Contract (1):Data Contract Overview
- Linux基础(day66)
- 字符串的驻留(String Interning)
- 19.5 忘记Admin密码如何做
- 19.3/19.4/19.6 安装zabbix
- 欲火焚身,心静则凉--只靠冲动是不能长久地
- 深入理解C#3.x的新特性(4):Automatically Implemented Property
- 增加网卡注意点
- 深入理解C# 3.x的新特性(1): Anonymous Type
- Linux基础(day65)
- 18.12 keepalived + LVS
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法