在此脚本中,我正在提出两个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';
}
}