Как записать данные из JSON в переменную?

Question

[Анатолий Выскуб]

Всем привет. Никак не могу понять как выудить данные из функции, чтобы использовать их в другом месте.

getUser();

function getUser() {
    let data = {"username": "user", "avatarUrl": "none", "messageCount": 0};
    sendRequest("/user", data)
}

function sendRequest(method, data) {
    let http = new XMLHttpRequest();
    http.open("POST", "http://localhost:9000/api" + method, true);
    http.setRequestHeader("Content-Type", "application/json");

    http.responseType = 'json';
    http.onreadystatechange = function(){
        responseJson = http.response;
        console.log(responseJson);
        
        document.getElementById('json').innerText = `Ник: ${responseJsonGlobal.username}, \n сообщений: ${responseJsonGlobal.messageCount}`;
        document.getElementById('jsonAva').src = responseJsonGlobal.avatarUrl;
    };

    let jsonData = JSON.stringify(data);
    http.send(jsonData);
}

Есть вот такой код. Это POST запрос к беку, он возвращает нам JSON, который парсится и выводится в консоль, а потом и в HTML. Мне необходимо перенести запись в HTML из SendRequest в GetUser и GetTopEmoji. Чтобы в зависимости от запроса записывать данные из JSON в то или иное место на страничке. Но запись в HTML работает только внутри

http.onreadystatechange = function(){
        responseJson = http.response;
        console.log(responseJson);
        
        document.getElementById('json').innerText = `Ник: ${responseJsonGlobal.username}, \n сообщений: ${responseJsonGlobal.messageCount}`;
        document.getElementById('jsonAva').src = responseJsonGlobal.avatarUrl;
    };

Пробовал использовать var переменную, чтобы в неё записать данные с responseJson. Пробовал сам responseJson сделать глобальной переменной, никак не получается.
В js не силён, палками не бейте. Я знаю, что это уже устаревший способ делать запросы. Поэтому я попробовал иначе (скрин внизу).

fetch("http://localhost:9000/api/user", {
    method: "POST",
    headers: {"Accept": "application/json", "Content-Type": "application/json"},
    body: JSON.stringify({
        username: "user",
        avatarUrl: "none",
        messageCount: 0
    })
})
    .then(response => response.json())
    .then(responseJson => console.log(responseJson))

Тут я пробовал убрать вывод в консоль и написать что-то типа:

.then(responseJson => {b = responseJson})

Чтобы использовать JSON в другом месте кода, но везде получаю Undefined

Заранее спасибо за ответ! Всем добра!

Answer 1

[Алексей]

Используй асинхронную функцию в которой будет промис
Что то типо

const sendRequest = async () => {
    const response = await fetch("http://localhost:9000/api/user", {
    method: "POST",
    headers: {"Accept": "application/json", "Content-Type": "application/json"},
    body: JSON.stringify({
        username: "user",
        avatarUrl: "none",
        messageCount: 0
    })
})
// делаем что то с response 
}

Потом делайте что хотите с ответом сервера

Answer 2

[Надим]

Чтобы использовать JSON в другом месте кода, но везде получаю Undefined

Конечно получаете, потому что ответ на запрос еще не пришел, а вы пытайтесь вперед коня переменную смотреть. То есть грубо говоря вы фактически отправляйте запрос и не ждете ответа, сразу смотрите переменную, но это так не работает, на выполнение запроса нужно время.