Skip to content

将动画封面获取源从 Anitabi CDN 切换至 Bangumi 官方 API 并支持异步加载#18

Open
peterwang1996 wants to merge 2 commits into
itorr:masterfrom
peterwang1996:master
Open

将动画封面获取源从 Anitabi CDN 切换至 Bangumi 官方 API 并支持异步加载#18
peterwang1996 wants to merge 2 commits into
itorr:masterfrom
peterwang1996:master

Conversation

@peterwang1996

Copy link
Copy Markdown

💡 功能改动 (What Changed)

  1. 封面数据源切换:废弃了原先通过 api.anitabi.cn 拼接静态 URL 获取封面的方式,改为调用 Bangumi 官方接口 ([https://api.bgm.tv/v0/subjects/](https://api.bgm.tv/v0/subjects/){id}) 获取详细数据,并使用官方返回的 large(高清大图)作为封面图源。
  2. 渲染流程异步化:将列表渲染与网格绘制由同步执行调整为异步等待(async/await),确保在接口成功返回封面 URL 后再进行 DOM 更新与 Canvas 绘制。

🛠 实现思路 (Implementation Details)

  1. 重构 getCoverURLById
  • 将原有同步箭头函数修改为 async function
  • 通过 get 请求 API 动态获取条目详情,并提取 data.images.large 字段,若无数据则进行 fallback 处理(返回 null)。
  1. 改造列表渲染 (resetAnimeList)
  • 将方法升级为 async 方法。
  • 采用 Promise.all + Array.map 的结合方式,并发请求列表中所有动画的封面 URL。待所有 Promise 解析完成后,再统一拼接 HTML 插入至 innerHTML,避免因串行请求导致渲染阻塞或出现白屏闪烁。
  1. 改造网格绘制 (drawBangumis)
  • 同样升级为 async 方法。
  • 在传入 loadImage 方法前,先 await getCoverURLById(id) 获取到真实的封面图片地址,再执行后续计算宽高比与绘制的逻辑。

@itorr

@peterwang1996
peterwang1996 marked this pull request as draft July 16, 2026 02:49
@peterwang1996
peterwang1996 marked this pull request as ready for review July 16, 2026 02:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant