要在前端使用 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 的官方文档。

• 错误处理：在实际开发中，建议添加更多的错误处理逻辑，以确保应用的健壮性。