我可以用等效的 fetch() 调用替换 jQuery.load() 一行代码吗？

Question

我有一个页面使用 jQuery 一个内衬

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

将片段加载到 DOM 的特定位置。

如果我想删除对 jQuery 的依赖，是否有一种简单的替代方法可以做到这一点——可能使用相对较新的 fetch() API?

Answer 1

你可以这样做：

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

Answer 2

这样做：

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

Answer 3

差不多一个班:)

;(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 { ... }
})();

仍然缺少错误处理，但我相信你明白了:)

我可以用等效的 fetch() 调用替换 jQuery.load() 一行代码吗？

Can I replace a jQuery.load() one-liner with an equivalent fetch() call?

javascript

ajax

jquery

fetch

one-liner