当前位置：首页 > news >正文

前端 fetch API 调用 Tushare 的数据接口获取免费的基金股票信息数据

news 来源：原创 2025/6/6 17:38:10

要在前端使用 JavaScript 的 fetch API 调用 Tushare 的数据接口，您需要遵循以下步骤：

1. 注册 Tushare 账号并获取 Token

首先，访问 Tushare 官网注册账号。注册成功后，登录账号，在个人中心获取您的 API Token。
在这里插入图片描述

在这里插入图片描述

2. 构建请求参数

Tushare 的 API 接口采用 POST 请求方式，参数需要以 JSON 格式传递。以下是一个示例请求参数：

{
  "api_name": "stock_basic",
  "token": "您的 Tushare Token",
  "params": {
    "list_status": "L",
    "exchange": "SSE"
  },
  "fields": "ts_code,symbol,name,area,industry,list_date"
}

在上述参数中：

api_name：指定要调用的接口名称，例如 stock_basic。
token：您的 Tushare Token。
params：接口所需的参数。
fields：需要返回的字段。

3. 使用 fetch 发送 POST 请求

在前端 JavaScript 中，使用 fetch API 发送 POST 请求，传递上述参数。以下是示例代码：

const url = 'http://api.tushare.pro';

const params = {
  api_name: 'stock_basic',
  token: '您的 Tushare Token',
  params: {
    list_status: 'L',
    exchange: 'SSE'
  },
  fields: 'ts_code,symbol,name,area,industry,list_date'
};

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(params)
})
  .then(response => response.json())
  .then(data => {
    if (data.code === 0) {
      console.log('请求成功:', data.data);
    } else {
      console.error('请求失败:', data.msg);
    }
  })
  .catch(error => {
    console.error('请求错误:', error);
  });

在上述代码中：

url：Tushare API 的请求地址。
params：请求参数，需根据实际需求进行调整。
fetch：发送 POST 请求，body 中传递 JSON 格式的参数。
response.json()：将响应转换为 JSON 格式。
data.code：检查返回的状态码，0 表示成功。
data.data：获取返回的数据。

4. 处理响应数据

根据接口返回的数据结构，您可以在 .then(data => { ... }) 中处理返回的数据。例如，您可以将数据渲染到网页上，或者进行其他操作。

注意事项：

跨域问题：由于浏览器的同源策略，直接在前端调用 Tushare 的 API 可能会遇到跨域请求限制。为解决此问题，您可以：
- vue项目中开发环境调用可以配置代理来解决
```
proxy: {
    '/api': {
      target: 'https://api.tushare.pro',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
```
- 在服务器端代理请求，即前端请求您的服务器，服务器再请求 Tushare 的 API，然后将结果返回给前端。
- 使用 Tushare 提供的 JavaScript SDK，如 tushare.js，该 SDK 封装了 API 调用，可能已处理了跨域问题。
- 使用 JSONP 或其他跨域技术，但这些方法可能存在安全隐患，需谨慎使用。
API 限制：Tushare 的免费 API 调用次数有限制，具体限制请参考 Tushare 的官方文档。
错误处理：在实际开发中，建议添加更多的错误处理逻辑，以确保应用的健壮性。