Могу ли я заменить однострочник jQuery.load() эквивалентным вызовом fetch()?

Question

У меня есть страница, на которой используется однострочный jQuery

$('#id').load('/url');

чтобы загрузить фрагмент в DOM в определенном месте.

Если я хочу удалить зависимость от jQuery, есть ли простой альтернативный способ сделать это - возможно, с помощью относительно нового API fetch()?

Answer 1

Сделайте это так:

fetch('/url')
  .then(response => response.text())
  .then(value => {
    document.getElementById('id').innerHTML = value
  });

Answer 2

Почти однострочник:)

;(async () => {
    document.getElementById('id').innerHTML = await (await fetch('/url')).text();
})();

чтобы найти практическое применение, вам нужно хотя бы проверить код ответа, поэтому сначала я бы реорганизовал его так

;(async () => {
    let res = await fetch('/url');
    if(res.ok){
        document.getElementById('id').innerHTML = await res.text();   
    }
    else { ... }
})();

обработка ошибок все еще отсутствует, но я уверен, что вы уловили картину:)

Answer 3

Сделать можно так:

fetch('/method')
.then(response=> response.text())
.then(res => { document.getElementById('id').innerHTML = res; });