Convert parameterized lambdas for success and failure into an observable using RxJS

Question

Convert parameterized lambdas for success and failure into an observable using RxJS

There is a function exported by a library that I am currently using:

export function read(
    urlOrRequest: any,
    success?: (data: any, response: any) => void,
    error?: (error: Object) => void,
    handler?: Handler,
    httpClient?: Object,
    metadata?: Object): any;

At the moment, my usage of this function looks like this:

var request =
{
    headers: oHeaders,
    requestUri: "http://odatasampleservices.azurewebsites.net/V4/OData/OData.svc/Products",
    data: null,
};

var successFunction = function(data)
{
    document.getElementById("simpleReadWithMetadata").innerHTML = JSON.stringify(data, undefined, 2);
};

var failFunction = function(err)
{
    alert(JSON.stringify(err));
};

oData.read(request, successFunction, failFunction, null, null, metadata);

My query is whether it's possible to wrap this call using rxjs. I believe it can be done, but I'm not sure how to go about it... Any thoughts?

typescript rxjs

Answer 1

Answer №1

To encapsulate the callbacks, you can utilize Rx.Observable.create in the following manner:

function simulateRead(urlOrRequest, success, error, handler, httpClient, metadata) {
  if (urlOrRequest === 'success') {
    success('data', 'response');
  } else {
    error('oops...');
  }
}

function readContent(urlOrRequest, success, error, handler, httpClient, metadata)
{
  return Rx.Observable.create(o => {
    simulateRead(
      urlOrRequest,
    (data, response) => {
      o.next({ data, response });
      o.complete();
    },
      (error) => {
      o.error(error);
    },
      handler,
      httpClient,
      metadata
    );
  });
}

readContent('success')
  .subscribe(
  x => { console.log('next', x); },
  x => { console.log('error', x); },
  () => { console.log('complete'); }
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.5/Rx.min.js"></script>

Answer 2

To encapsulate the callbacks, you can utilize Rx.Observable.create in the following manner:

function simulateRead(urlOrRequest, success, error, handler, httpClient, metadata) {
  if (urlOrRequest === 'success') {
    success('data', 'response');
  } else {
    error('oops...');
  }
}

function readContent(urlOrRequest, success, error, handler, httpClient, metadata)
{
  return Rx.Observable.create(o => {
    simulateRead(
      urlOrRequest,
    (data, response) => {
      o.next({ data, response });
      o.complete();
    },
      (error) => {
      o.error(error);
    },
      handler,
      httpClient,
      metadata
    );
  });
}

readContent('success')
  .subscribe(
  x => { console.log('next', x); },
  x => { console.log('error', x); },
  () => { console.log('complete'); }
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.5/Rx.min.js"></script>

Convert parameterized lambdas for success and failure into an observable using RxJS

Answer №1

Similar questions

Tips for Modifying the currentUrl identifier in Angular 2

What is the best way to group an array based on a dynamic key?

Using the <head> or <script> tag within my custom AngularJS2 component in ng2

TypeScript: empty JSON response

What is the best way to display a loading screen while simultaneously making calls to multiple APIs?

Why am I having trouble iterating through my array object?

What is the best way to create a custom hook that updates in response to changes in state?

Associative TypeScript Arrays

Ways to resolve the issue of npm being unable to globally install typescript

How can we avoid excessive re-rendering of a child component in React when making changes to the parent's state?

Get the download URL from Firebase Storage and save it into an array within Firestore

Can you explain the distinction between needing ts-node and ts-node/register?

Issue with triggering (keyup.enter) in Angular 8 for readonly HTML input elements

Establish the predefined date for the air-datepicker

`How to Merge Angular Route Parameters?`

Modifying the date format of the ag-Grid date filter

Testing abstract class methods in Jest can ensure full coverage

This element is not suitable for use as a JSX component since its return type 'void' is not a valid JSX element. Please check the return type to ensure it is compatible with

Using ngFor results in duplicate instances of ng-template

Tips for avoiding the <p> and <br> elements while using a ContentEditable div