优化点击确认提交等待其他接口返回数据的用户体验

Posted 2021-09-07 huajack

项目中有一个页面中用户主要有三个和后端交互的部分：
a. 上传头像校验成功后返回图片链接
b. 根据定位经纬度向后台获取位置信息并展示在编辑界面
c. 最后将a,b返回信息以及一些其他输入信息一起提交。

其中a,b两个接口都是需要在点击最后确认之前请求。
最简单的方法就是在a，b接口请求的时候将确认按钮置灰或loading。但是单独增加置灰的话用户可能会感到疑惑,增加明显的loading的话会影响到用户修改其他信息。

如何使用户无感这个步骤？

主要思路：
1. 当用户点击提交的时候如果a，b有一个没执行完等待最后一个执行完后执行c。
2. 当用户点击提交a，b都执行完直接执行c。

代码设计也比较简单：

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