Request#

The Scripting app provides a simulated web-based fetch interface that aligns with the Web Fetch API specification. This API enables performing network requests and handling responses in a modern, promise-based manner. It supports key features such as headers management, request cancellation, and form submission with multipart/form-data.

Overview#

1fetch(input: string | Request, init?: RequestInit): Promise<Response>

The fetch() method initiates an HTTP request to a network resource and returns a Promise that resolves to a Response object.

Unlike traditional XMLHttpRequest, fetch() uses promises and does not reject on HTTP protocol errors such as 404 or 500. Instead, these are reflected in the Response.ok and Response.status properties.

Request#

Request Class#

Represents an HTTP request.

1class Request {
2  constructor(input: string | Request, init?: RequestInit)
3  clone(): Request
4}

Properties#

• url: string – The request URL.
• method: string – HTTP method (GET, POST, PUT, DELETE, etc.).
• headers: Headers – HTTP headers.
• body?: Data | FormData | string | ArrayBuffer – The request body.
• connectTimeout?: number – Timeout for establishing connection (in milliseconds).
• receiveTimeout?: number – Timeout for receiving the response (in milliseconds).
• signal?: AbortSignal – Signal to abort the request.
• cancelToken?: CancelToken (deprecated) – Used for request cancellation.
• debugLabel?: string – Custom label shown in the debug log.

Response#

Response Class#

Represents the response to a fetch() request.

1class Response {
2  constructor(body: ReadableStream<Data>, init?: ResponseInit)
3}

Properties#

• body: ReadableStream<Data> – The response body as a stream.
• bodyUsed: boolean – Indicates whether the body has been read.
• status: number – HTTP status code.
• statusText: string – HTTP status text.
• headers: Headers – Response headers.
• ok: boolean – true if status is in the range 200–299.
• url: string – The final URL after redirects.
• mimeType?: string
• expectedContentLength?: number
• textEncodingName?: string

Methods#

• json(): Promise<any> – Parses body as JSON.
• text(): Promise<string> – Parses body as text.
• data(): Promise<Data> – Returns the response body as Data.
• bytes(): Promise<Uint8Array> – Returns the body as a Uint8Array.
• arrayBuffer(): Promise<ArrayBuffer> – Returns the body as an ArrayBuffer.
• formData(): Promise<FormData> – Parses body as FormData.

Headers#

Headers Class#

Manages HTTP headers.

1class Headers {
2  constructor(init?: HeadersInit)
3}

Methods#

• append(name: string, value: string): void
• get(name: string): string | null
• has(name: string): boolean
• set(name: string, value: string): void
• delete(name: string): void
• forEach(callback: (value: string, name: string) => void): void
• keys(): string[]
• values(): string[]
• entries(): [string, string][]
• toJson(): Record<string, string>

Form Data#

FormData Class#

Represents multipart/form-data payloads for form submissions.

1class FormData { }

Methods#

• append(name: string, value: string): void
• append(name: string, value: Data, mimeType: string, filename?: string): void
• get(name: string): string | Data | null
• getAll(name: string): any[]
• has(name: string): boolean
• delete(name: string): void
• set(name: string, value: string | Data, filename?: string): void
• forEach(callback: (value: any, name: string, parent: FormData) => void): void
• entries(): [string, any][]

Helper#

1formDataToJson(formData: FormData): Record<string, any>

Converts a FormData object into a plain JSON object.

Request Cancellation#

AbortController and AbortSignal#

Support aborting requests using signals.

1class AbortController {
2  readonly signal: AbortSignal
3  abort(reason?: any): void
4}

1class AbortSignal {
2  readonly aborted: boolean
3  readonly reason: any
4  addEventListener(type: 'abort', listener: AbortEventListener): void
5  removeEventListener(type: 'abort', listener: AbortEventListener): void
6  throwIfAborted(): void
7
8  static abort(reason?: any): AbortSignal
9  static timeout(delay: number): AbortSignal
10  static any(signals: AbortSignal[]): AbortSignal
11}

Use signal in a fetch request:

1const controller = new AbortController()
2fetch('https://example.com', { signal: controller.signal })
3// Cancel the request
4controller.abort('User aborted')

AbortError#

Thrown when an operation is aborted using AbortSignal.

CancelToken (Deprecated)#

CancelToken#

Legacy API for canceling requests.

1class CancelToken {
2  readonly token: string
3  readonly isCancelled: boolean
4  cancel(reason?: any): void
5  addEventListener(type: 'cancel', listener: CancelEventListener): void
6  removeEventListener(type: 'cancel', listener: CancelEventListener): void
7}

useCancelToken()#

React-style hook to manage CancelToken lifecycle in function components.

1function App() {
2  const cancelToken = useCancelToken()
3
4  async function request() {
5    cancelToken.get()?.cancel()
6    const result = await fetch('https://example.com', {
7      cancelToken: cancelToken.create(),
8    })
9  }
10
11  return <Button
12    title="Request" 
13    action={request}
14  />
15}

Error Handling#

• fetch() will reject on network or CORS errors, not HTTP status errors.
• Use response.ok or response.status to inspect HTTP-level errors.
• Use AbortController for modern cancellation handling.

Example Usage#

Basic GET Request#

1const response = await fetch('https://example.com/data.json')
2const json = await response.json()

POST Request with JSON#

1const response = await fetch('https://example.com/api', {
2  method: 'POST',
3  headers: {
4    'Content-Type': 'application/json'
5  },
6  body: JSON.stringify({ key: 'value' })
7})

Upload FormData with File#

1const form = new FormData()
2form.append('file', fileData, 'image/png', 'photo.png')
3
4const response = await fetch('https://example.com/upload', {
5  method: 'POST',
6  body: form
7})