我可以使用 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));

第二then是解決.text()其中“需要一個響應流，並將其讀入到完成”（ MDN ）。

Answer 2

是的，fetch 返回一個 promise。所以你可以使用 then() 和 catch(error) 來捕獲錯誤。 但要注意瀏覽器兼容性