tessl/npm-vue-resource

The HTTP client for Vue.js providing services for making web requests and handling responses using XMLHttpRequest or JSONP

—

Pending

Overview

Eval results

Files

HTTP Client

Name: tessl/npm-vue-resource
Author: tessl

Core HTTP client functionality for making web requests with support for all standard HTTP methods, custom headers, interceptors, and multiple client backends.

Capabilities

Main HTTP Function

Core HTTP function that accepts a configuration object and returns a Promise.

/**
 * Make an HTTP request with the specified options
 * @param options - HTTP request configuration
 * @returns Promise resolving to HttpResponse
 */
function $http(options: HttpOptions): Promise<HttpResponse>;

interface HttpOptions {
  url?: string;
  method?: string;
  body?: any;
  params?: any;
  headers?: any;
  before?(request: any): any;
  progress?(event: ProgressEvent): void;
  credentials?: boolean;
  emulateHTTP?: boolean;
  emulateJSON?: boolean;
  timeout?: number;
  responseType?: string;
  withCredentials?: boolean;
  crossOrigin?: boolean;
  downloadProgress?(event: ProgressEvent): void;
  uploadProgress?(event: ProgressEvent): void;
}

Usage Examples:

// Basic request
this.$http({
  url: '/api/users',
  method: 'GET'
}).then(response => {
  console.log(response.body);
});

// POST with body
this.$http({
  url: '/api/users',
  method: 'POST',
  body: {name: 'John', email: 'john@example.com'}
}).then(response => {
  console.log('Created:', response.body);
});

// With query parameters
this.$http({
  url: '/api/users',
  method: 'GET',
  params: {page: 1, limit: 10}
}).then(response => {
  console.log('Users:', response.body);
});

// With timeout and progress tracking
this.$http({
  url: '/api/large-file',
  method: 'POST',
  body: formData,
  timeout: 30000,
  uploadProgress: (event) => {
    if (event.lengthComputable) {
      const percent = (event.loaded / event.total) * 100;
      console.log(`Upload progress: ${percent.toFixed(2)}%`);
    }
  }
}).then(response => {
  console.log('Upload complete:', response.body);
});

// With response type and credentials
this.$http({
  url: '/api/document.pdf',
  method: 'GET',
  responseType: 'blob',
  withCredentials: true
}).then(response => {
  // response.body is a Blob
  const url = URL.createObjectURL(response.body);
  window.open(url);
});

HTTP Method Shortcuts

Convenience methods for common HTTP operations.

/**
 * Perform GET request
 * @param url - Request URL
 * @param options - Additional options
 * @returns Promise resolving to HttpResponse
 */
function $http.get(url: string, options?: HttpOptions): Promise<HttpResponse>;

/**
 * Perform POST request
 * @param url - Request URL  
 * @param body - Request body data
 * @param options - Additional options
 * @returns Promise resolving to HttpResponse
 */
function $http.post(url: string, body?: any, options?: HttpOptions): Promise<HttpResponse>;

/**
 * Perform PUT request
 * @param url - Request URL
 * @param body - Request body data  
 * @param options - Additional options
 * @returns Promise resolving to HttpResponse
 */
function $http.put(url: string, body?: any, options?: HttpOptions): Promise<HttpResponse>;

/**
 * Perform PATCH request
 * @param url - Request URL
 * @param body - Request body data
 * @param options - Additional options  
 * @returns Promise resolving to HttpResponse
 */
function $http.patch(url: string, body?: any, options?: HttpOptions): Promise<HttpResponse>;

/**
 * Perform DELETE request
 * @param url - Request URL
 * @param options - Additional options
 * @returns Promise resolving to HttpResponse
 */
function $http.delete(url: string, options?: HttpOptions): Promise<HttpResponse>;

/**
 * Perform HEAD request
 * @param url - Request URL
 * @param options - Additional options
 * @returns Promise resolving to HttpResponse
 */
function $http.head(url: string, options?: HttpOptions): Promise<HttpResponse>;

/**
 * Perform JSONP request
 * @param url - Request URL
 * @param options - Additional options
 * @returns Promise resolving to HttpResponse
 */
function $http.jsonp(url: string, options?: HttpOptions): Promise<HttpResponse>;

Usage Examples:

// GET request
this.$http.get('/api/users').then(response => {
  console.log(response.body);
});

// POST request
this.$http.post('/api/users', {
  name: 'John',
  email: 'john@example.com'
}).then(response => {
  console.log('Created user:', response.body);
});

// PUT request with options
this.$http.put('/api/users/1', userData, {
  headers: {'Authorization': 'Bearer token'}
}).then(response => {
  console.log('Updated user:', response.body);
});

// DELETE request
this.$http.delete('/api/users/1').then(response => {
  console.log('User deleted');
});

// JSONP request
this.$http.jsonp('/api/external-data').then(response => {
  console.log('JSONP data:', response.body);
});

HTTP Response

Object representing the HTTP response with data access methods and metadata.

