Skip to content

Figuring out RXJS


  • Getting it to work with typescript

    • Error: Uncaught TypeError: Cannot read property 'Observable' of undefined. Works in plain javascript.
    • Fix:
      • Install type definitions for rxjs npm install --save-dev @type/rx
      • Import as import * as Rx from 'rxjs'
  • (Archive) Issues with Rx.DOM.get(). Error: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

    • Fix:
      • Issue 1732
      • Provide custom factory for XHR
            const settings = {
            crossDomain: true,
            responseType: "json",
            method: "GET",
            createXHR: () => new XMLHttpRequest(),
            url: url
  • Ajax with rxjs 6
    import {ajax} from 'rxjs/ajax';
    export const getSettings$ = (url) => ajax(`${url}`);


Ajax and VueJS

  • Setup services file to actually make the ajax calls services.ts
    import {ajax} from 'rxjs/ajax';
    export getSettings$ = (url) => ajax(`${url}`);
  • Vue Component - about/script.ts
    import {Vue, Component} from "vue-property-decorator";
    import {Observable} from 'rxjs';
    import {IAbout, About as AboutModel } from "../../../models";
    import { getSettings$ } from '../../../services';
    export default class About extends Vue {
      about: IAbout = new AboutModel();
      getService: Observable<any>;
      created() {
        const url = '/admin/site/30b3cf31-a413-4871-aef2-c4b125cd5b36';
        this.getService = getSettings$(url);
          data => console.log(data),
          err => console.error(err)


Learn RxJS

rxjs advice

  • catchError in pipe -> create a friendlier message. then throw error messages.

Last update: April 13, 2020 16:50:19