JS嵌套调用函数报getId不是函数及fetch异步返回undefined问题求助

问题根因 #

这是典型的JavaScript异步执行逻辑导致的问题，核心原因如下：

• fetch是异步API，调用后会立即返回Pending状态的Promise，不会阻塞后续代码执行，也不会等待接口返回结果再向下运行
• 当前getId函数没有主动返回fetch产生的Promise对象，函数默认返回undefined，.then回调内部的return只会将值传递给Promise的下一个回调，无法作为getId的返回值传递到外层

单独调用getId时看起来正常是因为函数内部的.then回调会在接口请求成功后异步打印ID，你混淆了打印的触发时机：console.log(getId())同步打印的是undefined，之后异步触发的.then回调才打印了正确的ID，并非getId同步返回了正确结果。

解决方案 #

首先统一修改getId函数，将fetch产生的Promise返回给外层调用者：

let getId = function() {
    // 新增return，把异步Promise暴露给外层
    return fetch("https://www.instagram.com/johndoe/?__a=1", {properties})
  .then(response => response.json())
  .then(data => {
      const id = data["graphql"]['user']['id'];
      console.log('ID:' + id);
      return id;
  });
};

之后可以选择任意一种方式处理异步逻辑：

方案1：Promise链式调用 #

修改getFollowers函数，在.then回调中获取ID后再执行后续逻辑：

let getFollowers = function() {
  return getId().then(id => {
    console.log('ID: ' + id);
    // 所有依赖ID的业务逻辑都要放在这个回调内部执行
    // 后续粉丝列表拉取逻辑写在这里
  })
};

// 调用时同样通过.then获取最终结果
getFollowers().then(res => {
  console.log(res)
})

方案2：async/await语法（更简洁，推荐） #

将getFollowers声明为async函数，用await等待异步结果返回后再执行后续逻辑：

let getFollowers = async function() {
  const id = await getId();
  console.log('ID: ' + id);
  // 后续业务逻辑直接按同步写法编写即可
}

// 调用async函数返回的也是Promise，可通过await或.then获取结果
(async () => {
  await getFollowers();
})()

另外你提供的简化测试代码语法没有问题，本地运行不会触发getId不是函数的报错，如果你的实际开发环境出现该报错，可排查是否存在变量重名覆盖、getId定义在局部作用域未暴露到调用位置、或者函数调用早于函数声明的情况。

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