Ajax GIPHY API上异步回调的未定义响应

大家好，我在让回调函数返回值时遇到了问题。我使用GIPHY API返回GIF的URL，但是当我使用console.log（）返回值时，我总是得到未定义的值

// //create the src for gif
function loadGiphyData(tag, callback){
  var data;
  var request = new XMLHttpRequest();
  request.open('GET', `https://api.giphy.com/v1/gifs/search?q=${tag}&api_key=5p8A1b1szDSqAVgDP1m2dlq8z0rdO3h1&limit=10`, true);
  request.onload = function() {
    data = JSON.parse(request.responseText).data[Math.floor(Math.random()*11)].images.original.url;
    console.log(data);
    return callback(data);
  }
  request.send();
}

我已经阅读了Felix Kling关于异步如何工作的回答，并尝试实现他对回调函数的使用，但我仍然没有得到任何返回。->

任何帮助都将不胜感激，谢谢

console.log(loadGiphyData("dog", function(result) {return result;}));