yuv-render

A lightweight Promise-based XHR library that wraps traditional XMLHttpRequest into a Promise interface to simplify asynchronous request development.

Installation

::: code-group

npm add yuv-render

pnpm add yuv-render

yarn add yuv-render

<script src="https://cdn.jsdelivr.net/npm/yuv-render/dist/index.umd.min.js"></script>
<script>
  const { ajax } = XhrPromisify;
  // GET request
  ajax({
    url: 'https://api.example.com/data',
    method: 'GET'
  })
  .then(response => {
    console.log('Response data:', response);
  })
  .catch(error => {
    console.error('Request failed:', error);
  });
</script>

:::

Documentation

For detailed usage instructions and API references, please visit the official documentation:

👉 View Full Documentation

Quick Start

Basic Usage

import { ajax } from 'yuv-render';

// GET request
ajax({
  url: 'https://api.example.com/data',
  method: 'GET'
})
.then(response => {
  console.log('Response data:', response);
})
.catch(error => {
  console.error('Request failed:', error);
});

// Simplified syntax (async/await)
async function fetchData() {
  try {
    const response = await ajax({ url: '/api/data' });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Advanced Usage

Abort Requests

const controller = new AbortController();
const { signal } = controller;

ajax({
  url: '/api/long-polling',
  signal
}).then(...);

// Abort the request manually
controller.abort();

Custom Headers

ajax({
  url: '/api/protected',
  headers: {
    'Authorization': 'Bearer your_token'
  }
});

Error Handling

All exceptions throw an AjaxError object with the following properties:

class AjaxError extends Error {
  code: string; // Error code (e.g., `ERR_NETWORK`)
  status?: number; // HTTP status code (if available)
  statusText?: string; // HTTP status text (if available)
  data?: any; // Response data (if available)
  request?: XMLHttpRequest; // Original request object (if available)
}

Error Types

| Error Code | Type | Description | |------------|------|-------------| | ABORT_ERR | AjaxError | Request was manually aborted | | ERR_NETWORK | AjaxError | Network error (e.g., DNS resolution failure) | | ERR_HTTP_REQUEST_TIMEOUT | AjaxError | Request timeout | | ERR_BAD_REQUEST | AjaxError | HTTP 4xx status code error | | ERR_BAD_RESPONSE | AjaxError | HTTP 5xx status code error |

Browser Support

| | | | | --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |