Run the JS code according to the desired flow

Requirements: Click on the search list results to jump to the clicked items, where the items are divided into parent and child levels.

Project Description:

1. Item list: Level 1 item paging, 20 items per page. 2. Click the item, and the corresponding item information will be displayed on the right. If you click on a parent project, the list of child projects is automatically requested and openedCopy the code

Demand analysis

1. When the user clicks on the search item, it may be on any page of the application [formal, temporary, personal]. 2Copy the code

Implementation approach

1. Asynchronous programming is mainly achieved with async and await. 2Copy the code

The implementation code

Preknowledge: Change the originating promise state outside the 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('Modify promise success >>>')
console.log(resolvePromise('Promise worked.'))

Copy the code

Conclusion: The promise state can be triggered by the outside world

Requirement code section

// The whole "find items" process code
 async findProject(projectId: any, subProjectId: any, item: any){(window as any).StepForSearchWather = null;
    try {

      // 1. Check whether the mode is grouped. If yes, switch to time sorting
      let reschangeGroupSort = await this.changeGroupSort();
      console.log("Switching time grouping result:", reschangeGroupSort);

      / / continueFindProjectAction outside whether to need to continue to control process
      if (!this.continueFindProjectAction) {
        return;
      }
      // 2. Determine the project type and open the corresponding TAB
      let resopenTargetProjectTab = await this.openTargetProjectTab(item);
      // 3. Find the parent project
      if (!this.continueFindProjectAction) {
        return;
      }
      let resfindProjectInCreateList = await this.findProjectInCreateList(
        projectId,
        item
      );
      console.log(
        "Find the parent project in the current list and open the result:",
        resfindProjectInCreateList
      );
      if (resfindProjectInCreateList == "notfindItem") {
        // Start requesting a single piece of parent project data and insert the first
        if (!this.continueFindProjectAction) {
          return;
        }
        let resgetOneItemProjectAndInseartList = await this.getOneItemProjectAndInseartList(
          projectId,
          item
        );
        console.log(
          Insert a data state into the list:,
          resgetOneItemProjectAndInseartList
        );
        if (resgetOneItemProjectAndInseartList) {
          if (!this.continueFindProjectAction) {
            return;
          }
          let resfindProjectInCreateListAfterOne = await this.findProjectInCreateList(
            projectId,
            item
          );
          console.log(
            "Find the parent item in the inserted list and open the result:", resfindProjectInCreateListAfterOne ); }}// if you are looking for the parent project, abort the following code
      if(projectId && ! subProjectId) {console.log("Parent project [formal project level 1, temporary project level 1] search completed");
        return;
      }

      if (
        subProjectId &&
        projectId &&
        item.type == "formal" &&
        resfindProjectInCreateList
      ) {
        // 5. Open the parent project and locate the child project
        if (!this.continueFindProjectAction) {
          return;
        }
        let resfindSubProjectInCreateList = await this.findSubProjectInCreateList(
          subProjectId,
          item
        );
        console.log("Find subproject results:", resfindSubProjectInCreateList);
      }
      // end
    } catch (error) {
      console.log("error", error);
      this.$notify.error({
        title: "Error".message: "Failed to find target item! Please try again later!"
      });
    } finally {
      this.$root.$emit("closeSearchBox");
      console.log(Project positioning completed);
      console.timeEnd("Project Positioning Time");
      this.continueFindProjectAction = true;
      this.showMaskOfFindProject(false);
      (window as any).StepForSearchWather = null; }}// Single step implementation code
   changeGroupSort() {
    // Determine whether the current sort is in time mode
    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;
    });
    // Process control is exposed globally
    // Give the termination of a single step to Windows
    (window as any).StepForSearchWather = opeaterHanlder;
    this.$root.$emit("changeGroupSort");

    returntempPromise; } When a single process (asynchronous request from other pages) completes executionwindow.StepForSearchWather Bind resolve or Reject. Subsequent processes continue to execute the resultCopy the code