Как получить данные с сервера на чистом js?

Question

В функции GetWord получаю информацию с сервера в формате json.

function getWord(){
    const request = new XMLHttpRequest();
    const url = "get-word.php";
    request.responseType = "json";
    request.open("POST", url, true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send();
    console.log(request);
    console.log(request.response);
    return request.response;
}

Проблема заключается в том что при выводе в консоль объекта request все так как надо:

XMLHttpRequest
    onabort: null
    onerror: null
    onload: null
    onloadend: null
    onloadstart: null
    onprogress: null
    onreadystatechange: null
    ontimeout: null
    readyState: 4
    response: {id: "1", ru: "зима", en: "winter", rate: "0"}
    responseText: (...)
    responseType: "json"
    responseURL: "http://dictionary/get-word.php"
    responseXML: (...)
    status: 200
    statusText: "OK"
    timeout: 0
    upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}
    withCredentials: false
    __proto__: XMLHttpRequest

а когда я хочу получить request.response возвращается null. Помогите разобраться, пожалуйста

Answer 1

Дело в том что данные XMLHttpRequest можно будет получить в onload методе. В вашем случае вы отправляете запрос и тут же хотите ответ это не php а JavaScript он хоть и однопоточный но все же асинхронный. Хотите синхронно то поставьте 3 параметр в open false.

request.open("POST", url, false);

Answer 2

async function getWord() {
    const options = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
    };

    try {
        return await fetch('get-word.php', options);
    } catch (error) {
        console.log(error.message);
    }
}

(async function() {
    const words = await getWord();
    console.log(words);
})();

function getWord() {
    const options = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
    };
    
    return new Promise((resolve, reject) => {
        fetch('get-word.php', options)
            .then(response => resolve(response))
            .catch(error => reject(error));
    });
}

(function() {
    getWord()
        .then(response => console.log(response))
        .catch(error => console.log(error.message));
})();

Answer 3

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

БЛОГ НА HUSL

Как получить данные с сервера на чистом js?

Ответы (3 шт):