普通函数内使用fetch报错p1()未定义且if else未输出预期结果

• 你编写的原始p1函数没有显式定义返回值，JavaScript规则中，函数没有写return语句时默认返回undefined，因此调用p1().then(...)时等价于对undefined调用then方法，自然抛出Uncaught TypeError: p1() is undefined错误。
• 你写在setTimeout回调函数内的return语句，返回值仅属于这个回调函数本身，无法传递到外层的p1函数作用域，因此这部分逻辑完全不会影响p1的返回结果。
• 在else块后添加return f后恢复正常的原因非常简单：f是fetch方法原生返回的Promise实例，将它作为p1的返回值后，p1()就能拿到合法的Promise对象，自然可以正常调用.then方法执行链式回调。

你代码中写的5秒延时判断f.ok的逻辑本质是无效的：fetch刚执行完成返回的Promise处于pending状态时，f.ok属性不存在，你必须等待Promise决议完成后才能读取到响应的状态值。而且添加return f后实际执行时，fetch的响应回调根本不会等待5秒的setTimeout执行，setTimeout里的判断逻辑不会对后续的then链产生任何影响。

正确的异步处理写法参考：

function p1(){
  // 直接返回fetch的Promise链，在决议后处理响应状态
  return fetch("https://ghibliapi.herokuapp.com/people")
    .then(response => {
      if(response.ok){
        return response
      } else {
        // 异常状态直接抛出错误，交由外层catch捕获
        throw new Error(response.statusText)
      }
    })
}

p1().then(function(data){
  return data.json();
}).then(function(data){
  console.log(data)
}).catch(function(error){
  console.log("Error",error)
})

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