JS新手求助：API数据模块化后调用无法渲染图表问题

核心问题与修复步骤 #

1. fetchApi函数的异步解析错误 #

你的fetchApi函数里，response.json()是异步操作但未加await，导致返回的是未解析的Promise对象，而非实际JSON数据。

错误代码：

export const fetchApi = async (url) => {
    const response = await fetch(url);
    const data = response.json(); // 缺少await，返回Promise而非数据
    return data;
}

修复后：

export const fetchApi = async (url) => {
    const response = await fetch(url);
    const data = await response.json(); // 添加await解析JSON
    return data;
}

2. 主文件重复解析JSON的错误 #

fetchApi已经返回了解析好的JSON数据，你却再次调用response.json()——此时response是普通对象，根本没有json()方法，直接抛出错误中断后续逻辑。

错误代码：

const response = await fetchApi('https://api.gael.cloud/general/public/clima');
const weather = await response.json(); // 多余且报错的操作

修复后：

const weather = await fetchApi('https://api.gael.cloud/general/public/clima'); // 直接接收解析后的数据

3. 循环变量未声明的全局污染 #

for循环里的i未用let/const声明，会成为全局变量，可能引发意外问题。

错误代码：

for (i = 0; i < 8; i++) {

修复后：

for (let i = 0; i < 8; i++) { // 用let声明局部变量

4. 未触发getData函数 #

你定义了getData函数但从未调用，导致数据获取和图表渲染逻辑完全没执行。

修复：在主文件末尾添加调用：

getData();

完整修复后代码 #

fetch_2.js

export const fetchApi = async (url) => {
    const response = await fetch(url);
    const data = await response.json();
    return data;
}

主JS文件

import { fetchApi } from "./fetch_2";

async function getData() {
    const weather = await fetchApi('https://api.gael.cloud/general/public/clima');

    const regions = [];
    const temperatures = [];

    for (let i = 0; i < 8; i++) {
        regions.push(weather[i].Estacion);
        temperatures.push(weather[i].Temp);
    }

    new Chart(document.getElementById("bar-chart"), {
        type: 'bar',
        data: {
            labels: regions,
            datasets: [
                {
                    label: "regiones",
                    backgroundColor: color => {
                        return color.raw >= 15 ? 'orange' : 'lightblue'
                    },
                    data: temperatures
                }
            ]
        },
        options: {
            plugins: {
                legend: {
                    display: false,
                    color: 'white'
                }
            }
        },
    });
}

// 触发执行逻辑
getData();

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