AjaxObservable.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  1. import { root } from '../../util/root';
  2. import { tryCatch } from '../../util/tryCatch';
  3. import { errorObject } from '../../util/errorObject';
  4. import { Observable } from '../../Observable';
  5. import { Subscriber } from '../../Subscriber';
  6. import { map } from '../../operators/map';
  7. function getCORSRequest() {
  8. if (root.XMLHttpRequest) {
  9. return new root.XMLHttpRequest();
  10. }
  11. else if (!!root.XDomainRequest) {
  12. return new root.XDomainRequest();
  13. }
  14. else {
  15. throw new Error('CORS is not supported by your browser');
  16. }
  17. }
  18. function getXMLHttpRequest() {
  19. if (root.XMLHttpRequest) {
  20. return new root.XMLHttpRequest();
  21. }
  22. else {
  23. let progId;
  24. try {
  25. const progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'];
  26. for (let i = 0; i < 3; i++) {
  27. try {
  28. progId = progIds[i];
  29. if (new root.ActiveXObject(progId)) {
  30. break;
  31. }
  32. }
  33. catch (e) {
  34. }
  35. }
  36. return new root.ActiveXObject(progId);
  37. }
  38. catch (e) {
  39. throw new Error('XMLHttpRequest is not supported by your browser');
  40. }
  41. }
  42. }
  43. export function ajaxGet(url, headers = null) {
  44. return new AjaxObservable({ method: 'GET', url, headers });
  45. }
  46. ;
  47. export function ajaxPost(url, body, headers) {
  48. return new AjaxObservable({ method: 'POST', url, body, headers });
  49. }
  50. ;
  51. export function ajaxDelete(url, headers) {
  52. return new AjaxObservable({ method: 'DELETE', url, headers });
  53. }
  54. ;
  55. export function ajaxPut(url, body, headers) {
  56. return new AjaxObservable({ method: 'PUT', url, body, headers });
  57. }
  58. ;
  59. export function ajaxPatch(url, body, headers) {
  60. return new AjaxObservable({ method: 'PATCH', url, body, headers });
  61. }
  62. ;
  63. const mapResponse = map((x, index) => x.response);
  64. export function ajaxGetJSON(url, headers) {
  65. return mapResponse(new AjaxObservable({
  66. method: 'GET',
  67. url,
  68. responseType: 'json',
  69. headers
  70. }));
  71. }
  72. ;
  73. /**
  74. * We need this JSDoc comment for affecting ESDoc.
  75. * @extends {Ignored}
  76. * @hide true
  77. */
  78. export class AjaxObservable extends Observable {
  79. constructor(urlOrRequest) {
  80. super();
  81. const request = {
  82. async: true,
  83. createXHR: function () {
  84. return this.crossDomain ? getCORSRequest.call(this) : getXMLHttpRequest();
  85. },
  86. crossDomain: false,
  87. withCredentials: false,
  88. headers: {},
  89. method: 'GET',
  90. responseType: 'json',
  91. timeout: 0
  92. };
  93. if (typeof urlOrRequest === 'string') {
  94. request.url = urlOrRequest;
  95. }
  96. else {
  97. for (const prop in urlOrRequest) {
  98. if (urlOrRequest.hasOwnProperty(prop)) {
  99. request[prop] = urlOrRequest[prop];
  100. }
  101. }
  102. }
  103. this.request = request;
  104. }
  105. /** @deprecated internal use only */ _subscribe(subscriber) {
  106. return new AjaxSubscriber(subscriber, this.request);
  107. }
  108. }
  109. /**
  110. * Creates an observable for an Ajax request with either a request object with
  111. * url, headers, etc or a string for a URL.
  112. *
  113. * @example
  114. * source = Rx.Observable.ajax('/products');
  115. * source = Rx.Observable.ajax({ url: 'products', method: 'GET' });
  116. *
  117. * @param {string|Object} request Can be one of the following:
  118. * A string of the URL to make the Ajax call.
  119. * An object with the following properties
  120. * - url: URL of the request
  121. * - body: The body of the request
  122. * - method: Method of the request, such as GET, POST, PUT, PATCH, DELETE
  123. * - async: Whether the request is async
  124. * - headers: Optional headers
  125. * - crossDomain: true if a cross domain request, else false
  126. * - createXHR: a function to override if you need to use an alternate
  127. * XMLHttpRequest implementation.
  128. * - resultSelector: a function to use to alter the output value type of
  129. * the Observable. Gets {@link AjaxResponse} as an argument.
  130. * @return {Observable} An observable sequence containing the XMLHttpRequest.
  131. * @static true
  132. * @name ajax
  133. * @owner Observable
  134. */
  135. AjaxObservable.create = (() => {
  136. const create = (urlOrRequest) => {
  137. return new AjaxObservable(urlOrRequest);
  138. };
  139. create.get = ajaxGet;
  140. create.post = ajaxPost;
  141. create.delete = ajaxDelete;
  142. create.put = ajaxPut;
  143. create.patch = ajaxPatch;
  144. create.getJSON = ajaxGetJSON;
  145. return create;
  146. })();
  147. /**
  148. * We need this JSDoc comment for affecting ESDoc.
  149. * @ignore
  150. * @extends {Ignored}
  151. */
  152. export class AjaxSubscriber extends Subscriber {
  153. constructor(destination, request) {
  154. super(destination);
  155. this.request = request;
  156. this.done = false;
  157. const headers = request.headers = request.headers || {};
  158. // force CORS if requested
  159. if (!request.crossDomain && !headers['X-Requested-With']) {
  160. headers['X-Requested-With'] = 'XMLHttpRequest';
  161. }
  162. // ensure content type is set
  163. if (!('Content-Type' in headers) && !(root.FormData && request.body instanceof root.FormData) && typeof request.body !== 'undefined') {
  164. headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
  165. }
  166. // properly serialize body
  167. request.body = this.serializeBody(request.body, request.headers['Content-Type']);
  168. this.send();
  169. }
  170. next(e) {
  171. this.done = true;
  172. const { xhr, request, destination } = this;
  173. const response = new AjaxResponse(e, xhr, request);
  174. destination.next(response);
  175. }
  176. send() {
  177. const { request, request: { user, method, url, async, password, headers, body } } = this;
  178. const createXHR = request.createXHR;
  179. const xhr = tryCatch(createXHR).call(request);
  180. if (xhr === errorObject) {
  181. this.error(errorObject.e);
  182. }
  183. else {
  184. this.xhr = xhr;
  185. // set up the events before open XHR
  186. // https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
  187. // You need to add the event listeners before calling open() on the request.
  188. // Otherwise the progress events will not fire.
  189. this.setupEvents(xhr, request);
  190. // open XHR
  191. let result;
  192. if (user) {
  193. result = tryCatch(xhr.open).call(xhr, method, url, async, user, password);
  194. }
  195. else {
  196. result = tryCatch(xhr.open).call(xhr, method, url, async);
  197. }
  198. if (result === errorObject) {
  199. this.error(errorObject.e);
  200. return null;
  201. }
  202. // timeout, responseType and withCredentials can be set once the XHR is open
  203. if (async) {
  204. xhr.timeout = request.timeout;
  205. xhr.responseType = request.responseType;
  206. }
  207. if ('withCredentials' in xhr) {
  208. xhr.withCredentials = !!request.withCredentials;
  209. }
  210. // set headers
  211. this.setHeaders(xhr, headers);
  212. // finally send the request
  213. result = body ? tryCatch(xhr.send).call(xhr, body) : tryCatch(xhr.send).call(xhr);
  214. if (result === errorObject) {
  215. this.error(errorObject.e);
  216. return null;
  217. }
  218. }
  219. return xhr;
  220. }
  221. serializeBody(body, contentType) {
  222. if (!body || typeof body === 'string') {
  223. return body;
  224. }
  225. else if (root.FormData && body instanceof root.FormData) {
  226. return body;
  227. }
  228. if (contentType) {
  229. const splitIndex = contentType.indexOf(';');
  230. if (splitIndex !== -1) {
  231. contentType = contentType.substring(0, splitIndex);
  232. }
  233. }
  234. switch (contentType) {
  235. case 'application/x-www-form-urlencoded':
  236. return Object.keys(body).map(key => `${encodeURI(key)}=${encodeURI(body[key])}`).join('&');
  237. case 'application/json':
  238. return JSON.stringify(body);
  239. default:
  240. return body;
  241. }
  242. }
  243. setHeaders(xhr, headers) {
  244. for (let key in headers) {
  245. if (headers.hasOwnProperty(key)) {
  246. xhr.setRequestHeader(key, headers[key]);
  247. }
  248. }
  249. }
  250. setupEvents(xhr, request) {
  251. const progressSubscriber = request.progressSubscriber;
  252. function xhrTimeout(e) {
  253. const { subscriber, progressSubscriber, request } = xhrTimeout;
  254. if (progressSubscriber) {
  255. progressSubscriber.error(e);
  256. }
  257. subscriber.error(new AjaxTimeoutError(this, request)); //TODO: Make betterer.
  258. }
  259. ;
  260. xhr.ontimeout = xhrTimeout;
  261. xhrTimeout.request = request;
  262. xhrTimeout.subscriber = this;
  263. xhrTimeout.progressSubscriber = progressSubscriber;
  264. if (xhr.upload && 'withCredentials' in xhr) {
  265. if (progressSubscriber) {
  266. let xhrProgress;
  267. xhrProgress = function (e) {
  268. const { progressSubscriber } = xhrProgress;
  269. progressSubscriber.next(e);
  270. };
  271. if (root.XDomainRequest) {
  272. xhr.onprogress = xhrProgress;
  273. }
  274. else {
  275. xhr.upload.onprogress = xhrProgress;
  276. }
  277. xhrProgress.progressSubscriber = progressSubscriber;
  278. }
  279. let xhrError;
  280. xhrError = function (e) {
  281. const { progressSubscriber, subscriber, request } = xhrError;
  282. if (progressSubscriber) {
  283. progressSubscriber.error(e);
  284. }
  285. subscriber.error(new AjaxError('ajax error', this, request));
  286. };
  287. xhr.onerror = xhrError;
  288. xhrError.request = request;
  289. xhrError.subscriber = this;
  290. xhrError.progressSubscriber = progressSubscriber;
  291. }
  292. function xhrReadyStateChange(e) {
  293. const { subscriber, progressSubscriber, request } = xhrReadyStateChange;
  294. if (this.readyState === 4) {
  295. // normalize IE9 bug (http://bugs.jquery.com/ticket/1450)
  296. let status = this.status === 1223 ? 204 : this.status;
  297. let response = (this.responseType === 'text' ? (this.response || this.responseText) : this.response);
  298. // fix status code when it is 0 (0 status is undocumented).
  299. // Occurs when accessing file resources or on Android 4.1 stock browser
  300. // while retrieving files from application cache.
  301. if (status === 0) {
  302. status = response ? 200 : 0;
  303. }
  304. if (200 <= status && status < 300) {
  305. if (progressSubscriber) {
  306. progressSubscriber.complete();
  307. }
  308. subscriber.next(e);
  309. subscriber.complete();
  310. }
  311. else {
  312. if (progressSubscriber) {
  313. progressSubscriber.error(e);
  314. }
  315. subscriber.error(new AjaxError('ajax error ' + status, this, request));
  316. }
  317. }
  318. }
  319. ;
  320. xhr.onreadystatechange = xhrReadyStateChange;
  321. xhrReadyStateChange.subscriber = this;
  322. xhrReadyStateChange.progressSubscriber = progressSubscriber;
  323. xhrReadyStateChange.request = request;
  324. }
  325. unsubscribe() {
  326. const { done, xhr } = this;
  327. if (!done && xhr && xhr.readyState !== 4 && typeof xhr.abort === 'function') {
  328. xhr.abort();
  329. }
  330. super.unsubscribe();
  331. }
  332. }
  333. /**
  334. * A normalized AJAX response.
  335. *
  336. * @see {@link ajax}
  337. *
  338. * @class AjaxResponse
  339. */
  340. export class AjaxResponse {
  341. constructor(originalEvent, xhr, request) {
  342. this.originalEvent = originalEvent;
  343. this.xhr = xhr;
  344. this.request = request;
  345. this.status = xhr.status;
  346. this.responseType = xhr.responseType || request.responseType;
  347. this.response = parseXhrResponse(this.responseType, xhr);
  348. }
  349. }
  350. /**
  351. * A normalized AJAX error.
  352. *
  353. * @see {@link ajax}
  354. *
  355. * @class AjaxError
  356. */
  357. export class AjaxError extends Error {
  358. constructor(message, xhr, request) {
  359. super(message);
  360. this.message = message;
  361. this.xhr = xhr;
  362. this.request = request;
  363. this.status = xhr.status;
  364. this.responseType = xhr.responseType || request.responseType;
  365. this.response = parseXhrResponse(this.responseType, xhr);
  366. }
  367. }
  368. function parseXhrResponse(responseType, xhr) {
  369. switch (responseType) {
  370. case 'json':
  371. if ('response' in xhr) {
  372. //IE does not support json as responseType, parse it internally
  373. return xhr.responseType ? xhr.response : JSON.parse(xhr.response || xhr.responseText || 'null');
  374. }
  375. else {
  376. // HACK(benlesh): TypeScript shennanigans
  377. // tslint:disable-next-line:no-any latest TS seems to think xhr is "never" here.
  378. return JSON.parse(xhr.responseText || 'null');
  379. }
  380. case 'xml':
  381. return xhr.responseXML;
  382. case 'text':
  383. default:
  384. // HACK(benlesh): TypeScript shennanigans
  385. // tslint:disable-next-line:no-any latest TS seems to think xhr is "never" here.
  386. return ('response' in xhr) ? xhr.response : xhr.responseText;
  387. }
  388. }
  389. /**
  390. * @see {@link ajax}
  391. *
  392. * @class AjaxTimeoutError
  393. */
  394. export class AjaxTimeoutError extends AjaxError {
  395. constructor(xhr, request) {
  396. super('ajax timeout', xhr, request);
  397. }
  398. }
  399. //# sourceMappingURL=AjaxObservable.js.map