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

Is it possible for a component to have multiple templates that can be switched based on a parameter?

I'm having trouble configuring the header in my Node/Express route

A: TypeScript Error TS7006: Parameter implicitly has an 'any' type

The positioning of Material UI InputAdornment icons is located beyond the boundaries of the TextField input area

After submitting a multi-image form from Angular, the "req" variable is not defined

What is the best method for showcasing this console.log information in an Angular application?

What is causing the error "has no properties in common with" in this wrapped styled-component?

What are the differences between an optional property and a non-optional property?

Setting the TypeScript version while initializing CDK

ng2-table ways to customize the appearance of a particular row

Create type definitions for React components in JavaScript that utilize the `prop-types` library

What is the process of extending a class in TypeScript?

Verify Angular Reactive Form by clicking the button

TypeScript primitive type is a fundamental data type within the

Angular: The type AbstractControl<any> cannot be assigned to type FormControl

The result should display the top 5 application names based on the count property found within the ImageDetails object

Developing a custom functionality to retrieve a server cookie for authentication in NextJS version 14

What could be causing the DOM not to update after updating the data set in Angular 2?

Error alert: TypeScript typings issue - Naming conflict with Promise / Failure to locate name Promise

Issue with nestjs build due to ts-loader module in dev-dependency