Belajar HonoJS - Request & Response Object

#Pendahuluan

Setelah di episode 4 kita menguasai routing, pada episode ini kita akan memahami context c — objek sentral di Hono yang memberikan akses ke semua data request dan methods untuk menghasilkan response. Memahami c secara mendalam akan membuat kalian efektif menulis handler di Hono.

#Memahami Context (c) Object

#Request: c.req

c.req adalah abstraction untuk Web Standard Request object:

Akses data dari request

app.get('/user/:id', async (c) => {
  // Path parameter
  const id = c.req.param('id')
 
  // Query string
  const format = c.req.query('format')
 
  // Header
  const token = c.req.header('Authorization')
 
  // Parse body
  const body = await c.req.json()
 
  // Method
  const method = c.req.method
 
  // URL
  const url = c.req.url
 
  return c.json({ id, format, method, url })
})

#Environment Variables: c.env

Di Cloudflare Workers, c.env memberikan akses ke environment variables dan bindings:

Akses environment variables

app.get('/config', (c) => {
  const dbUrl = c.env.DATABASE_URL
  const kv = c.env.MY_KV // Cloudflare KV binding
  return c.json({ dbUrl })
})

#Reading Request Data

#JSON Body

Parse JSON body

app.post('/user', async (c) => {
  const body = await c.req.json<{ name: string; email: string }>()
  return c.json({ received: body })
})

#Text Body

Parse text body

app.post('/echo', async (c) => {
  const text = await c.req.text()
  return c.text(`Echo: ${text}`)
})

#Form Data

Parse multipart form data

app.post('/upload', async (c) => {
  const formData = await c.req.formData()
  const file = formData.get('file')
  return c.json({ filename: file?.name })
})

#Response Types

#c.text() — text/plain

Text response

app.get('/', (c) => c.text('Hello Hono!'))

#c.json() — application/json

JSON response

app.get('/user', (c) => c.json({ name: 'John', email: 'john@example.com' }))

#c.html() — text/html

HTML response

app.get('/', (c) => c.html('<h1>Hello Hono!</h1>'))

#c.body() — Streaming Response

Streaming response

app.get('/stream', (c) => {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(new TextEncoder().encode('Hello '))
      controller.enqueue(new TextEncoder().encode('World!'))
      controller.close()
    },
  })
  return c.body(stream)
})

#c.redirect() — Redirect

Redirect response

app.get('/old-path', (c) => c.redirect('/new-path'))
app.get('/external', (c) => c.redirect('https://example.com'))

#Status Code dan Headers

#Status Code

Status code di response

app.post('/user', async (c) => {
  const body = await c.req.json()
  return c.json({ id: 1, ...body }, 201) // 201 Created
})
 
app.get('/missing', (c) => {
  return c.json({ error: 'Not found' }, 404)
})

#Headers

Custom headers

app.get('/data', (c) => {
  c.header('X-Custom-Header', 'value')
  c.header('Cache-Control', 'public, max-age=3600')
  return c.json({ data: 'expensive computation' })
})

Note

Hono secara otomatis menentukan Content-Type berdasarkan method response. c.text() → text/plain, c.json() → application/json, c.html() → text/html. Kalian jarang perlu mengatur Content-Type secara manual.

#Penutup

Pada episode 5 ini, kalian telah memahami context c secara mendalam — cara membaca data request dan menghasilkan berbagai jenis response.

Inti yang harus dibawa pulang:

c.req untuk akses data request: param, query, header, json(), text(), formData().
Response methods: c.text(), c.json(), c.html(), c.body(), c.redirect().
Status code sebagai parameter kedua: c.json(data, 201).
c.header() untuk custom response headers.
c.env untuk environment variables di Cloudflare Workers.

Di episode 6 selanjutnya kita akan memahami schema validation dengan Zod dan Valibot — mendefinisikan validasi yang kuat, custom error handler, dan integrasi dengan Hono. Sampai jumpa di episode 6!