深入理解JavaScript Fetch API的异步特性与数据处理

let stockPriceData = new Map();
const generateMapofStockPriceData = async () => {
    await fetch('https://64607244fe8d6fb29e30eaaf.mockapi.io/Xerodha/V1/StockPriceData')
        .then(response => response.json())
        .then(data => data.forEach(element => {
            console.log(element.StockPrice);
            stockPriceData.set(element.StockName, element.StockPrice);
        }))
        .catch(error => console.log(error));
}

generateMapofStockPriceData(); // 异步函数被调用
console.log(stockPriceData); // 立即执行，此时Map可能为空
console.log(stockPriceData.get("ASIANPAINT")); // 立即执行，因此为undefined

let stockPriceData = new Map();

const generateMapofStockPriceData = async () => {
    try {
        // 使用 await 等待 fetch 请求完成并获取响应
        const response = await fetch('https://64607244fe8d6fb29e30eaaf.mockapi.io/Xerodha/V1/StockPriceData');
        // 使用 await 等待响应体解析为 JSON
        const data = await response.json();

        // 数据现在已经可用，可以安全地进行处理
        data.forEach(element => {
            console.log(element.StockPrice);
            stockPriceData.set(element.StockName, element.StockPrice);
        });

        // 在数据填充完成后，再执行依赖于 stockPriceData 的操作
        console.log("Map填充完成:", stockPriceData);
        console.log("ASIANPAINT 价格:", stockPriceData.get("ASIANPAINT"));

    } catch (error) {
        // 捕获请求或解析过程中可能发生的错误
        console.error("数据获取失败:", error);
    }
}

// 调用异步函数，但外部的代码不会等待它完成
generateMapofStockPriceData();

// 注意：如果外部代码需要依赖 generateMapofStockPriceData 的结果，
// 那么它本身也需要是异步的，或者通过回调/Promise链来处理。
// 例如，如果要在外部访问 stockPriceData，可以这样：
async function main() {
    await generateMapofStockPriceData(); // 等待数据填充完成
    console.log("在外部访问Map (确保已填充):", stockPriceData);
    console.log("在外部访问ASIANPAINT (确保已填充):", stockPriceData.get("ASIANPAINT"));
}

// 调用主函数来启动整个异步流程
// main(); // 如果需要外部依赖，取消注释此行

let stockPriceData = new Map();

const generateMapofStockPriceDataWithCallback = async (callbackFn) => {
    try {
        const response = await fetch('https://64607244fe8d6fb29e30eaaf.mockapi.io/Xerodha/V1/StockPriceData');
        const data = await response.json();

        data.forEach(element => {
            console.log(element.StockPrice);
            stockPriceData.set(element.StockName, element.StockPrice);
        });

        console.log("Map填充完成 (通过回调前):", stockPriceData);
        console.log("ASIANPAINT 价格 (通过回调前):", stockPriceData.get("ASIANPAINT"));

        // 在数据处理完成后，调用回调函数
        if (callbackFn) {
            callbackFn();
        }

    } catch (error) {
        console.error("数据获取失败:", error);
    }
}

// 调用函数并传入一个回调函数
generateMapofStockPriceDataWithCallback(() => {
    console.log("回调函数执行：数据已准备好。");
    console.log("在回调中访问Map:", stockPriceData);
    console.log("在回调中访问ASIANPAINT:", stockPriceData.get("ASIANPAINT"));
});

// 这里的代码仍然会立即执行，在回调函数之前
console.log("函数调用后立即执行的代码，数据可能尚未准备好。");

// 示例：返回Promise以便外部链式调用
const getStockPriceData = async () => {
    let stockPriceData = new Map(); // 局部变量
    try {
        const response = await fetch('https://64607244fe8d6fb29e30eaaf.mockapi.io/Xerodha/V1/StockPriceData');
        const data = await response.json();
        data.forEach(element => {
            stockPriceData.set(element.StockName, element.StockPrice);
        });
        return stockPriceData; // 返回Map
    } catch (error) {
        console.error("数据获取失败:", error);
        throw error; // 抛出错误以便外部捕获
    }
}

// 外部使用
(async () => {
    try {
        const myStockMap = await getStockPriceData();
        console.log("在外部获取到的完整Map:", myStockMap);
        console.log("在外部获取到的ASIANPAINT价格:", myStockMap.get("ASIANPAINT"));
    } catch (error) {
        console.error("外部捕获错误:", error);
    }
})();