Skip to content

URL Request

StefansArya edited this page Apr 7, 2021 · 6 revisions

This feature will help load/obtain data from the server via HTTP request.

Basic usage

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 information

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
   }
}

Adding callback

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);
  });

Aborting request

To abort a request you can use .abort().

var xhr = sf.request('GET', 'http://example.com');
xhr.abort();

Global callback

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");
  }
};

Shortcut

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.

Clone this wiki locally