在实际开发中，我们经常需要在提交表单之前进行验证，然后调用接口完成注册或登录等操作。对于接口调用，通常有两种写法： 基于 Promise 的 .then() / .catch() 风格 使用 async / await 的同步风格

Promise（.then / .catch）写法

优点

• 所有浏览器都支持，是最原始、最传统的方式
• 多个异步任务可以通过链式调用串联

缺点

• 可读性一般，尤其多个接口调用时会形成“回调链”
• 错误处理不集中，每个 then 后面可能都要加错误判断
• finally 的逻辑往往容易被忽略（如 loading 状态）

loading.value = true;

LoginSave(ruleForm)
  .then((res) => {
    if (res.code === "0") {
      ElMessage.success("注册信息已提交！");
      done();
    } else {
      ElMessage.error(res.message || '登录失败，请检查用户名或密码');
    }
  })
  .catch((err) => {
    ElMessage.error(err.message);
  })
  .finally(() => {
    loading.value = false;
  });

async / await 写法（推荐）

优点

• 写法更接近同步代码，可读性极佳
• try/catch/finally 让逻辑结构清晰统一
• 更容易维护，无嵌套，可避免“Promise 链地狱”
• loading 和 done() 的时机更容易控制

缺点

• 必须在 async 函数内部使用 await
• 对于多个并发请求，需要 Promise.all 搭配使用

const onPacketEnable= async () => {

    const status = form.enabled ? 1 : 0

    const data = {
        status: status,
        day: 1,
        user_shop_id: user_shop_id.value,
        hb_num: 5,
        type: 1,
        token: shop_token.value
    }

    try {
        await ElMessageBox.confirm(`确认打开开关`, '确认', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'info',
        })

        switchLoading.value = true
        const res = await setHbSwitch(data)

        if (res.status === 1) {
            // console.log("操作成功返回的参数", res)
            ElMessage.success("操作成功")
        } else {
            throw new Error(res.message) // 主动抛错，进入 catch
        }
    } catch (err) {

        // 区分取消和真实错误
        if (err === 'cancel' || err === 'close') {
            ElMessage.info('已取消红包活动')
        } else {
            ElMessage.error(err.message || '操作失败')
        }

        // 无论取消还是失败，都回滚 UI 状态
        form.enabled = !status
    } finally {
        ShopInit();
        switchLoading.value = false
    }

}

并发请求

重要

• 在页面加载需要多个接口，可以使用这个方法
• 多个并发请求要一起发起 → 必须用 Promise.all

async function loadPage() {
  try {
    loading.value = true;

    const [userinfo, roles, settings] = await Promise.all([
      api.getUserInfo(),
      api.getUserRoles(),
      api.getSettings()
    ]);

    console.log(userinfo, roles, settings);

  } catch (e) {
    ElMessage.error("加载失败");
  } finally {
    loading.value = false;
  }
}

版权所有

版权归属：念宇

许可证：署名-非商业性-禁止演绎 4.0 国际 (CC-BY-NC-ND-4.0)