Skip to main content
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us