Question

我正在尝试通过chartJS显示使用变量year1 / 2/3从API获得的值。由于某些原因，当我在调用“ getData”后控制台日志时，var 1/2/3的值是不确定的。

$(function() {

    var year1; /* 1998 */

    function getData() {

      /* Get First Year */
      $.getJSON('https://data.gov.sg/api/action/datastore_search?resource_id=26e9766b-a42d-468c-9c25-88d89b850823&q=1998', function(result) {

        year1 = (result.result.records[0].mobile_penetration_rate);

      })

    }

    getData();

    console.log(year1);

    var ctx = document.getElementById('penetration-chart');
    var myLineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['1998'],
        datasets: [{
          label: '% of Mobile Penetration',
          data: [year1],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  })

调用getData后记录期望的变量

Answer 1

您必须在api调用的成功回调方法内进行console.log，因为$.getJSON方法异步调用api并继续执行而无需等待API结果。从API调用返回响应后，将使用响应对象执行回调方法

$.getJSON('https://data.gov.sg/api/action/datastore_search?resource_id=26e9766b-a42d-468c-9c25-88d89b850823&q=1998', function(result) {

      year1 = (result.result.records[0].mobile_penetration_rate);
      console.log(year1);

    })

getData();

Answer 2

API调用是异步完成的，这意味着year1到console.log的时间尚未定义，而console.log是同步执行的。您可以等待提取操作运行，然后执行其余代码，这将解决您的问题：（注意，返回$ .getJSON，这将返回由.getJSON创建的承诺，.then将在执行之前等待解析）

var year1; /* 1998 */

    function getData() {

        /* Get First Year */
        return $.getJSON('https://data.gov.sg/api/action/datastore_search?resource_id=26e9766b-a42d-468c-9c25-88d89b850823&q=1998', function(result) {

             year1 = (result.result.records[0].mobile_penetration_rate);

        })

    }

getData().then(()=> {
    console.log(year1);
    // All other code that depends on year 1
});

无法操作全局变量（返回未定义）

2 个答案: