-
-
Notifications
You must be signed in to change notification settings - Fork 5
URL Request
This feature will help load/obtain data from the server via HTTP request.
sf.request(method, url, data, options) /* .then(...).catch(...).finally(...) */ ;
// Parameter 3,4,5 are optional
// And you can pass the callback from parameter 3 or 4 too
sf.request('GET', 'http://example.com').then(function(data, statusCode){
// ...
});
// You can also use await too and also use the shortcut from sf.$ like using jQuery's ajax
var $ = sf.$;
async function(){
let responseJSON = await $.getJSON('url', {data});
}
parameter | required | description |
---|---|---|
method | yes | This HTTP method must be specified with uppercase character like GET ,POST ,DELETE
|
url | yes | Target HTTP URL |
data | - | Data to be sent to the server, can be an Object or FormData
|
options | - | Will be explained below |
callback | - | Success callback when the request completed without error |
The available options are:
options = {
sendType:'JSON', // Send data with application/json Content-Type
receiveType:'JSON', // Automatically parse server response with JSON.parse
// responseType:"arraybuffer", // receiveType should be set to undefined to use this
beforeOpen:function(xhr){
// Callback before XMLHttpRequest is being opened
},
beforeSend:function(xhr){
// Callback before XMLHttpRequest is being sent
}
}
After you call sf.request
, it will return XMLHttpRequest
with additional function for you to add more callback.
You can use then, catch, finally
instead of done, fail, always
sf.request('GET', 'http://example.com')
.done(function(data, statusCode){
// Callback when request success without error
})
.fail(function(statusCode, data){
// Callback when request have an error like request rejected or JSON parse error
})
.always(function(statusCode){
// Callback after .done() and .fail() have been called
})
.progress(function(ev){
// Callback when download progress is running
console.log(ev.loaded, ev.total);
})
.uploadProgress(function(ev){
// Callback when upload progress is running
console.log(ev.loaded, ev.total);
});
To abort a request you can use .abort()
.
var xhr = sf.request('GET', 'http://example.com');
xhr.abort();
If you want to listen to any request error when using sf.request
or sf.API
you can add a callback function on:
sf.request.onerror = function(xhr){}
For success callback also similar.
sf.request.onsuccess = function(xhr){}
But if you want to listen only for some HTTP codes you can add it on:
sf.request.statusCode = {
403:function(){
alert("Access forbidden");
},
500:function(){
alert("Internal server error");
}
};
Similar to ajax, this framework give you some shortcut on sf.$
.
$ = sf.$;
$.get(url, data, options, callback);
$.post(url, data, options, callback);
$.getJSON(url, data, options, callback);
$.postJSON(url, data, options, callback);
The data, options, callback
parameter are optional too, and these function will return XMLHttpRequest
with additional function for adding a callback just like sf.request
.
- Framework
-
Installation
- Build Configuration
- Hot Reload
- Loader
- Model
-
Component
- Reserved Element
- Empty Shell
- Include external template
- Space
-
Views (Router)
- URI
- Static Template
- Language
- Element's query helper
- Events
- URL Request
- Window Extends