interface HttpResponse {
  /** Response data (getter/setter alias for body) */
  data: any;
  /** Response body (actual response content) */
  body: any;
  /** Raw response text (when response is string) */
  bodyText?: string;
  /** Raw response blob (when response is Blob) */
  bodyBlob?: Blob;
  /** Whether the response was successful (status 200-299) */
  ok: boolean;
  /** HTTP status code */
  status: number;
  /** HTTP status text */
  statusText: string;
  /** Request URL */
  url: string;
  /** Headers object with methods for header access */
  headers: Headers;
  /** Get response as text string */
  text(): Promise<string>;
  /** Parse response as JSON */
  json(): Promise<any>;
  /** Get response as Blob (browser only) */
  blob(): Promise<Blob>;
}

Usage Examples:

this.$http.get('/api/users').then(response => {
  console.log('Status:', response.status);
  console.log('OK:', response.ok);
  console.log('Data:', response.body);
  console.log('Content-Type:', response.headers.get('content-type'));
  
  // Access raw text (returns Promise)
  response.text().then(text => console.log('Raw text:', text));
  
  // Parse as JSON (if not auto-parsed, returns Promise)
  response.json().then(jsonData => console.log('JSON data:', jsonData));
});

Global Configuration

Configure default options, headers, and interceptors for all HTTP requests.

// Default options
Vue.http.options: HttpOptions & { root: string };

// Default headers for different HTTP methods
Vue.http.headers: HttpHeaders;

interface HttpHeaders {
  put?: { [key: string]: string };
  post?: { [key: string]: string };
  patch?: { [key: string]: string };
  delete?: { [key: string]: string };
  common?: { [key: string]: string };
  custom?: { [key: string]: string };
  [key: string]: any;
}

// Interceptor management
Vue.http.interceptors: (HttpInterceptor | string)[];
Vue.http.interceptor: { [name: string]: HttpInterceptor };

Usage Examples:

// Set root URL for all requests
Vue.http.options.root = 'https://api.example.com';

// Set default headers
Vue.http.headers.common['Authorization'] = 'Bearer ' + token;
Vue.http.headers.post['Content-Type'] = 'application/json';

// Custom headers
Vue.http.headers.custom['X-API-Key'] = 'your-api-key';

// Add interceptor
Vue.http.interceptors.push(function(request, next) {
  console.log('Sending request to:', request.url);
  next();
});

Error Handling

HTTP client automatically rejects promises for non-successful status codes and network errors.

Usage Examples:

this.$http.get('/api/users').then(response => {
  // Success (status 200-299)
  console.log('Users:', response.body);
}, response => {
  // Error (status >= 400 or network error)
  console.error('Error:', response.status, response.statusText);
  console.error('Error body:', response.body);
});

// Using async/await with try/catch
async function fetchUsers() {
  try {
    const response = await this.$http.get('/api/users');
    console.log('Users:', response.body);
  } catch (response) {
    console.error('Error:', response.status, response.statusText);
  }
}

Types

interface HttpOptions {
  /** URL for the request */
  url?: string;
  /** HTTP method (GET, POST, PUT, etc.) */
  method?: string;
  /** Request body data */
  body?: any;
  /** URL query parameters */
  params?: any;
  /** Request headers */
  headers?: any;
  /** Pre-request callback */
  before?(request: any): any;
  /** Progress callback (deprecated - use downloadProgress/uploadProgress) */
  progress?(event: ProgressEvent): void;
  /** Include credentials in cross-origin requests */
  credentials?: boolean;
  /** Emulate HTTP methods using POST with _method parameter */
  emulateHTTP?: boolean;
  /** Send data as form-encoded instead of JSON */
  emulateJSON?: boolean;
  /** Request timeout in milliseconds */
  timeout?: number;
  /** Expected response type (arraybuffer, blob, document, json, text) */
  responseType?: string;
  /** Include credentials in cross-origin requests (alias for credentials) */
  withCredentials?: boolean;
  /** Whether request is cross-origin (affects X-Requested-With header) */
  crossOrigin?: boolean;
  /** Download progress callback for GET requests */
  downloadProgress?(event: ProgressEvent): void;
  /** Upload progress callback for POST/PUT requests */
  uploadProgress?(event: ProgressEvent): void;
}

interface HttpHeaders {
  /** Headers for PUT requests */
  put?: { [key: string]: string };
  /** Headers for POST requests */
  post?: { [key: string]: string };
  /** Headers for PATCH requests */
  patch?: { [key: string]: string };
  /** Headers for DELETE requests */
  delete?: { [key: string]: string };
  /** Headers for all requests */
  common?: { [key: string]: string };
  /** Custom headers */
  custom?: { [key: string]: string };
  /** Additional method-specific headers */
  [key: string]: any;
}

interface Headers {
  /** Internal header storage map (normalized names -> array of values) */
  map: { [normalizedName: string]: string[] };
  /** Check if header exists (case-insensitive lookup) */
  has(name: string): boolean;
  /** Get header value (comma-separated if multiple values) */
  get(name: string): string | null;
  /** Get all values for a header as array */
  getAll(name: string): string[];
  /** Set header value (replaces all existing values) */
  set(name: string, value: string): void;
  /** Add header value (appends to existing values) */
  append(name: string, value: string): void;
  /** Delete header by name (case-insensitive) */
  delete(name: string): void;
  /** Delete all headers */
  deleteAll(): void;
  /** Iterate over all header values (calls callback for each value) */
  forEach(callback: (value: string, name: string, headers: Headers) => void, thisArg?: any): void;
}

Install with Tessl CLI