Hyperloop Ruby JavaScript封装是否支持Async/Await语法？

Absolutely—Hyperloop fully supports Async/Await, and integrating this pattern into your Ruby-to-JavaScript workflows is straightforward, especially since you already recognize that Async/Await is just syntactic sugar for Promises. Let’s break this down with practical examples:

1. Hyperloop’s Native Async/Await Support #

Hyperloop provides Ruby-style equivalents for JavaScript’s async and await keywords, which transpile directly to standard ES2017 Async/Await syntax under the hood. This means you can write asynchronous code in Ruby that feels natural, while leveraging all the benefits of Async/Await’s readability.

Here’s a quick example of a component using Async/Await to fetch data:

class DataFetcher < Hyperloop::Component
  # Mark the method as async with the `async` modifier
  async def load_remote_data
    begin
      # Use `await` to pause execution until the Promise resolves
      response = await JS.fetch('/api/endpoint')
      parsed_data = await response.json
      # Update component state once data is ready
      mutate @data = parsed_data
    rescue => error
      # Handle errors cleanly, just like try/catch in JS
      mutate @error = "Failed to load data: #{error.message}"
    end
  end

  # Trigger the async method when the component mounts
  after_mount do
    load_remote_data
  end

  render do
    if @error
      div { @error }
    elsif @data
      div { "Loaded data: #{@data.inspect}" }
    else
      div { "Loading..." }
    end
  end
end

2. Using Async/Await with Custom Promise Wrappers #

Since you noticed Hyperstack examples wrap fetch in Promises, you can absolutely use await with those custom Promise-based functions too. Any Ruby method that returns a Promise (either from Hyperloop’s built-in Promise class or a wrapped JS Promise) can be awaited in an async method.

For example, if you have a custom fetch wrapper:

def custom_fetch(url)
  Promise.new do |resolve, reject|
    JS.fetch(url)
      .then { |resp| resp.json.then(&resolve) }
      .catch { |err| reject.call(err) }
  end
end

You can call it with await like this:

async def fetch_custom_data
  data = await custom_fetch('/api/custom-data')
  mutate @custom_data = data
end

Key Notes #

• Environment Compatibility: Hyperloop’s transpiled Async/Await works in all modern browsers and Node.js environments. If you need to support older environments, you can configure Hyperloop to transpile to ES5-compatible code with Promise polyfills.
• Error Handling: Just like in JavaScript, use begin/rescue blocks in Ruby to catch rejected Promises when using await—this mirrors JS’s try/catch behavior perfectly.

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