如何使用JavaScript调用API并查看其返回的对象？

嘿，真的不用觉得这是基础问题不好意思——好多刚接触前端调试的朋友都卡在这里！我给你讲两种完全不用额外工具的方法，直接在浏览器控制台里就能搞定。

方法一：用fetch + Promise链式调用 #

这是现代浏览器原生支持的方法，不用引入任何库，直接写代码就行：

// 先把你的API URL替换成实际地址
const yourApiUrl = "https://your-api-address.com/endpoint";

fetch(yourApiUrl)
  // 第一步：先确认请求是否成功
  .then(response => {
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    // 把API返回的内容转换成JSON对象
    return response.json();
  })
  // 第二步：拿到转换后的对象，查看它
  .then(returnedObject => {
    // 直接打印到控制台，方便看细节
    console.log("API返回的对象：", returnedObject);
    // 把对象存到全局变量里，之后直接输变量名就能调出它，和你之前的person一样
    window.apiResult = returnedObject;
  })
  // 处理请求出错的情况（比如断网、API地址错了）
  .catch(error => {
    console.error("调用API时出错啦：", error);
  });

执行完这段代码后，你直接在控制台输入apiResult，就能像查看person那样调出返回的对象了。

方法二：用async/await（更简洁的写法） #

如果觉得链式调用看着绕，用async/await语法会更直观，控制台完全支持：

async function getApiData() {
  try {
    const yourApiUrl = "https://your-api-address.com/endpoint";
    // 等待请求完成
    const response = await fetch(yourApiUrl);
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    // 等待响应转换成对象
    const returnedObject = await response.json();
    // 打印并存到全局变量
    console.log("返回的对象：", returnedObject);
    window.apiData = returnedObject;
  } catch (error) {
    console.error("出错了：", error);
  }
}

// 调用这个函数
getApiData();

之后输入apiData就能查看返回的对象啦。

小提示：关于跨域问题 #

如果控制台报了CORS相关的错误，说明你的API和当前打开的页面不在同一个域名下。这种情况要么是你的API需要配置跨域允许规则，要么可以用浏览器的跨域调试插件临时绕过（调试完记得关掉哦）。

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