ajax

signature: ajax(urlOrRequest: string | AjaxRequest)
Create an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL.
​​​​
Examples
Example 1: Observable that emits the response object that is being returned from the request.
( StackBlitz )
// RxJS v6+
import { ajax } from 'rxjs/ajax';
​
const githubUsers = `https://api.github.com/users?per_page=2`;
​
const users = ajax(githubUsers);
​
const subscribe = users.subscribe(
  res => console.log(res),
  err => console.error(err)
);
​
/* output
{  
  "originalEvent":{  
    "isTrusted":true
  },
  "xhr":{  
​
  },
  "request":{  
    "async":true,
    "crossDomain":true,
    "withCredentials":false,
    "headers":{  
​
    },
    "method":"GET",
    "responseType":"json",
    "timeout":0,
    "url":"https://api.github.com/users?per_page=2"
  },
  "status":200,
  "responseType":"json",
  "response":[  
    {  
      "login":"mojombo",
      "id":1,
      "node_id":"MDQ6VXNlcjE=",
      "avatar_url":"https://avatars0.githubusercontent.com/u/1?v=4",
      "gravatar_id":"",
      ...
    },
    {  
      "login":"defunkt",
      "id":2,
      "node_id":"MDQ6VXNlcjI=",
      "avatar_url":"https://avatars0.githubusercontent.com/u/2?v=4",
      "gravatar_id":"",
      "...
    }
  ]
}
*/
Example 2: Observable that emits only the json key of the response object that is being returned from the request.
( StackBlitz )
// RxJS v6+
import { ajax } from 'rxjs/ajax';
​
const githubUsers = `https://api.github.com/users?per_page=2`;
​
const users = ajax.getJSON(githubUsers);
​
const subscribe = users.subscribe(
  res => console.log(res),
  err => console.error(err)
);
​
/* output
[  
  {  
    "login":"mojombo",
    "id":1,
    "node_id":"MDQ6VXNlcjE=",
    "avatar_url":"https://avatars0.githubusercontent.com/u/1?v=4",
    "gravatar_id":"",
    "...
  },
  {  
    "login":"defunkt",
    "id":2,
    "node_id":"MDQ6VXNlcjI=",
    "avatar_url":"https://avatars0.githubusercontent.com/u/2?v=4",
    "gravatar_id":"",
    ...
  }
]
*/
Example 3: Observable that emits the error object that is being returned from the request.
( StackBlitz )
// RxJS v6+
import { ajax } from 'rxjs/ajax';
​
const githubUsers = `https://api.github.com/error`;
​
const users = ajax.getJSON(githubUsers);
​
const subscribe = users.subscribe(
  res => console.log(res),
  err => console.error(err)
);
​
/* output
Error: ajax error 404
*/
Example 4: Ajax operator with object as input.
( StackBlitz )
// RxJS v6+
import { ajax } from 'rxjs/ajax';
​
const githubUsers = `https://api.github.com/error`;
​
const users = ajax({
  url: githubUsers,
  method: 'GET',
  headers: {
    /*some headers*/
  },
  body: {
    /*in case you need a body*/
  }
});
​
const subscribe = users.subscribe(
  res => console.log(res),
  err => console.error(err)
);
Additional Resources
​ajax 📰 - Official docs
📁 Source Code: https://github.com/ReactiveX/rxjs/blob/6.4.0/src/internal/observable/dom/ajax.ts#L20-L19​
Creation
create
Last updated 1 year ago