xior

If you need full control over the build tool and configuration (webpack, Babel, ESLint, etc.), you can run npm run eject.

Warning: This is a one-way operation. Once you eject, you cannot go back.

Ejecting copies all configuration files and transitive dependencies directly into your project. While all other commands will still work, they will point to the newly copied scripts, and you will be responsible for maintaining the configuration.

By default, xior parses the response body (e.g., into JSON). If you need to access the raw response object (for example, to use a ReadableStream for line-by-line text processing), set the responseType option to 'original'. This returns an object in the format { response } where response is the original response object.

import xior from 'xior';

const http = xior.create();

async function* makeTextFileLineIterator(fileURL) {
  const utf8Decoder = new TextDecoder('utf-8');
  // Use responseType: 'original' to get the raw response object
  const { response } = await http.get(fileURL, { responseType: 'original' });
  const reader = response.body.getReader();
  // ... rest of the stream processing logic
}

You can control what happens when a request does not match any registered mock handler using the onNoMatch option in the MockPlugin constructor.

• onNoMatch: 'passthrough': All unmatched requests are automatically forwarded to the actual network.
• .passThrough(): You can also call .passThrough() on a specific handler to force matched requests to go to the network instead of being intercepted.

// Option 1: Global passthrough for all unmatched requests
const mock = new MockPlugin(instance, { onNoMatch: 'passthrough' });

// Option 2: Specific handler passthrough
mock.onGet('/api/real-data').passThrough();

Because Xior.js uses the Fetch API's Headers object for responses, you cannot access headers using bracket notation like a standard JavaScript object. You must use the .get() method on the headers property of the response object.

// In Axios:
const value = response.headers['x-header-name'];

// In Xior.js:
const value = response.headers.get('x-header-name');

xior uses a plugin mechanism to extend its functionality. Plugins are registered using http.plugins.use().

Crucial Execution Order: The plugin mechanism follows a 'first in, last run' pattern. If you register plugins in the order plugin1, plugin2, plugin3, they will execute in the order plugin3 $\rightarrow$ plugin2 $\rightarrow$ plugin1 during the request lifecycle.

plugins.use(plugin1);
plugins.use(plugin2);
plugins.use(plugin3);

// Run order: plugin3 → plugin2 → plugin1

Since xior does not support transformRequest or transformResponse properties, use these alternatives:

1. For Request Transformation: Use interceptors.request.use to modify the config object (e.g., changing headers or data) before the request is sent.
2. For Response Transformation: Use a .then() callback to transform the response data after it is received.

// Request transformation via interceptor
xiorInstance.interceptors.request.use((config) => {
  if (config.url === '/endpoint') {
    delete config.headers['Content-Type'];
  }
  return config;
});

// Response transformation via .then()
xiorInstance.get('/api').then((response) => {
  // transform response data here
  return response;
});

When migrating from the native fetch API to xior, you can replace manual URL string concatenation and .json() parsing with xior.create() and the params option. xior automatically extracts the data property from the response, which contains the parsed JSON body.

import xior from 'xior';

const http = xior.create({
  baseURL: 'http://example.com',
});

async function logMovies() {
  const { data: movies } = await http.get('/movies.json', {
    params: {
      page: 1,
      perPage: 10,
    },
  });
  console.log(movies);
}

Use the FormData API for file uploads. To track upload progress, use the xior/plugins/progress plugin.

import Xior from 'xior';
import uploadDownloadProgressPlugin from 'xior/plugins/progress';

const http = Xior.create({});

// Register the progress plugin
http.plugins.use(
  uploadDownloadProgressPlugin({
    progressDuration: 5 * 1000,
  })
);

const formData = new FormData();
formData.append('file', fileObject);
formData.append('field1', 'val1');

http.post('/upload', formData, {
  onUploadProgress(e) {
    console.log(`Upload progress: ${e.progress}%`);
  },
});

import uploadDownloadProgressPlugin from 'xior/plugins/progress';
// ... setup http instance
http.plugins.use(uploadDownloadProgressPlugin());