如何使用React和Axios从SCB开放API获取指定年份的瑞典KPI数据

首先明确你当前请求拿到的是数据集元数据，不是实际KPI数值：瑞典统计局SCB的开放API需要先通过GET请求获取元数据了解查询维度，再发送POST查询请求才能拿到具体的统计数值。你之前读取的response.data.variables是元数据里的维度说明，variables[1]对应时间维度，所以只能拿到年份列表，不存在实际KPI数值。

具体实现步骤 #

• 第一步：构造SCB标准查询体，指定你要获取的KPI指标和时间范围
• 第二步：用POST方式请求API地址，携带查询体
• 第三步：解析返回结果，response.data.data数组中存储了所有年份对应的KPI数值，每条数据的key数组第二个元素为年份，values数组第一个元素为对应KPI值

修改后的完整代码 #

import React,{useState} from 'react';
import './App.css';
import Axios from 'axios';

function App() {

const [KPI, setKPI] = useState("");

  const getKPI = () => {
    // 构造查询体，获取全部年份的KPI指标
    const queryBody = {
      "query": [
        {
          "code": "ContentsCode",
          "selection": {
            "filter": "item",
            "values": ["PR0101A1"]
          }
        },
        {
          "code": "Tid",
          "selection": {
            "filter": "all",
            "values": ["*"]
          }
        }
      ],
      "response": {
        "format": "json"
      }
    }
    // 发送POST请求获取实际数据
    Axios.post("http://api.scb.se/OV0104/v1/doris/en/ssd/PR/PR0101/PR0101A/KPIFastAmed", queryBody)
    .then((response) => {
      // 示例取最新一年的KPI，数组最后一条就是最新数据
      const latestData = response.data.data[response.data.data.length - 1]
      const year = latestData.key[1]
      const kpiValue = latestData.values[0]
      setKPI(`${response.data.title} ${year}年: ${kpiValue}`)
    });
  }

  return (<div><h1>{KPI}</h1><button onClick={getKPI}>获取KPI</button></div>);
}

export default App;

补充说明 #

如果需要获取指定年份的KPI，只需要修改Tid维度的values数组为对应年份即可，比如要获取2022年的KPI，就将values设为["2022"]。
本地开发如果遇到跨域问题，可以在React项目的package.json中配置代理："proxy": "http://api.scb.se"，请求时把URL改成/OV0104/v1/doris/en/ssd/PR/PR0101/PR0101A/KPIFastAmed即可。

内容的提问来源于stack exchange，提问作者Fredrik Fischer