我做了一个前端股票行情 SDK:stock-sdk(浏览器和 Node 都能跑)

如果你也做过股票行情相关的小工具/小 Demo,大概率踩过我踩过的坑:

想在前端搞个行情看板、做个 TradingView/ECharts 的数据源、或者在 Node 里定时抓取一下数据验证策略,结果发现------要么生态全在 Python,要么接口返回格式又乱又"奇怪",再加上编码(GBK)、批量、并发、跨域这些现实问题,一下就把人劝退了。

所以我干脆自己做了一个:stock-sdk

目标很简单:让前端工程师用最熟悉的 JavaScript / TypeScript,直接在浏览器或 Node.js 里优雅地拿到行情和 K 线数据。

下面这篇就当我自己的一篇"安利帖",顺便把我觉得最有价值的点说清楚。


我到底做了什么?

stock-sdk 是一个 TypeScript SDK,主要特点是:

  • 零依赖:纯 TS 实现,不靠第三方运行时包
  • 双端运行:浏览器 + Node.js 18+ 都可以直接用(同时提供 ESM / CJS)
  • 轻量:压缩后体积很小(文档里写的是 < 20KB)
  • 类型友好:接口类型比较完整,写 TS 的时候体验很顺

数据能力上,我把常用的"看盘/做图/做小策略验证"需要的东西都打包进来了:

  • 实时行情:A 股/指数、港股、美股、基金
  • K 线:日/周/月历史 K 线;分钟 K 线(1/5/15/30/60);当日分时走势
  • 板块:行业板块/概念板块(列表、实时、成分股、K 线、分时)
  • 扩展数据:资金流向、盘口大单占比、交易日历
  • 批量能力:代码列表、全市场批量行情(带并发控制)
  • 技术指标:MA、MACD、BOLL、KDJ、RSI、WR、BIAS、CCI、ATR(既支持"只算指标",也支持"拿到 K 线顺便把指标算好")

先来 10 行:拿 A 股实时行情

ts 复制代码
import { StockSDK } from 'stock-sdk';

const sdk = new StockSDK();

const quotes = await sdk.getSimpleQuotes([
  'sh000001',
  'sz000858',
  'sh600519',
]);

quotes.forEach((q) => {
  console.log(`${q.name}: ${q.price} (${q.changePercent}%)`);
});

我自己特别喜欢的一点是:它不逼你搭后端。很多时候我只是想快速把行情跑通,看看页面效果、验证交互,不想为了"拉一口数据"专门上个服务。


我最常用的两个场景

1)前端直接做一个行情看板

拿行情 + 画图,本质就是把数据源"稳定地喂给 UI"。SDK 里已经把很多脏活(编码、解析、类型、批量)包掉了,前端只需要关注渲染。

ts 复制代码
const sdk = new StockSDK({ timeout: 8000 });

2)Node 里跑一个定时任务:抓全市场行情

这个能力我一开始就是为了自己用:全市场(5000+)行情抓一次,如果没有批量和并发控制,体验会很难受。

ts 复制代码
const allQuotes = await sdk.getAllAShareQuotes({
  batchSize: 300,
  concurrency: 5,
  onProgress: (completed, total) => {
    console.log(`进度: ${completed}/${total}`);
  },
});

console.log(`共获取 ${allQuotes.length} 只股票`);

这里的 batchSize/concurrency 我建议按你自己的网络情况稍微调一下:

并发太高不一定更快,反而容易触发限制或者让失败率上升。


技术指标:我不想再手动"补数据"了

做指标最烦的点是:你想看 2024-01-01 之后的数据,但指标计算需要更早的"前置 K 线"来预热。手写的时候经常会漏,导致头一段数据不准。

我在 getKlineWithIndicators 里做了一件我自己很在意的事情:
根据你选的指标,自动计算所需的最大前置天数,扩展请求范围,算完后再按你想要的日期过滤返回。

用起来就是这样:

