mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
feat(http): Http service
This commit is contained in:
74
ionic/components/app/test/net/index.js
Normal file
74
ionic/components/app/test/net/index.js
Normal file
@ -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);
|
||||||
|
}
|
21
ionic/components/app/test/net/main.html
Normal file
21
ionic/components/app/test/net/main.html
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<ion-view>
|
||||||
|
<div id="profile" #profile>
|
||||||
|
<div id="face">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ion-content [parallax]="profile"><!-- [counter]="counter">-->
|
||||||
|
<button primary (click)="doGet()">GET</button>
|
||||||
|
<button primary (click)="doGet404()">GET (404)</button>
|
||||||
|
<button primary (click)="doPost()">POST</button>
|
||||||
|
<button primary (click)="doPut()">PUT</button>
|
||||||
|
<button primary (click)="doDelete()">DELETE</button>
|
||||||
|
<button primary (click)="doPatch()">PATCH</button>
|
||||||
|
|
||||||
|
<div [ng-form-model]="form">
|
||||||
|
<textarea ng-control="requestData" placeholder="JSON to send (optional)" style="border: 1px solid #ccc; width: 100%; height: 140px"></textarea>
|
||||||
|
</div>
|
||||||
|
<div style="margin: 15px">
|
||||||
|
{{resp}}
|
||||||
|
</div>
|
||||||
|
</ion-content>
|
||||||
|
</ion-view>
|
127
ionic/net/http.js
Normal file
127
ionic/net/http.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue
Block a user