无法从ajax请求返回数据

Question

在此脚本中，我正在提出两个ajax请求。在第一个请求中，我将根据用户名获得用户的性别。在第二个API中，我将使用unsplash API根据用户的性别显示用户随机照片。数据可以通过API完美传输，但是我无法将该数据返回给另一个函数。

在此示例中，我无法将imgUrl变量返回到另一个函数：（从第8行向下）

let boxHandle = document.getElementById('box');
let btnHandle = document.getElementById('nameBtn');

const userName = document.forms.user.userName;

btnHandle.addEventListener('click', function(e){
    e.preventDefault();
    if (!(userName.value == ''|| userName.value == null)){
        boxHandle.setAttribute('style', 'display:block');
        findGender(userName.value);
    }
}, false);

function findGender(userName){ 
    let gender = '';
    const xhr = new XMLHttpRequest;
    xhr.open('GET', `https://genderapi.io/api/?name=${userName}`);
    xhr.send();
    xhr.onload = function(){
        const genderData = JSON.parse(xhr.responseText);
        gender = genderData.gender;
    }
    boxHandle.childNodes[1].childNodes[1].setAttribute('src', getImages(gender));
}

function getImages(gender) {
    if (gender != 'null' || gender != null){
        let imgUrl;
        const xhr = new XMLHttpRequest;
        xhr.open('GET', `https://api.unsplash.com/photos/random/?query=${gender}&client_id=api_key`);
        xhr.send();
        xhr.onload = function() {
           const imgObj = JSON.parse(xhr.responseText);
           imgUrl = imgObj.urls.regular;
// This imgUrl I need to return to findGender().
        }
        return imgUrl;
    }
    else {
        return 'error.jpg';
    } 
}