Promise初尝试

promise.ts

export function showAlert() {
  console.log("开始调用showAlert");
  return new Promise((reslove, reject) => {
    try {
      console.log("开始执行showAlert");
      setTimeout(() => {
        console.log("执行showAlert完成");
        reslove();
      }, 3000);
    } catch (e) {
      reject(e);
    }
  });
}
export function showAlert2() {
  console.log("开始调用2");
  return new Promise((reslove, reject) => {
    try {
      console.log("开始执行2");
      setTimeout(() => {
        console.log("执行2完成");
        reslove();
      }, 5000);
    } catch (e) {
      reject(e);
    }
  });
}

页面

• import { showAlert, showAlert2 } from "../promise.ts";

• 打印数据

• 开始调用showAlert

• 开始执行showAlert

• 开始调用2

• 开始执行2

• 执行showAlert完成

• 已经结束

• 执行2完成

• 2结束

• 两个都调用

    // 总共经过5秒
    onSubmit() {
      showAlert()
        .then(res => {
          console.log("已经结束");
        })
        .catch(err => {
          console.log(err);
        });
      showAlert2()
        .then(res => {
          console.log("2结束");
        })
        .catch(err => {
          console.log(err);
        });
    }
  

• 异步调用

    // 异步执行5秒完成
    async onSubmit() {
      Promise.all([showAlert(), showAlert2()]).then(() => {
        console.log("两个执行完成");
      });
    }
  

• async await

    // 5秒完成
    async onSubmit() {
      const result = await Promise.all([showAlert(), showAlert2()]);
      console.log("async await 执行完成");
    }
  

• await

    // 8秒完成
    async onSubmit() {
          await showAlert();
          await showAlert2();
          console.log("await完成");
        }