按照预想流程运行JS代码

需求：点击搜索列表结果，跳转到点击的项目，其中项目区分父子级。

项目情况描述：

1. 项目列表：一级项目分页、每页20条。  二级项目不分页，全量数据
2. 点击项目，会在右侧展示对应的项目信息。如果点击的是父项目，会自动请求并打开子项目列表
复制代码

需求分析

1，用户点击搜索的条目时，可能在应用的任何一个页面【正式、临时、个人】
2，项目列表可能处于分组模式
3，如果点击的是子项目，需要模拟用户点击父项目后再定位到子项目
复制代码

实现思路

1，主要用async 和 await 实现异步编程
2. 全局绑定“观察者”，控制流程向下进行，在每个小操作完成后调用方法修改全局“观察者”绑定的改变promise状态方法
复制代码

实现代码

前置知识：在promise 外部改变已出发的promise状态

let resolvePromise = null;
let rejectPromise = null;
let somepromise = async function () {
    await new Promise((resolve,reject) => {
      resolvePromise = resolve
      rejectPromise = reject
    }).then(res=>{
      console.log('res', res)
    }).catch(err=>{
      console.log('err', err)
    })
};
somepromise();

console.log('修改promise成功>>>')
console.log(resolvePromise('promise成功了'))

复制代码

结论： promise 的状态，可以被外界触发

需求代码部分

// 整个“查找项目”流程代码
 async findProject(projectId: any, subProjectId: any, item: any) {
    (window as any).StepForSearchWather = null;
    try {

      // 1. 检查是否为分组模式，是的话，切换为时间排序
      let reschangeGroupSort = await this.changeGroupSort();
      console.log("切换时间分组结果：", reschangeGroupSort);

      //continueFindProjectAction 外界控制流程是否需要继续
      if (!this.continueFindProjectAction) {
        return;
      }
      // 2.判断项目类型，打开对应tab
      let resopenTargetProjectTab = await this.openTargetProjectTab(item);
      // 3.找到父项目
      if (!this.continueFindProjectAction) {
        return;
      }
      let resfindProjectInCreateList = await this.findProjectInCreateList(
        projectId,
        item
      );
      console.log(
        "在当前列表中找到父项目并打开结果：",
        resfindProjectInCreateList
      );
      if (resfindProjectInCreateList == "notfindItem") {
        // 开始请求单条 父项目数据，并插入第一条
        if (!this.continueFindProjectAction) {
          return;
        }
        let resgetOneItemProjectAndInseartList = await this.getOneItemProjectAndInseartList(
          projectId,
          item
        );
        console.log(
          "列表插入一条数据状态结果：",
          resgetOneItemProjectAndInseartList
        );
        if (resgetOneItemProjectAndInseartList) {
          if (!this.continueFindProjectAction) {
            return;
          }
          let resfindProjectInCreateListAfterOne = await this.findProjectInCreateList(
            projectId,
            item
          );
          console.log(
            "在插入一条后的列表中找到父项目并打开结果：",
            resfindProjectInCreateListAfterOne
          );
        }
      }
      // 4、如果只是查找父项目，中止运行后面的代码
      if (projectId && !subProjectId) {
        console.log("父项目[正式项目一级、临时项目一级]查找完成");
        return;
      }

      if (
        subProjectId &&
        projectId &&
        item.type == "formal" &&
        resfindProjectInCreateList
      ) {
        // 5.打开父项目，定位子项目
        if (!this.continueFindProjectAction) {
          return;
        }
        let resfindSubProjectInCreateList = await this.findSubProjectInCreateList(
          subProjectId,
          item
        );
        console.log("查找子项目结果：", resfindSubProjectInCreateList);
      }
      // end
    } catch (error) {
      console.log("error", error);
      this.$notify.error({
        title: "错误",
        message: "查找目标项目失败！请稍后重试！"
      });
    } finally {
      this.$root.$emit("closeSearchBox");
      console.log("》》》项目定位完成");
      console.timeEnd("项目定位时间");
      this.continueFindProjectAction = true;
      this.showMaskOfFindProject(false);
      (window as any).StepForSearchWather = null;
    }
  }
 // 单个步骤实现代码
   changeGroupSort() {
    // 判断当前排序是否为时间模式
    if (this.GetProjectSortType == 2) {
      return true;
    }

    let opeaterHanlder: any = {
      msg: "changeGroupSort",
      resolve: null,
      reject: null
    };
    let tempPromise = new Promise((resolve, reject) => {
      opeaterHanlder.resolve = resolve;
      opeaterHanlder.reject = reject;
    });
    // 流程控制权暴露给全局
    // 将单个步骤的结束权交给windows
    (window as any).StepForSearchWather = opeaterHanlder;
    this.$root.$emit("changeGroupSort");

    return tempPromise;
  }
  
  当单个流程【其他页面的异步请求】执行完成后，
  触发window.StepForSearchWather 上绑定的resolve或者reject方法，
  后续流程按照返回的结果继续执行
复制代码