ts 复制代码
const data = await sdk.getKlineWithIndicators('sz000858', {
  startDate: '20240101',
  endDate: '20241231',
  indicators: {
    ma: { periods: [5, 10, 20, 60] },
    macd: true,
    boll: true,
    kdj: true,
  },
});

console.log(data[0].date, data[0].ma?.ma5, data[0].macd?.dif);

另外它还能自动识别市场(A/HK/US),少写一些分支逻辑,这点在写脚本时很省心。


我做这个 SDK 时刻意坚持的"工程化小原则"

这一段有点像自言自语,但我觉得挺重要:

  • 不用依赖就不用依赖:浏览器和 Node 都能跑,少一层依赖就少一层不确定性
  • 用原生能力把坑填平 :比如腾讯接口有 GBK,我就直接用 TextDecoder 解码;请求超时用 AbortController
  • 批量就要能控并发:全市场数据这种需求,没并发控制很难用
  • TS 的体验要好 :我希望你在 IDE 里看到的不是一坨 any,而是比较清晰的字段提示

这些东西单拎出来都不是什么黑科技,但它们组合起来,会让"从 0 到跑通"的时间明显变短。


浏览器里怎么用?甚至可以 CDN 直引

如果你只是想快速写个静态页 Demo,可以直接用 unpkg

html 复制代码
<script type="module">
  import { StockSDK } from 'https://unpkg.com/stock-sdk/dist/index.js';

  const sdk = new StockSDK();
  const quotes = await sdk.getFullQuotes(['sz000858', 'sh600519']);
  console.log(quotes);
</script>

快速给你一个"接口导航"

如果你想先确认有没有你要的能力,可以先从这些入口方法看起:

  • 行情:getSimpleQuotes / getFullQuotes / getHKQuotes / getUSQuotes / getFundQuotes
  • K 线:getHistoryKline / getMinuteKline / getTodayTimeline / getHKHistoryKline / getUSHistoryKline
  • 指标:getKlineWithIndicators + 一套独立 calcXX 指标函数
  • 板块:getIndustryList / getIndustrySpot / getIndustryConstituents / getConceptList ...
  • 批量:getAShareCodeList / getAllAShareQuotes / getAllHKShareQuotes / getAllUSShareQuotes

更细的说明我都放在官网文档里了:


最后:欢迎来用,也欢迎来提需求

我做 stock-sdk 的心态一直很简单:先把"前端拿行情这件事"做得干净、轻巧、可复用

如果你正好也在做行情看板、数据可视化、或者 Node 侧的小脚本,欢迎直接拿去用;如果你遇到字段缺失、接口变动、或者想要更多市场/更多数据源,也可以在 GitHub 里提 Issue,我会尽量跟进。

如果它帮你省了时间,也欢迎点个 Star,让我知道这东西不是只有我自己在用。

相关推荐
KlayPeter1 天前
前端数据存储全解析:localStorage、sessionStorage 与 Cookie
开发语言·前端·javascript·vue.js·缓存·前端框架
沉默-_-1 天前
从小程序前端到Spring后端:新手上路必须理清的核心概念图
java·前端·后端·spring·微信小程序
裴嘉靖1 天前
前端获取二进制文件并预览的完整指南
前端·pdf
李剑一1 天前
uni-app使用瓦片实现离线地图的两种方案
前端·trae
木易 士心1 天前
深入剖析:按下 F5 后,浏览器前端究竟发生了什么?
前端
几何心凉1 天前
离开舒适区之后:从三年前端到 CS 硕士——我在韩国亚大读研的得失
前端·人工智能·年度总结
小二·1 天前
前端测试体系完全指南:从 Vitest 单元测试到 Cypress E2E(Vue 3 + TypeScript)
前端·typescript·单元测试
pas1361 天前
18-mini-vue element
前端·vue.js·ubuntu
哟哟耶耶1 天前
Plugin-webpack内置功能split-chunks-plugin配置打包代码分割
前端·webpack·node.js