Question

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

implicit class JsonHelper(json: JValue) {
    def customExtract[T](path: String)(implicit formats: Formats, mf: Manifest[T]) = {
        path.split(',').foldLeft(json)({ case (acc: JValue, node: String) => acc \ node }).extract[T]
    }
}

json.customExtract[String]("data,code")
res23: String = "404"

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

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'

Answer 1

你可以。我认为以下内容应该有效：

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

第二次获取用于解析.text()，其中＆＃34;接收响应流并将其读取完成＆＃34; （MDN）。

Answer 2

是的，fetch返回一个promise.So你可以使用then（）和catch（错误）来捕获错误。但请注意浏览器兼容性

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

2 个答案: