我的函数将记录来自 XMLHttpRequest 的 JSON 数据，但不会 return 吗？

Question

我正在尝试访问 NHL API 进行个人项目。我遇到了 CORS 请求错误，并找到了以下解决方案来访问所有不同的站点（有些之前可以工作，有些则没有）。

我正在通过一个 link 和基于一个 the outputs 它似乎正在访问页面上的数据并以 JSON 和字符串格式显示它。唯一的问题是我不能 return 函数中的任何数据作为对象或其他方式。

最后2条日志显示undefined，函数中的2条输出了我想要的数据。我是不是遗漏了一些明显的东西，还是网站访问存在更深层次的问题？

谢谢。

function getJSON(url){
    let request = new XMLHttpRequest();
    request.open('GET', url);
    request.onload = function () {
  // Begin accessing JSON data here
  let data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
    //Start writing function here
    console.log(data);
    console.log(JSON.stringify(data));
    
    let data2 = JSON.stringify(data)
    return data2
  } else {
    console.log('error');
  }
}
request.send();
}

let data1 = getJSON("https://statsapi.web.nhl.com/api/v1/people/8476459/stats?stats=statsSingleSeason&season=20212022")
console.log(data1);
console.log(JSON.stringify(data1));

Answer 1

你正在进行异步调用，这意味着你 return 响应甚至返回之前的值，这就是为什么 data1 是 undefined

您可以查看this post了解更多信息。

对于你的情况，你可以用 Promise

包装请求

async function getJSON(url) {
  return new Promise(function (resolve, reject) {
    let request = new XMLHttpRequest();
    request.open('GET', url);
    request.onload = function () {
      // Begin accessing JSON data here
      let data = JSON.parse(this.response);
      if (request.status >= 200 && request.status < 400) {
        //Start writing function here
       
        let data2 = JSON.stringify(data)
        return resolve(data);
      } else {
        return reject('error')
      }
    }
    request.send();
  }
  )
}

async function main() {
  let data1 = await getJSON("https://statsapi.web.nhl.com/api/v1/people/8476459/stats?stats=statsSingleSeason&season=20212022")
console.log(data1);
console.log(JSON.stringify(data1)); 
}

main();

更好的方法是使用Fetch API

async function getJSON(url) {
  const data1 = await fetch(url).
    then(response => response.json());
  return data1;
}
 
async function main() {
  const result = await getJSON('https://statsapi.web.nhl.com/api/v1/people/8476459/stats?stats=statsSingleSeason&season=20212022');
  console.log(result);
}

main();

我的函数将记录来自 XMLHttpRequest 的 JSON 数据，但不会 return 吗？

My function will log JSON data from an XMLHttpRequest but won't return it?

javascript

json

get

xmlhttprequest