From 3bd91c0af223a1a9c0b3d29b97c8626f36642775 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Fri, 26 Jun 2015 12:33:11 -0500 Subject: [PATCH] feat(http): Http service --- ionic/components/app/test/net/index.js | 74 ++++++++++++++ ionic/components/app/test/net/main.html | 21 ++++ ionic/net/http.js | 127 ++++++++++++++++++++++++ 3 files changed, 222 insertions(+) create mode 100644 ionic/components/app/test/net/index.js create mode 100644 ionic/components/app/test/net/main.html create mode 100644 ionic/net/http.js diff --git a/ionic/components/app/test/net/index.js b/ionic/components/app/test/net/index.js new file mode 100644 index 0000000000..62c7492158 --- /dev/null +++ b/ionic/components/app/test/net/index.js @@ -0,0 +1,74 @@ +import {bind, Injector} from 'angular2/di'; +import {bootstrap, ElementRef, NgFor} from 'angular2/angular2' +import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; + +import {Control, ControlGroup, formDirectives} from 'angular2/forms'; + +import {IonicView} from 'ionic/ionic'; +import {Http} from 'ionic/net/http'; + +let testUrl = 'https://ionic-api-tester.herokuapp.com/json'; +let testUrl404 = 'https://ionic-api-tester.herokuapp.com/404'; + +@Component({ selector: 'ion-app' }) +@IonicView({ + templateUrl: 'main.html', + directives: [formDirectives] +}) +class IonicApp { + constructor() { + this.form = new ControlGroup({ + requestData: new Control('') + }) + } + doGet() { + Http.get('http://swapi.co/api/people/1').then((resp) => { + this.resp = resp; + }, (err) => { + this.err = err; + }) + } + doGet404() { + Http.get(testUrl404).then((resp) => { + this.resp = resp; + }, (err) => { + this.err = err; + }) + } + doPost() { + let data = this.form.controls.requestData.value; + Http.post(testUrl, data).then((resp) => { + this.resp = resp; + }, (err) => { + this.err = err; + }) + } + doPut() { + let data = this.form.controls.requestData.value; + Http.put(testUrl, data).then((resp) => { + this.resp = resp; + }, (err) => { + this.err = err; + }) + } + doDelete() { + let data = this.form.controls.requestData.value; + Http.delete(testUrl, data).then((resp) => { + this.resp = resp; + }, (err) => { + this.err = err; + }) + } + doPatch() { + let data = this.form.controls.requestData.value; + Http.patch(testUrl, data).then((resp) => { + this.resp = resp; + }, (err) => { + this.err = err; + }) + } +} + +export function main(ionicBootstrap) { + ionicBootstrap(IonicApp); +} diff --git a/ionic/components/app/test/net/main.html b/ionic/components/app/test/net/main.html new file mode 100644 index 0000000000..8d4fa09085 --- /dev/null +++ b/ionic/components/app/test/net/main.html @@ -0,0 +1,21 @@ + +
+
+
+
+ + + + + + + + +
+ +
+
+ {{resp}} +
+ + diff --git a/ionic/net/http.js b/ionic/net/http.js new file mode 100644 index 0000000000..9c1363161a --- /dev/null +++ b/ionic/net/http.js @@ -0,0 +1,127 @@ +import * as util from 'ionic/util'; + + +/** + * The Http class makes it easy to send GET/POST/PUT/DELETE/PATCH requests + * and send/receive JSON (or anything else) through a simple API. + * + * Http uses the `fetch()` API underneath, or a polyfill if it's not natively supported. + */ +export class Http { + + /** + * The raw fetch() operation. + * + * Generally, you want to use one of get()/post()/put()/delete() but + * this is useful if you want to do something crazy. + * + * @param url the URL to pass to fetch + * @param options the options to configure the fetch + * @return es6 promise from the fetch. + */ + static fetch(url, options) { + return fetch(url, options).then((response) => { + // status "0" to handle local files fetching (e.g. Cordova/Phonegap etc.) + if (response.status === 200 || response.status === 0) { + + // We have a good response, let's check the response headers and return + // deserialized JSON or return the text from the response. + if (response.headers.get('Content-Type') === 'application/json') { + return response.json(); + } + return response.text(); + } else { + return Promise.reject(response, new Error(response.statusText)); + } + }).catch((err) => { + return Promise.reject(err); + }); + } + + static _method(method, url, data, options, sendsJson) { + options = util.defaults(options, { + method: method, + headers: { + 'Accept': 'application/json,text/plain,*/*', + }, + body: (typeof data === 'string') ? data : JSON.stringify(data) + }); + + if(sendsJson) { + options.headers['Content-Type'] = 'application/json'; + } + + return Http.fetch(url, options); + } + + /** + * Send a GET request to the given URL. + * + * By default, options sends the `Accept` header as `application/json,text/plain,* / *`, + * + * @param url the URL to POST to + * @param options the options to configure the post with. + * @return promise + */ + static get(url, options = {}) { + return Http._method('get', url, {}, options); + } + + /** + * Send a POST request to the given URL. + * + * By default, options sends the `Accept` header as `application/json,text/plain,* / *`, + * and the `Content-Type` header as `application/json` + * + * @param url the URL to POST to + * @param options the options to configure the post with. + * @return promise + */ + static post(url, data = {}, options = {}) { + return Http._method('post', url, data, options, true); + } + + /** + * Send a PUT request to the given URL. + * + * By default, options sends the `Accept` header as `application/json,text/plain,* / *`, + * and the `Content-Type` header as `application/json` + * + * @param url the URL to PUT to + * @param data the JSON data to send + * @param options the options to configure the post with. + * @return promise + */ + static put(url, data = {}, options = {}) { + return Http._method('put', url, data, options, true); + } + + /** + * Send a DELETE request to the given URL. + * + * By default, options sends the `Accept` header as `application/json,text/plain,* / *`, + * and the `Content-Type` header as `application/json` + * + * @param url the URL to DELETE to + * @param data the JSON data to send + * @param options the options to configure the post with. + * @return promise + */ + static delete(url, data = {}, options = {}) { + return Http._method('delete', url, data, options, true); + } + + /** + * Send a PATH request to the given URL. + * + * By default, options sends the `Accept` header as `application/json,text/plain,* / *`, + * and the `Content-Type` header as `application/json` + * + * @param url the URL to PATH to + * @param options the options to configure the post with. + * @return promise + */ + static patch(url, data = {}, options = {}) { + return Http._method('patch', url, data, options, true); + } +}