Как заставить функцию ждать пока другая не вернёт результат?

Question

[RandomProgrammer]

Я новичок в js. У меня есть код который получает комментарии с сервера:

"use strict"

let request_count = 0;

let do_get_comment = true;

window.addEventListener("scroll", function(){
	if (do_get_comment){
              do_get_comment = get_comment()       [1]
        }
});


function get_comment(){
	let comment = new XMLHttpRequest();
	comment.open("GET", document.URL+"comments/"+request_count+"/");
	comment.send();
  let result;
	comment.onload = function(){
		if (comment.status == 200){
			set_comment(...);
			request_count++;
                        result =  true;
			}
		}
		else{
			result =  false;
		}
	}
        return result; [2]
}

я хочу чтобы в строчке [1] do_get_comment получала результат вызова get_comment только после того как onload выполнится, т.е. строчка [2] ждёт onload. я также читал про колбэки, но не знаю как их здесь применить.

Answer 1

[Александр]

Пример 1 - fetch, async/await

async function start() {
  const user = await getUser();
  
  console.log(user);
}

function getUser() {
  return fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json());
}

start();
/*
{
  id: 1,
  name: 'Leanne Graham',
  username: 'Bret',
  email: '[e-mail]',
  address: {
    street: 'Kulas Light',
    suite: 'Apt. 556',
    city: 'Gwenborough',
    zipcode: '92998-3874',
    geo: { lat: '-37.3159', lng: '81.1496' }
  },
  phone: '1-770-736-8031 x56442',
  website: 'hildegard.org',
  company: {
    name: 'Romaguera-Crona',
    catchPhrase: 'Multi-layered client-server neural-net',
    bs: 'harness real-time e-markets'
  }
}
*/

или

Пример 2 - XHR, async/await

async function start() {
  const user = await getUser();
  
  console.log(user);
}

function getUser() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
    xhr.addEventListener('load', () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject(xhr.response);
      }
    });
    
    xhr.send();
  });
}

или

Пример 3 - XHR, callback

function start() {
  getUser(user => {
    console.log(user);
  });
}

function getUser(callback) {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
  xhr.addEventListener('load', () => {
    if (xhr.status === 200) {
      callback(JSON.parse(xhr.response));
    } else {
      callback(xhr.response);
    }
  });

  xhr.send();
}

start();

Для варианта с функцией обратного вызова, чаще всего используют два параметра: первый - ошибку, второй - результат, тогда код будет выглядеть так:

Пример 4 - XHR, callback с обработкой ошибок

function start() {
  getUser((error, user) => {
    if (!error) {
      console.log(user);
    }
  });
}

function getUser(callback) {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
  xhr.addEventListener('load', () => {
    if (xhr.status === 200) {
      callback(null, JSON.parse(xhr.response));
    } else {
      callback(new Error(xhr.response));
    }
  });

  xhr.send();
}

start();

Также, для XHR надо дополнительно обрабатывать ошибки.

Answer 2

[Red_Devi1]

"use strict"

let requestCount = 0;

window.addEventListener('scroll', async () => {
	const result = await getComment();

	console.log(result);
});


function getComment() {
	return new Promise(((resolve, reject) => {
		const xhr = new XMLHttpRequest();
		xhr.open('GET', `${document.URL}comments/${requestCount}/`);
		xhr.onload = function () {
			if (xhr.status === XMLHttpRequest.DONE) {
				set_comment(...);
				requestCount++;

				resolve(xhr.response);
			} else {
				reject(xhr.status);
			}
		};
		xhr.send();
	}));
}

Изучите Fetch API, это упростит жизнь

Answer 3

[chaosmonk]

https://developer.mozilla.org/en-US/docs/Web/API/X...

var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false); // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {
console.log(request.responseText);
}