在componentDidMount中发起多API调用报TypeError：找不到'then'属性，如何解决？

你遇到的这个「无法找到'then'属性（undefined）」错误，核心原因是某个API调用没有返回合法的Promise对象，导致你调用.then()时找不到对应的方法。咱们一步步来排查和解决：

先揪出代码里的明显问题 #

看你提供的代码，第一个API调用后面多了个空的.then()：

API.getAllBoards()
  .then(res => {
    this.setState({ boards: res.data })
    console.log(res.data);
    console.log("one");
  }).then() // 这里的空then完全没必要，还可能干扰链式调用逻辑

这个空.then()本身不会直接导致报错，但它暴露了一个隐患：你可能对Promise链式调用的逻辑理解有偏差，而真正的元凶大概率是**API.getAllBoards()或API.getPowder()其中一个方法没有返回Promise**。

具体解决方案步骤 #

1. 先验证你的API工具类是否正确返回Promise #

打开你的API模块，检查getAllBoards和getPowder方法，确保它们确实返回了Promise（比如用axios/fetch发起请求时，一定要return请求结果）。举个正确的示例：

// 正确的API方法写法（以axios为例）
const API = {
  getAllBoards: () => {
    // 必须return这个axios请求的Promise
    return axios.get('/api/boards');
  },
  getPowder: () => {
    return axios.get('/api/powder');
  }
}

如果你的API方法忘了写return，就会默认返回undefined，自然没法调用.then()。

2. 修正componentDidMount里的调用逻辑 #

根据你的需求，有两种优化方式：

方式一：并行调用（更高效，不关心请求顺序）

如果两个API请求没有依赖关系，用Promise.all同时发起，等所有请求完成后统一处理：

componentDidMount() {
  Promise.all([API.getAllBoards(), API.getPowder()])
    .then(([boardsRes, powderRes]) => {
      this.setState({
        boards: boardsRes.data,
        powder: powderRes.data
      });
      console.log(boardsRes.data, "one");
      console.log(powderRes.data, "two");
    })
    .catch(err => {
      // 捕获任意一个请求的错误，方便排查问题
      console.error("API请求出错：", err);
    });
}

方式二：顺序调用（有依赖关系，先完成第一个再调第二个）

如果必须先获取看板数据，再请求powder，就在第一个then里返回第二个API的Promise：

componentDidMount() {
  API.getAllBoards()
    .then(res => {
      this.setState({ boards: res.data });
      console.log(res.data);
      console.log("one");
      // 返回第二个API的Promise，继续链式调用
      return API.getPowder();
    })
    .then(res => {
      this.setState({ powder: res.data });
      console.log(res.data);
      console.log("two");
    })
    .catch(err => {
      console.error("请求出错：", err);
    });
}

3. 一定要加错误捕获 #

别漏掉.catch()，它能帮你快速定位是哪个API请求出了问题，而不是只看到模糊的「then不存在」错误。

总结一下 #

• 先检查API方法是否正确return了Promise请求结果
• 删掉代码里多余的空.then()
• 根据业务需求选并行/顺序调用，同时加上错误处理

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