本文将介绍如何使用 npm 包 coinman，以及如何将其应用到前端开发中，涉及到的知识点包括：React、Webpack、Styled-components、Axios 等。
什么是 coinman
coinman 是一个提供加密货币交易信息的 npm 包。它可以提供实时的比特币、以太币等加密货币的市价、涨跌幅、24 小时成交量等信息，以及一些常用指标，如 RSI、MACD 等。
coinman 的优点在于，它提供了一个简单易用的 API，可以方便地在前端项目中调用，而不需要自己写爬虫或者调用第三方 API。
安装和使用
安装 coinman 可以使用 npm：
npm install coinman
使用 coinman 首先需要导入它，并配置一些参数，比如要查询哪个币种以及调用的指标等：
-- -------------------- ---- ------- ------ ------- ---- --------- ---------------- ------- --------------- -- --------- ------- ------- ------ -- ----- ---------- - ----- ---- -- -- --------- ----------- - ------ ------ - -- ------- -- ---------------
其中，apiKey 是在 coinman 官网注册后提交申请并获取的。symbol、intervals 和 indicators 都是可选的参数，可以根据具体需要配置。
在调用 coinman.start() 后，就可以在前端项目中获得一些实时的加密货币信息了：
coinman.on('data', (data) => {
console.log(data)
})data 可以是一个包含多个时间区间的数组，每个区间里包含了查询的币种的相关信息，比如这样：
-- -------------------- ---- -------
-
-
--------- -----
------- ------
----- ------------------
----- ------------------
---- ------------------
------ ------------------
------- ------------------
----- --------------
---- - ------ ------------------- ------------- ------ ----------- ----- --
----- - ----- ------------------- ------- ------------------- ---------- ----------------- -
--
-
--------- -----
------- ------
----- --------
----- ---------
---- ---------
------ ---------
------- -------------------
----- --------------
---- - ------ ------------------ ------------- ------ ----------- ----- --
----- - ----- ------------------ ------- ------------------ ---------- ------------------ -
-
-可以看到，这里获取到了在 1 分钟和 1 小时这两个时间区间内的 BTC 信息，包括开盘价、最高价、最低价、收盘价、成交量、RSI 值和 MACD 值等。
在 React 项目中使用 coinman
下面我们将 coinman 运用到 React 项目中，使用 Styled-components 进行样式管理，同时通过 Axios 发送查询请求，并将获取到的数据进行渲染。
首先，我们需要创建一个组件，比如 Chart 组件，该组件用来显示查询到的 BTC 信息：
-- -------------------- ---- -------
------ ------ ---- -------------------
----- --------- - -----------
------- -----
----------- -----
-------------- -----
----------- - - ------ ------- -- -- -----
------ -----
---------- ---------- - ------
------- -----
-------- -----
--------------- -------
-
----- ----- - ----------
---------- -------
----------- -------
-
----- --- - -----------
----- --
-
------ ------- -------- ------- -
------ -
-----------
---------- -------------
---- ---------- - --- -----
--- ---- ---
------
------------
-
-这里我们使用 Styled-components 创建了一个 Container，里面包含了一个标题和一个 SVG 图形，该图形用来绘制 BTC 的价格曲线。
接下来，我们需要创建一个 service 文件，用来发送查询请求并获取实时的 BTC 信息。这里我们使用 Axios 实现：
import axios from 'axios'
const API_URL = 'https://api.coinman.dev'
export async function getChartData() {
const res = await axios.get(`${API_URL}/ticker/BTC`)
return res.data
}这里我们定义了一个 API_URL，用来访问 coinman 提供的 API，然后在 getChartData 中发送了一个 GET 请求，获取 BTC 的相关数据。
接着，在 Chart 组件中使用 useEffect 和 useState 来更新 BTC 数据，并用 Path 组件来绘制价格曲线：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- -------
------ ------ ---- -------------------
------ - ------------ - ---- -----------
----- --------- - -----------
------- -----
----------- -----
-------------- -----
----------- - - ------ ------- -- -- -----
------ -----
---------- ---------- - ------
------- -----
-------- -----
--------------- -------
-
----- ----- - ----------
---------- -------
----------- -------
-
----- --- - -----------
----- --
-
------ ------- -------- ------- -
----- ------ -------- - ------------
------------ -- -
----- --------- - ----- -- -- -
----- --- - ----- --------------
------------
-
-----------
-- ---
----- ------- --------- - -------------
----- -------- ---------- - -------------
----- ------- - --
----- -------- - --
----- ------- - ----------- -- ---
----- ------ - ------------------------------
----- ------- - ------------- -------------
----- ------ - ------- - ------- - --------- -------- - --------
----- ------ - --- -- -
------ --- - ----------- - ----------- - ------------ - ---------- - ---------- - ---------
-
----- ------- - -------------- ---------------- - --------
----- ----------- - ------ - - - -------- - ------------------ -- -- - - --
----- --------- - ------------------ -- -- - - -- - -----------
----- ------ - --------- ----------
----- ------ - --- -- -
------ -- - ----------- - ----------- - ---------
-
----- ------------ - ------------ -- -- -
----- - - --------------
----- - - ---------------
------ ---- --- - - --- - ---- ---- -----
--
----- -------- - ----- -
------- --------
----- -----
------------- ----
-- --------------------- ---
--
------ -
-----------
---------- -------------
---- ----------- - -------- ------------
-------------------------
----- --
------
------------
-
-这里我们使用 useEffect 来获取 BTC 数据，然后使用 useState 来更新它，接着计算出 xScale 和 yScale，用 Path 组件来绘制 BTC 的价格曲线。
最后，在 React 项目中引入 Chart 组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ ----- ---- ---------
-------- ----- -
------ -
-----
------ --
------
-
-
------ ------- ---这样就可以在前端项目中显示 BTC 的价格曲线了，效果如下：
总结
本文介绍了如何使用 npm 包 coinman，以及如何将其应用到前端开发中。我们通过 React、Webpack、Styled-components、Axios 等技术，展示了如何获取实时的 BTC 数据，并用 Path 组件将它绘制成价格曲线。
coinman 提供了一个简洁易用的 API，可以方便地在前端项目中调用。使用它可以让开发者快速获取加密货币市场的相关信息，对于开发加密货币类应用是非常有帮助的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566bd81e8991b448e3096