Ajax.post --> dom.fetch

Question

我正在尝试使用 dom.fetch（或 dom.Fetch.fetch）api 而不是 Ajax.post，但遇到了一些问题：

这是从 ajax 到 fetch 的正确翻译吗？

Ajax.post(
  url = "http://localhost:8080/ajax/myMethod",
  data = byteBuffer2typedArray(Pickle.intoBytes(req.payload)),
  responseType = "arraybuffer",
  headers = Map("Content-Type" -> "application/octet-stream"),
)

dom.fetch(
  "http://localhost:8080/fetch/myMethod",
  new RequestInit {
    method = HttpMethod.POST
    body = byteBuffer2typedArray(Pickle.intoBytes(req.payload))
    headers = new Headers {
      js.Array(
        js.Array("Content-Type", "application/octet-stream")
      )
    }
  }
)

虽然在 js 端抛出“ReferenceError: fetch is not defined”，但如果替换为dom.Fetch.fetch，则相同。

我的设置：

新鲜的 jsdom 19.0.0 与

npm init private
npm install jsdom

项目/plugins.sbt

libraryDependencies += "org.scala-js" %% "scalajs-env-jsdom-nodejs" % "1.1.0"
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.8.0")

build.sbt（在 js 项目中）

libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.0.0"
jsEnv := new JSDOMNodeJSEnv(JSDOMNodeJSEnv.Config()
  .withArgs(List("--dns-result-order=ipv4first")))

认为 Scala.js 1.8 不需要 jsEnv 解决方法（请参阅 https://github.com/scala-js/scala-js-js-envs/issues/12#issuecomment-958925883）。但是当我运行 ajax 版本时仍然需要它。通过解决方法，我的 ajax 版本可以正常工作，因此我的节点安装似乎很好。

Answer 1

fetch API 默认仅在浏览器环境中可用，在 Node.js 中不可用。 node-fetch 也不会被jsdom 拉入（或至少不会重新导出），因此fetch 在当前的包/环境设置中不可用。

可能的解决方案：

1. 将 ScalaJS 设置为朝上，使其在 NodeJS 上调用 node-fetch，在浏览器上调用 fetch
2. 使用在两个平台上都可用的 XMLHttpRequest

（请参阅 Scala Discord 的 #scala-js 频道中的 here，了解为什么这个答案很短。TL；DR，Marc 要求我在这里回答，以便我可以收到代表赏金以帮助不和谐。上下文的screenshot 可用。）

Answer 2

@Aly here 和 @armanbilge here 在 Discord 上的 scala-js 频道上获得了帮助，他们指出：

• fetch 默认在 Node.js 或 JSDOM 中不可用，仅在浏览器中可用。
• scala-js-dom 提供对浏览器 API 的类型安全访问，而不是 Node.js API。

浏览器 API 和 Node API 之间的区别我之前并不清楚，尽管在 scala-js tutorial 的第 6 步中有很好的描述。

因此，scala-js-dom API 的dom.fetch 在浏览器中运行 js 程序时有效，但在运行使用 Node jsEnv(ironment) 的测试时无效！要在测试中获取，必须npm install node-fetch 并使用node-fetch，也许通过使用 scala-js 制作外观。

因为我希望我的代码同时适用于浏览器 (scala-js-dom) 和测试 (Node.js)，所以我最终退回到简单地使用带有 XMLHttpRequest 的 Ajax.post 实现：

case class PostException(xhr: dom.XMLHttpRequest) extends Exception {
  def isTimeout: Boolean = xhr.status == 0 && xhr.readyState == 4
}

val url         = s"http://$interface:$port/ajax/" + slothReq.path.mkString("/")
val byteBuffer  = Pickle.intoBytes(slothReq.payload)
val requestData = byteBuffer.typedArray().subarray(byteBuffer.position, byteBuffer.limit)
val req         = new dom.XMLHttpRequest()
val promise     = Promise[dom.XMLHttpRequest]()

req.onreadystatechange = { (e: dom.Event) =>
  if (req.readyState == 4) {
    if ((req.status >= 200 && req.status < 300) || req.status == 304)
      promise.success(req)
    else
      promise.failure(PostException(req))
  }
}
req.open("POST", url) // (I only need to POST)
req.responseType = "arraybuffer"
req.timeout = 0
req.withCredentials = false
req.setRequestHeader("Content-Type", "application/octet-stream")
req.send(requestData)

promise.future.recover {
  case PostException(xhr) =>
    val msg    = xhr.status match {
      case 0 => "Ajax call failed: server not responding."
      case n => s"Ajax call failed: XMLHttpRequest.status = $n."
    }
    println(msg)
    xhr
}.flatMap { req =>
  val raw       = req.response.asInstanceOf[ArrayBuffer]
  val dataBytes = TypedArrayBuffer.wrap(raw.slice(1))
  Future.successful(dataBytes)
}