javascript - 我可以用等效的 fetch() 调用替换 jQuery.load() 单行吗？

Question

我有一个使用 jQuery one liner 的页面

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

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

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

Answer 1

几乎是一个班轮:)

;(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 2

这样做：

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

Answer 3

你可以这样做：

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