为 Javascript 中的绘图获取 API 数据

Question

我希望这不是重复的。到目前为止，我可以找到一些关于此的教程和问题 - 但通常每个人都只想将他们的代码结果记录到控制台，这对我没有帮助。

我想从 API 中获取一些数据以将其绘制在网站上。

抓取似乎工作正常，因为我可以将 fetch.then() 中的结果记录到控制台。但是（很明显）他们不会在获取之外。

我能找到的唯一解决方案是将整个事情包装在另一个函数中或以编写一个函数来处理在 .then() 中获取的数据.

我无法实现第一个想法，因为出于与上述相同的原因我无法 return 任何事情（数据不会使其超出 .then() 之外）。

第二个有问题，因为我只是想将几个 .json 条目的结果绘制到 Plotly 图中。老实说，我不知道如何将这个 放在函数中 。

                    // Arrays for results
                    var sugars = [];
                    var times  = [];
            
                    // fetch the BG data from the API and write results into arrays
                    fetch(url)
                        .then((resp) => {return resp.json()})
                        .then(  (result) => {
                                // read glucose values from json
                                // logging the results/sugars/times to console from here works!
                                for (let i = 0; i < n_entries; i++) {sugars[i] = result[i]["sgv"]}
                                for (let i = 0; i < n_entries; i++) {times[i]  = -i * timestep} 
                        });

                    var x1;
                    var y1;
                    
                    /*
                    // Dummy data to test plotly, these WORK for some reason.
                    x1 = [0, -5, -10, -15, -20];
                    y1 = [123, 119, 113, 107, 102];
                    */
                
                    // These values, however, don't work:
                    /*
                    x1 = times;
                    y1 = sugars;
                    
                    // this yields 'undefined' errors:
                    console.log(times) 
                    */

Answer 1

也许您可以尝试将提取和 return 数据分离到一个函数中，您可以在其中使用数据来执行您想要的操作。您可以尝试这样的操作-我认为这与其他人的评论相同。

//make the fetch and return response data as json
async function getData() {
    let url = 'your url';
    try {
        let resp = await fetch(url);
        return await resp.json();
    } catch (error) {
        console.log(error);
    }
}

//do whatever you want with the data response
async function myFunc() {
    let data = await getData();

    //do some stuff with your data here
}

//call the function
myFunc();

如果卡住就看看this link

为 Javascript 中的绘图获取 API 数据

Fetch API data for plotly in Javascript

javascript

api

asynchronous

fetch

plotly.js