如何在Angular 2中实现同步链式调用？需先执行action1再执行action2

当然可以实现啦！其实你当前的代码在同步场景下已经是按顺序执行的了——action1()会先跑完所有逻辑返回"completed"，才会轮到action2()执行。不过我猜你可能是担心后续action1变成异步操作（比如涉及文件IO、网络请求这类耗时任务）的情况？下面分两种场景给你详细说明：

场景1：action1和action2都是同步方法 #

你现在的写法本身就满足需求，但如果想让调用看起来更有"链式"的感觉，可以稍微调整代码，让方法返回自身来支持链式调用：

// 调整为可链式调用的写法
const ProjectManager = {
  start() {
    this.createStructure().fillData();
    return this;
  },
  createStructure() {
    // 创建项目结构逻辑
    console.log("项目结构创建完成");
    return this; // 返回自身，允许链式调用下一个方法
  },
  fillData() {
    // 填充项目数据逻辑
    console.log("项目数据填充完成");
    return this;
  }
};

// 调用示例
ProjectManager.start();

这样调用起来不仅顺序明确，还具备了清晰的链式风格。

场景2：action1是异步方法（实际开发中更常见） #

如果action1是异步操作（比如创建项目结构需要写入文件、调用后端接口），那原来的写法会导致action2在action1还没完成时就执行。这时候可以用以下几种方式来保证执行顺序：

方法1：async/await（最直观易读的写法） #

把启动方法改成异步函数，用await等待action1执行完毕：

async startPoint() { 
  await action1(); 
  action2(); 
} 

// 异步版action1（模拟耗时操作）
function action1() { 
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("项目结构创建完成");
      resolve("completed");
    }, 1500);
  });
} 

function action2() { 
  console.log("项目数据填充完成");
  return "completed"; 
}

方法2：Promise链式调用 #

如果不想用async/await，直接用Promise的then方法也能实现顺序执行：

startPoint() { 
  action1()
    .then(() => action2());
} 

// 异步版action1
function action1() { 
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("项目结构创建完成");
      resolve("completed");
    }, 1500);
  });
} 

function action2() { 
  console.log("项目数据填充完成");
  return "completed"; 
}

方法3：回调函数（兼容老版本JS环境） #

如果你的运行环境不支持Promise和async/await，也可以用传统的回调函数来实现：

startPoint() { 
  action1(() => {
    action2();
  }); 
} 

// 带回调的异步action1
function action1(callback) { 
  setTimeout(() => {
    console.log("项目结构创建完成");
    callback(); // 完成后触发回调，执行action2
  }, 1500);
} 

function action2() { 
  console.log("项目数据填充完成");
  return "completed"; 
}

内容的提问来源于stack exchange，提问作者hellzone