項目中有一個頁面中用戶主要有三個和後端交互的部分:
a. 上傳頭像校驗成功後返回圖片連接
b. 根據定位經緯度向後臺獲取位置信息並展現在編輯界面
c. 最後將a,b返回信息以及一些其餘輸入信息一塊兒提交。後端
其中a,b兩個接口都是須要在點擊最後確認以前請求。
最簡單的方法就是在a,b接口請求的時候將確認按鈕置灰或loading。可是單獨增長置灰的話用戶可能會感到疑惑,增長明顯的loading的話會影響到用戶修改其餘信息。函數
如何使用戶無感這個步驟?設計
主要思路: 1. 當用戶點擊提交的時候若是a,b有一個沒執行完等待最後一個執行完後執行c。 2. 當用戶點擊提交a,b都執行完直接執行c。
代碼設計也比較簡單:code
1. c請求存在三個執行的時機 . 頁面點擊確認 . 點擊確認a執行結束 . 點擊確認b執行結束。 2. 設置三個標誌符: 點擊確認後C, a請求執行結束後A, b請求執行結束後B 3. c請求函數中增長判斷,若是未點擊確認或者a、b正在請求中則直接返回,不然執行請求函數
代碼示例接口
let A, B, C; function a() { A = true try { // ... 執行請求邏輯 c(); } catch(err) { // 提示錯誤 C = false; } A = false } function B() { B = true try { // ... 執行請求邏輯 c(); } catch(err) { // 提示錯誤 C = false; } B = false } function submit() { C = true; c(); } function c() { if (B || C) return; // b,c正在請求中 if (!C)return; // ... 執行請求 C = false; }