優化點擊確認提交等待其餘接口返回數據的用戶體驗

項目中有一個頁面中用戶主要有三個和後端交互的部分:
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;
}
相關文章
相關標籤/搜索