---
title: "@push.rocks/webrequest"
---
# @push.rocks/webrequest
securely request from browsers

## Install

To use `@push.rocks/webrequest` in your project, install it using npm or yarn:

```bash
npm install @push.rocks/webrequest --save
# or with yarn
yarn add @push.rocks/webrequest
```

This package is designed to be used in an environment where ECMAScript Modules (ESM) and TypeScript are supported.

## Usage

`@push.rocks/webrequest` is a powerful module designed to simplify making web requests securely from browsers. It leverages modern JavaScript features and TypeScript for a type-safe development experience. Below are comprehensive examples demonstrating how to utilize the module effectively:

### Setting Up

First, import `WebRequest` from the module:

```typescript
import { WebRequest } from '@push.rocks/webrequest';
```

Create an instance of `WebRequest`. You can optionally pass configuration options:

```typescript
const webRequest = new WebRequest({
  logging: true // Optional: enables logging, defaults to true
});
```

### Making GET Requests

To fetch JSON data:

```typescript
// Fetch JSON data using GET request
async function fetchJsonData() {
  const url = 'https://api.example.com/data';
  try {
    const jsonData = await webRequest.getJson(url);
    console.log(jsonData);
  } catch (error) {
    console.error(error);
  }
}

fetchJsonData();
```

### POST, PUT, and DELETE Requests

Similarly, you can make POST, PUT, and DELETE requests to send or manipulate data:

```typescript
// Example POST request to submit JSON data
async function postJsonData() {
  const url = 'https://api.example.com/submit';
  const data = { key: 'value' };

  try {
    const result = await webRequest.postJson(url, data);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

postJsonData();

// PUT and DELETE can be similarly used
```

### Using Caches

The library provides mechanisms to cache responses, which is useful for reducing network load and improving performance. Hereâs how to fetch data with caching:

```typescript
// Fetch with caching enabled
async function fetchDataWithCache() {
  const url = 'https://api.example.com/data';
  try {
    // The second parameter enables caching
    const jsonData = await webRequest.getJson(url, true);
    console.log(jsonData);
  } catch (error) {
    console.error(error);
  }
}

fetchDataWithCache();
```

### Handling Multiple Endpoints

`@push.rocks/webrequest` supports querying multiple endpoints with fallbacks to handle the situation where some endpoints may fail or be unavailable:

```typescript
// Attempt to request from multiple endpoints
async function requestFromMultipleEndpoints() {
  const endpoints = [
    'https://api.primary-example.com/data',
    'https://api.backup-example.com/data'
  ];
  try {
    const response = await webRequest.requestMultiEndpoint(endpoints, {
      method: 'GET'
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Failed to retrieve data from any endpoint', error);
  }
}

requestFromMultipleEndpoints();
```

### Advanced Usage

For advanced scenarios, you can directly use the `request` method to fully customize the request options including headers, request method, and body (for POST/PUT requests):

```typescript
// Custom request with timeout
async function customRequest() {
  const url = 'https://api.example.com/advanced';
  try {
    const response = await webRequest.request(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ custom: 'data' }),
      timeoutMs: 10000 // Timeout in milliseconds
    });
    if (response.ok) {
      const result = await response.json();
      console.log(result);
    } else {
      console.error('Response error:', response.status);
    }
  } catch (error) {
    console.error('Request failed:', error);
  }
}

customRequest();
```

### Conclusion

`@push.rocks/webrequest` offers a streamlined, secure way to handle web requests from browsers, supporting various HTTP methods, response caching, and requests to multiple endpoints with fault tolerance. Its TypeScript integration ensures type safety and enhances developer productivity by enabling IntelliSense in supported IDEs.






## License and Legal Information

This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. 

**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

### Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.

### Company Information

Task Venture Capital GmbH  
Registered at District court Bremen HRB 35230 HB, Germany

For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.

By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
