> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/unjs/ofetch/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```typescript theme={null}
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

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

## Response Types

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

<ParamField path="responseType" type="'json' | 'text' | 'blob' | 'arrayBuffer' | 'stream'">
  The expected response type. When specified, ofetch will use the corresponding method to parse the response.
</ParamField>

### JSON Response

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

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

### Text Response

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

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

### Blob Response

```typescript theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
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:

<ParamField path="parseResponse" type="(responseText: string) => any">
  A custom function to parse the response text. When provided, this overrides the default JSON parsing.
</ParamField>

```typescript theme={null}
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
  })
})
```

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

## Empty Response Bodies

ofetch correctly handles responses that should not have a body:

```typescript theme={null}
// 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:

```typescript theme={null}
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.