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; }

自己一股勁的在調試，但是界面一直不

顯示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開發過程中，很多問題都是由于我們對基礎概念掌握的不好，或者忽略了最基本的概念，等到程式代碼一多，問題就顯得非常多，并且自己經常處在“不識廬山真面目，隻緣身在此山中”。一直在自己寫的錯誤代碼裡面打轉。