求Alpha Vantage数据获取与展示的JavaScript代码示例

没问题！我来给你一个完整的可运行示例，帮你搞定从Alpha Vantage获取数据并优雅展示JSON的问题——之前我自己做类似项目时也碰到过JSON展示乱糟糟的情况，用<pre>标签格式化是个绝佳的解决办法。

第一步：准备工作 #

• 先去Alpha Vantage官网免费申请一个API密钥（免费版足够个人测试使用）
• 确定你要调用的API接口，比如我们下面用股票日度时间序列数据的接口TIME_SERIES_DAILY

完整代码示例 #

下面是包含HTML和JavaScript的完整代码，你可以直接复制到本地HTML文件中运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Alpha Vantage 数据展示</title>
    <style>
        #result {
            width: 90%;
            height: 400px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 20px;
            font-family: monospace;
        }
        button {
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="fetchBtn">获取股票数据</button>
    <div id="result"></div>

    <script>
        // 替换成你自己的Alpha Vantage API密钥
        const API_KEY = 'YOUR_API_KEY';
        // 目标股票代码（这里用苹果公司的股票AAPL示例）
        const SYMBOL = 'AAPL';
        // API端点
        const API_URL = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${SYMBOL}&apikey=${API_KEY}`;

        const fetchBtn = document.getElementById('fetchBtn');
        const resultDiv = document.getElementById('result');

        fetchBtn.addEventListener('click', async () => {
            try {
                // 发起请求
                const response = await fetch(API_URL);
                if (!response.ok) {
                    throw new Error(`请求失败: ${response.status}`);
                }
                // 解析JSON数据
                const data = await response.json();

                // 检查API是否返回错误信息
                if (data['Error Message']) {
                    resultDiv.innerHTML = `<p style="color: red;">错误：${data['Error Message']}</p>`;
                    return;
                }

                // 格式化JSON并展示，用<pre>标签保留格式
                const formattedJson = JSON.stringify(data, null, 2);
                resultDiv.innerHTML = `<pre>${formattedJson}</pre>`;
            } catch (error) {
                // 处理网络错误或其他异常
                resultDiv.innerHTML = `<p style="color: red;">请求出错：${error.message}</p>`;
            }
        });
    </script>
</body>
</html>

代码关键点解释 #

• API密钥替换：一定要把代码里的YOUR_API_KEY换成你自己从Alpha Vantage获取的密钥，否则请求会失败
• JSON格式化展示：用JSON.stringify(data, null, 2)把JSON对象转换成带缩进的字符串，再放到<pre>标签里，这样展示出来的JSON结构清晰，可读性极强
• 错误处理：包含了网络错误、HTTP状态错误以及API返回的错误信息处理，避免页面因为异常崩溃
• 样式优化：给展示区域加了滚动条和等宽字体，让JSON内容更易读

注意事项 #

• Alpha Vantage免费版有调用次数限制（每分钟最多5次，每天最多500次），测试时注意不要超过限制
• 如果本地直接打开HTML文件出现跨域错误，可以用VS Code的Live Server插件或者本地HTTP服务器来运行页面，避免CORS问题

内容的提问来源于stack exchange，提问作者Pj Mischuk