我可以使用JavaScript fetch（）在DOM中插入内嵌svg吗？

Question

我有一个使用XMLHttpRequest（）在DOM中插入内嵌svg的函数，我想知道是否可以使用fetch（）做相同的函数。该功能是...

el = document.querySelector('#foo')
var request = new XMLHttpRequest()
request.open('GET', 'bar.svg', true)

request.onreadystatechange = function() {
  if (this.readyState !== 4) return
  if (this.status !== 200) return
  el.innerHTML = this.responseText
}
request.send()
// bar.svg is inserted in element with ID 'foo'

因此，是否有可能将此功能现代化为...

fetch('bar.svg').then(...)

Answer 1

您可以。我认为以下应该起作用：

fetch('bar.svg')
    .then(r => r.text())
    .then(text => {
        el.innerHTML = text;
    })
    .catch(console.error.bind(console));

第二个提取用于解析.text()，它“获取Response流并将其读取到完成”（MDN）。