External Brain

Fetch data from API

5 min read

fetch = function used for making HTTP requests to fetch resources. (json style data, images, files) fetch(url, {options})

展示两种写法： 1️⃣ Promise 链式写法 2️⃣ async / await 写法（语法糖版）

// ==================== Promise 链式写法 ====================
// 向 PokeAPI 发起 HTTP 请求，获取 "pikachu" 的数据
fetch("https://pokeapi.co/api/v2/pokemon/pikachu")
  .then(response => {
 
    // 如果服务器返回的响应状态码不是 200~299（成功），手动抛出错误
    if(!response.ok){
        throw new Error("could not fetch resource"); 
        // ✅ 用于捕捉网络错误、404、500 等异常情况
    }
 
    // response.json() 会将原始响应体（JSON 格式）解析为 JS 对象
    // ⚠️ 注意：response.json() 也返回一个 Promise
    return response.json();
  })
  // 当 JSON 数据解析成功后进入下一个 then()
  .then(data => console.log(data.id)) // 输出 Pokémon 的 id（如 25）
  // 如果请求失败、解析失败、或上方 throw 抛出错误，则进入 catch()
  .catch(error => console.log(error));
  • fetch() 是一个内置的异步 API，用于请求服务器资源（如 API）。
  • 它返回一个 Promise 对象，表示“未来会返回的数据”。
  • .then() 链式调用依次处理异步结果。
  • .catch() 用来捕获所有错误（包括网络断开、404、语法错误等）。
// ==================== async / await 写法 ====================
// ⚠️ 先执行函数调用（因为函数定义在下方）
fetchData();
 
async function fetchData(){
 
  try{
    // 使用 await 等待 fetch 请求完成
    const response = await fetch("https://pokeapi.co/api/v2/pokemon/pikachu");
 
    // 检查响应状态是否正常
    if(!response.ok){
      throw new Error("could not fetch resource");
    }
 
    // 解析 JSON 数据，同样使用 await 等待解析完成
    const data = await response.json();
 
    // 输出结果（这次输出 name 属性）
    console.log(data.name); // pikachu
  }
  catch(error){
    // 捕获上方 try 块中所有错误（包括 fetch 失败或 throw 出来的错误）
    console.error(error);
  }
}
  • async function 声明一个异步函数，返回一个 Promise。
  • await 关键字会“暂停”代码执行，直到 Promise 完成。
  • 用 try…catch 可以更直观地捕获错误。
  • 相比 .then() 链式写法，结构更清晰、可读性更强。

Example

// 异步函数：用 async 声明，允许在内部使用 await
async function fetchData(){
 
  try{
    // ===================== 1️⃣ 获取用户输入 =====================
    // 从输入框中取出用户输入的宝可梦名字
    // 并统一转换成小写（API 区分大小写，例如 Pikachu → pikachu）
    const pokemonName = document.getElementById("pokemonName").value.toLowerCase();
 
    // ===================== 2️⃣ 向 API 发送请求 =====================
    // 使用模板字符串将用户输入插入到 URL 中
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
 
    // ===================== 3️⃣ 检查响应状态 =====================
    // fetch() 不会自动抛出 HTTP 错误（如 404、500），
    // 所以需要手动判断 response.ok 是否为 true。
    if(!response.ok){
      throw new Error("could not fetch resource"); // 主动抛出错误
    }
 
    // ===================== 4️⃣ 解析响应数据 =====================
    // response.json() 会解析服务器返回的 JSON 数据
    // await 等待解析完成后得到 JS 对象
    const data = await response.json();
 
    // ===================== 5️⃣ 从数据中提取图片 =====================
    // 通过查阅 PokeAPI 文档得知：
    // Pokémon 图片在 data.sprites.front_default 中
    const pokemonSprite = data.sprites.front_default;
 
    // ===================== 6️⃣ 更新网页中的图片元素 =====================
    // 获取页面中的 <img id="pokemonSprite"> 元素
    const imgElement = document.getElementById("pokemonSprite");
 
    // 修改图片的 src 属性，让它显示对应宝可梦的图片
    imgElement.src = pokemonSprite;
 
    // 确保图片可见（可能一开始在 CSS 里设置了 display:none）
    imgElement.style.display = "block";
  }
 
  // ===================== 7️⃣ 错误捕获 =====================
  catch(error){
    // 捕捉上方任意一步中的错误（包括网络失败、输入错误等）
    console.error(error);
 
    // 你也可以在这里显示用户友好的提示，例如：
    // document.getElementById("errorMessage").textContent = "Pokémon not found!"
  }
}

Graph View

Backlinks