前阵子刷 dev.to，看到 Adam 的《Portfolio Update, I Guess》，8 月 26 号发的。开头他自己就交代了：这篇不是本周主文章，不提供知识增量，就是聊聊作品集改版。我本来是当"看一眼链接就走"那种帖子点开的，链接是 a-thedeveloper.vercel.app，进去晃了一圈，Vibe/Tone 切换、天气对应的下落元素、每个天气配一段音乐，确实花了不少心思。
让我坐直的是中间一段很不起眼的东西——他在作品集里展示了 DEV 文章的浏览量。
这篇笔记就记这一块：公开接口为什么不够用、带 key 的请求怎么写、跑通之后怎么验证。
那个按钮，我也有一个
Adam 说他 2023 年注册 DEV 那会儿，Settings 里有个生成 API key 的按钮。他点开过，看了两眼，不知道干嘛用，也没去翻文档，就关掉了。
后来他想把文章挂到自己站点上，才发现官方给了一个公开地址，直接 fetch 就能拿到文章列表，压根不用 key：
// DEV 文档里给的那个公开地址，不用带 key，直接请求就行
const res = await fetch(publicArticlesUrl);
const posts = await res.json();
看到这段我笑了一下，我那个 key 大概也是这么躺着过来的。
他当时的结论是"展示文章不用 key"，然后就搁下了。直到前段时间看到 @ketanchavan 的一篇文章，才想到要做浏览量展示——也才知道公开地址那条路是不返回浏览量的。
要浏览量数据，就必须走带 key 的上游接口。这句是全文最值钱的地方，剩下的都是围着它转的操作细节。
拆开看看具体怎么写
他贴的那段是个异步函数，我把它捋成四步。
第一步，key 和请求地址都放环境变量，不硬编码进代码：
DEVTO_API_KEY=你的key
DEVTO_PUBLISHED_URL=你要请求的那个上游地址
第二步，请求的时候在 header 里带上 api-key。注意这里不是 Authorization 那一套，就是字面的 api-key：
const res = await fetch(process.env.DEVTO_PUBLISHED_URL, {
headers: { "api-key": process.env.DEVTO_API_KEY },
});
第三步，检查响应状态。这一步看着多余，我一开始也没搞懂为什么要单独拆出来，后来才想明白：不检查的话，key 过期或者权限不对，你拿回来的是一个错误对象，继续往下 map，得到的是一堆 undefined，比直接抛错难查得多。
if (!res.ok) {
throw new Error(`DEV 接口返回 ${res.status}`);
}
const raw = await res.json();
第四步才是映射成自己页面要用的结构：
const posts = raw.map((p) => ({
title: p.title,
url: p.url,
views: p.page_views_count, // 字段名以你实际拿到的 JSON 为准
}));
💡 小技巧：先别急着写映射，把 raw 原样打印出来看一遍。接口返回的字段名，和你在页面上看到的叫法不一定一样，自己核一遍比照抄别人的帖子靠谱——抄错的字段名不会报错，只会安静地给你 undefined，这个坑我踩过不止一次。
怎么确认真的通了
验证方式很朴素：key 配好，写个最简脚本在本地跑一遍，看控制台有没有把文章列表和数字打出来。
拿到 401，是 key 的问题；能拿到列表但 views 全是 undefined，是映射那一步的字段名不对；连列表都没有，先回头确认自己请求的是不是上游地址——公开地址和上游地址这两个太容易写反，我第一遍就是混着写的。
本地脚本跑通 → 再往页面上接。顺序别倒过来，页面报错和接口报错混在一起的时候，你就分不清是哪一层出的问题了。
设计那部分我没打算抄
天气下落元素，Adam 自己也说没有实际用途，就是个小点缀；Tone 切到所谓未过滤版本，那是他青少年时期的说话方式，不是他现在的日常语气。好看是好看，但审美决策抄不到自己站上——我那个站最大的问题也不是不够有个性，是根本没人看，这个暂时没什么好办法，先搁着。
不过有一条评论我认。Anna 说保持与自我相关、按自己觉得必要的方式呈现自己很重要，还说她每次回看半年前的资料都觉得可以做得更好；Adam 那种过去和现在的鲜明对比，展示了成长，带点喜剧性，保留它需要一点勇气。他翻出 16 岁时放在旧微软网盘里的内容摆上去，这事比任何动画都更需要勇气，和技术没关系，但值得记一句。
还有一句让我停了一下：他说自己懂版本控制，但以图片形式一次性看所有版本更好。这个念头挺有意思，这次先不展开，回头单独记一条。
他说这篇不提供知识增量，我不同意。就那一段带 key 的请求，够我省下不少自己摸索的时间，只是它被埋在天气动画和赛博少年风格后面了。
划重点
第一，DEV 的公开地址能展示文章列表，但不带浏览量；要浏览量就必须走带 key 的上游接口，header 里是 api-key，不是 Authorization。
第二，res.ok 那一步别省。接口出错时不检查，只会给你一堆 undefined，比直接抛错难查十倍。
第三，映射之前先把原始 JSON 打印出来看一眼，字段名以实际返回为准，不要照抄别人帖子里的写法。
这篇就记到这。你要是也在自己站点上展示 DEV 文章，可以照这个顺序试一遍；遇到不懂的设置项，顺手查一行文档再关掉，总比两年后重新翻要轻松。卡在哪一步欢迎回来留言，我一起补一条笔记。