前言前端
存在問題的代碼 web
1、業務場景json
2、存在的問題後端
3、修改思路服務器
優化後的代碼數據結構
2、主方法體async
小結優化
小編以前作過一個抽獎的功能，其中使用http協議請求後端方法，當時雖然知道這是一個異步的方法，可是並無過多的考慮，沒想到一位大神發現了其中存在的漏洞和隱患，便指導了去如何修改優化，在這個過程當中，也是加深了本身對於異步同步概念的理解，以及哪些地方使用到了異步同步。this
1. 抽獎功能，點擊抽獎後，請求後端，以後返回給前端結果：成功或失敗
2. 區別點：http協議中有Status狀態碼、還有response的數據，其中response數據裏面有後臺封裝的數據結構（code/msg/data）
（1）status狀態碼：200 ，它只能說明和服務器鏈接狀態正常，並不能說明請求的結果是否成功或失敗；
（2）response中的code:執行方法的結果碼，能夠說明執行結果的成功與失敗，通常定義「0000」成功、「1111」失敗；
3.具體代碼
const alert = await this.alertController.create({
header: '是否購買抽獎機會?',
message: '將消耗您5積分！',
buttons: [
{
text: '取消',
role: 'cancel',
handler: () => { }
},
{
text: '購買',
handler: async () => {
this.loginID = localStorage.getItem('userId');
this.loginName = localStorage.getItem('userName');
const dataUrl = 'game-web/lotteryChance/exchangeLotteryChange/' + this.loginID + '/' + this.loginName;
// 存在問題代碼---開始
this.http.get(dataUrl).subscribe(
res => {
this.flag = res.json();
});
if (this.flag === true) {
const alert1 = await this.alertController.create({
header: '',
subHeader: '購買成功',
buttons: [
{
text: '我已瞭解~',
handler: () => {
this.getLotteryChance();
}
}
],
});
await alert1.present();
} else {
const alert3 = await this.alertController.create({
header: '',
subHeader: '購買失敗,請刷新重試',
buttons: ['我已瞭解~']
});
await alert3.present();
}
//存在問題代碼---結束
}
}
]
});
await alert.present();
上面的代碼中，小編標識了有問題的代碼塊，這個代碼塊中存在兩個方法，一個是http請求接口，另外一個是根據this.flag結果執行的代碼塊。
http請求後端的方法是異步方法，它下面的方法不用等待它的返回結果，就能夠執行，如此一來，this.flag的結果就出現問題。
1.將if...else..放在res=>()中，結果await this.alertController.create()須要異步方法；
2.因此改變修改思路，將if..else..方法抽離成一個異步方法。
/**
* 抽出購買抽獎機會的方法體，實現異步方法async
* @param flag
* @author 馮浩月
* @since 2019年3月5日07:46:40
*/
async IsbuyChance(flag: any) {
if (flag === true) {
const alert1 = await this.alertController.create({
header: '',
subHeader: '購買成功',
buttons: [
{
text: '我已瞭解~',
handler: () => {
this.getLotteryChance();
}
}
],
});
await alert1.present();
} else {
const alert3 = await this.alertController.create({
header: '',
subHeader: '購買失敗,請刷新重試',
buttons: ['我已瞭解~']
});
await alert3.present();
}
}
const alert = await this.alertController.create({
header: '是否購買抽獎機會?',
message: '將消耗您5積分！',
buttons: [
{
text: '取消',
role: 'cancel',
handler: () => { }
},
{
text: '購買',
handler: async () => {
this.loginID = localStorage.getItem('userId');
this.loginName = localStorage.getItem('userName');
const dataUrl = 'game-web/lotteryChance/exchangeLotteryChange/' + this.loginID + '/' + this.loginName;
this.http.get(dataUrl).subscribe(
res => {
if (res.json().code ==='50001' ) {
this.flag = false;
} else {
this.flag = res.json();
}
// 調用抽離的異步方法
this.IsbuyChance(this.flag);
});
}
}
]
});
await alert.present();
經過這個優化的過程，明確了後端封裝result體，也是很是重要的，前端接收結果時，也要注意判斷code碼，不要不處理。同時也感謝大神的幫助指導，讓我對於深刻思考和對http協議的認識更加深刻，抽離方法體的切入點也更加明確。
感謝您的訪問！