Response Parsing

Automatic JSON parsing and support for multiple response types including blob, text, arrayBuffer, and stream

ofetch automatically detects and parses responses based on the Content-Type header, with smart defaults for JSON content.

Automatic Response Type Detection

ofetch automatically detects the appropriate response type based on the Content-Type header:

import { ofetch } from 'ofetch'

// Automatically parsed as JSON
const data = await ofetch('/api/user')

// Detects and returns Blob for binary content
const image = await ofetch('/api/image.png')

// Detects and returns stream for SSE
const stream = await ofetch('/api/events')

Detection Logic

The response type is detected from the Content-Type header:

• JSON: application/json or application/*+json (e.g., application/vnd.api+json)
• Text: text/*, image/svg, application/xml, application/xhtml, application/html
• Stream: text/event-stream (Server-Sent Events)
• Blob: All other content types
• Default: When no Content-Type is present, defaults to JSON

ofetch uses a regex pattern /^application\/(?:[\w!#$%&*.^~-]*+)?json(;.+)?$/ito detect JSON content types, which supports JSON variants likeapplication/vnd.api+json`.

Response Types

You can explicitly specify the response type using the responseType option:

responseType · 'json' | 'text' | 'blob' | 'arrayBuffer' | 'stream'

The expected response type. When specified, ofetch will use the corresponding method to parse the response.

JSON Response

const data = await ofetch('/api/data', {
  responseType: 'json'
})

JSON is the default response type. The response text is parsed using JSON.parse().

Text Response

const html = await ofetch('/page.html', {
  responseType: 'text'
})

Returns the response as a string using the Response.text() method.

Blob Response

const blob = await ofetch('/api/download', {
  responseType: 'blob'
})

Returns the response as a Blob object using the Response.blob() method. Useful for binary data like images or files.

ArrayBuffer Response

const buffer = await ofetch('/api/binary', {
  responseType: 'arrayBuffer'
})

Returns the response as an ArrayBuffer using the Response.arrayBuffer() method. Useful for low-level binary data processing.

Stream Response

const stream = await ofetch('/api/stream', {
  responseType: 'stream'
})

// Process the stream
const reader = stream.getReader()
while (true) {
  const { done, value } = await reader.read()
  if (done) break
  console.log('Received chunk:', value)
}

Returns the response as a ReadableStream<Uint8Array>. This is automatically detected for text/event-stream content type.

Custom Response Parsing

You can provide a custom parser function to handle response parsing:

parseResponse · (responseText: string) => any

A custom function to parse the response text. When provided, this overrides the default JSON parsing.

import { ofetch } from 'ofetch'
import yaml from 'js-yaml'

// Parse YAML responses
const config = await ofetch('/config.yaml', {
  parseResponse: (text) => yaml.load(text)
})

// Parse CSV responses
const data = await ofetch('/data.csv', {
  parseResponse: (text) => {
    const lines = text.split('\n')
    return lines.map(line => line.split(','))
  }
})

// Custom JSON parsing with reviver
const data = await ofetch('/api/dates', {
  parseResponse: (text) => JSON.parse(text, (key, value) => {
    // Convert ISO date strings to Date objects
    if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
      return new Date(value)
    }
    return value
  })
})

When parseResponse is provided, the responseType option is ignored and the response is always treated as text before being passed to your custom parser.

Empty Response Bodies

ofetch correctly handles responses that should not have a body:

// 204 No Content - returns undefined
const result = await ofetch('/api/delete', { method: 'DELETE' })
console.log(result) // undefined

// HEAD requests - returns undefined
const result = await ofetch('/api/check', { method: 'HEAD' })
console.log(result) // undefined

The following status codes are treated as having no body:

• 101 - Switching Protocols
• 204 - No Content
• 205 - Reset Content
• 304 - Not Modified

Accessing Raw Response

Use $fetch.raw() to access the full Response object along with the parsed data:

import { $fetch } from 'ofetch'

const response = await $fetch.raw('/api/data')

console.log(response.status)      // 200
console.log(response.headers)     // Headers object
console.log(response._data)       // Parsed response data

The parsed data is available on the _data property of the response object.