调用shrtco短链接API时Promise已正常兑现但输出结果及后续then为undefined

你碰到的问题和shrtco接口是否正常响应没关系，纯粹是Promise链式调用的传递规则没捋顺，和你描述的现象完全匹配：

• 箭头函数如果省略大括号，函数的返回值就是后面紧跟的表达式的执行结果。你在第一个.then里写的表达式是console.log(res.json())，而所有console方法的返回值永远是undefined，等于第一个环节处理完之后，给第二个.then传递的值就是undefined，根本没把解析后的接口数据往下传。
• 顺带提个容易混淆的点：res.json()本身是异步的Promise对象，不是同步就能拿到的解析结果，直接把它塞到console.log里，打印出来的只会是一个处于pending状态的Promise实例——这也是为什么你会觉得响应好像打出来了，但根本拿不到可用数据的原因。

const handleCall = (e) =>{
    e.preventDefault();
    fetch(`https://api.shrtco.de/v2/shorten?url=www.udemy.com`)
     // 显式return json解析的Promise，让下一个then等待解析完成
     .then(res => res.json())
     // 此时拿到的res就是接口返回的真实结构化数据
     .then(res => console.log(res))
}

• 如果需要在then里加调试打印，千万别忘了把要传递的值单独return，不然后续环节还是会拿到undefined，正确写法参考：

  .then(res => {
    console.log('调试收到的响应：', res)
    return res // 必须显式把值递下去
  })
  

• 记住fetch返回的是原始Response对象，需要手动调用res.json()/res.text()这类方法做数据解析，所有解析方法都是异步Promise，必须通过return让链式调用等待解析完成，不能当同步值直接取。

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