Scala.js前端对接REST后端的惯用方案探讨

1. 优先选择活跃维护的Scala.js HTTP客户端库 #

不少旧库停更，但目前有几个生态活跃的选项，完全覆盖你需要的功能：

• ZIO HTTP：支持Scala.js，基于ZIO异步框架，内置查询参数构建、请求头管理、Cookie自动携带（同域场景）、多类型响应解析，错误处理贴合Scala FP风格。示例代码：

  import zio.http._
  import zio.json._
  import zio._
  
  case class User(id: Int, name: String) derives JsonDecoder
  
  val getUser: ZIO[Client, Throwable, User] =
    Client.request(
      Request.get("https://api.example.com/users")
        .addQueryParam("id", "123")
        .addHeader(Header.Accept(MediaType.application.json))
    )
      .flatMap(_.body.asString)
      .map(_.fromJson[User])
      .absolve // 将Either转换为ZIO的失败/成功语义
  

• http4s JS客户端：基于Fetch API实现，支持Scala.js，与http4s后端生态兼容，提供DSL构建请求，自动处理查询参数、请求头，Cookie通过Fetch的credentials选项控制，配合circe或http4s-circe可快速完成JSON解析。

2. 轻量封装Fetch API（替代原生XHR） #

如果不想引入大框架，直接封装浏览器原生Fetch API（Scala.js可通过scalajs.dom.Fetch调用），只实现项目需要的核心逻辑即可，不用造完整的库：

import scalajs.dom
import scala.concurrent.Future
import scala.scalajs.js.JSON
import scala.util.{Failure, Success}

object RestClient {
  // 拼接查询参数
  private def buildQueryParams(params: Map[String, String]): String =
    if (params.isEmpty) "" else s"?${params.map { case (k, v) => s"$k=${dom.encodeURIComponent(v)}" }.mkString("&")}"

  // GET请求：自动处理查询参数、Cookie携带
  def get(url: String, params: Map[String, String] = Map.empty, headers: Map[String, String] = Map.empty): Future[String] = {
    val fullUrl = url + buildQueryParams(params)
    val init = dom.RequestInit(
      method = "GET",
      credentials = dom.RequestCredentials.include,
      headers = dom.Headers(headers.toJsDictionary)
    )
    dom.fetch(fullUrl, init).toFuture.flatMap { response =>
      if (response.ok) response.text().toFuture
      else Future.failed(new Exception(s"请求失败，状态码：${response.status}"))
    }
  }

  // POST请求：支持JSON Body、查询参数
  def post(url: String, body: js.Any, params: Map[String, String] = Map.empty, headers: Map[String, String] = Map.empty): Future[String] = {
    val fullUrl = url + buildQueryParams(params)
    val defaultHeaders = Map("Content-Type" -> "application/json") ++ headers
    val init = dom.RequestInit(
      method = "POST",
      credentials = dom.RequestCredentials.include,
      headers = dom.Headers(defaultHeaders.toJsDictionary),
      body = JSON.stringify(body)
    )
    dom.fetch(fullUrl, init).toFuture.flatMap { response =>
      if (response.ok) response.text().toFuture
      else Future.failed(new Exception(s"请求失败，状态码：${response.status}"))
    }
  }
}

这个工具类封装了查询参数拼接、Cookie携带、请求头设置、基础错误处理，比原生XHR简洁很多，还能根据项目需求扩展（比如添加JSON解析、大响应流式处理）。

3. 是否需要自行编写完整封装库？ #

如果只是单个项目使用，完全没必要写完整的库，上述轻量封装足够应付大部分场景。如果是多个项目复用，可以把工具类抽成独立小模块，但优先考虑用前面提到的活跃生态库——它们已经解决了跨域、超时、重试等边缘问题，比从零开发更稳定。

社区惯用方式 #

目前Scala.js社区对接REST后端的主流做法：

• FP风格项目优先用ZIO HTTP或http4s JS客户端，与Scala异步、FP生态深度整合；
• 轻量项目直接封装Fetch API，避免过多依赖；
• 极少直接使用原生XHR，除非有极旧浏览器的兼容性需求。

内容的提问来源于stack exchange，提问作者nondeterministic