-
-
Save joe-oli/2f16c458f79a0c81e9d4085eced5b1a6 to your computer and use it in GitHub Desktop.
Shows the implementation of a method which uses a Promise to report the success or failure of an XMLHttpRequest. Based on Mozilla Developer Network documentation.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*jslint devel: true, browser: true, es5: true */ | |
/*global Promise */ | |
// $http function is implemented in order to follow the standard Adapter pattern | |
function $http(url) { | |
'use strict'; | |
var core = { | |
// Method that performs the ajax request | |
ajax : function (method, url, args) { | |
// Creating a promise | |
var promise = new Promise(function (resolve, reject) { | |
// Instantiates the XMLHttpRequest | |
var client = new XMLHttpRequest(), | |
uri = url, | |
argcount, | |
key; | |
if (args && (method === 'POST' || method === 'PUT')) { | |
uri += '?'; | |
argcount = 0; | |
for (key in args) { | |
if (args.hasOwnProperty(key)) { | |
if (argcount > 0) { | |
uri += '&'; | |
} | |
argcount += 1; | |
uri += encodeURIComponent(key) + '=' + encodeURIComponent(args[key]); | |
} | |
} | |
} | |
client.open(method, uri); | |
client.send(); | |
client.onload = function () { | |
if (this.status >= 200 && this.status < 300) { | |
// Performs the function "resolve" when this.status is equal to 2xx | |
resolve(this.response); | |
} else { | |
// Performs the function "reject" when this.status is different than 2xx | |
reject(this.statusText); | |
} | |
}; | |
client.onerror = function () { | |
reject(this.statusText); | |
}; | |
}); | |
// Return the promise | |
return promise; | |
} | |
}; | |
// Adapter pattern | |
return { | |
'get' : function (args) { | |
return core.ajax('GET', url, args); | |
}, | |
'post' : function (args) { | |
return core.ajax('POST', url, args); | |
}, | |
'put' : function (args) { | |
return core.ajax('PUT', url, args); | |
}, | |
'delete' : function (args) { | |
return core.ajax('DELETE', url, args); | |
} | |
}; | |
} | |
function makeHttpRequest() { | |
'use strict'; | |
/* | |
Cross-site XMLHttpRequest | |
Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard. | |
As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work. | |
Otherwise, an INVALID_ACCESS_ERR exception is thrown. | |
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS | |
*/ | |
var mdnAPI = 'https://developer.mozilla.org/en-US/search.json', // Does not allow cross-site requests | |
payload = { | |
'topic' : 'js', | |
'q' : 'Promise' | |
}, | |
testAPI = "http://jsonplaceholder.typicode.com/posts/1", // Allows cross-site requests | |
callback = { | |
success : function (data) { | |
console.log(1, 'success', JSON.parse(data)); | |
}, | |
error : function (data) { | |
console.log(data); | |
//console.log(2, 'error', JSON.parse(data)); | |
} | |
}; | |
$http(testAPI) | |
.get() | |
.then(callback.success) | |
.catch(callback.error); | |
/* | |
// Executes the method call | |
$http(mdnAPI) | |
.get(payload) | |
.then(callback.success) | |
.catch(callback.error); | |
// Executes the method call but an alternative way (1) to handle Promise Reject case | |
$http(mdnAPI) | |
.get(payload) | |
.then(callback.success, callback.error); | |
// Executes the method call but an alternative way (2) to handle Promise Reject case | |
$http(mdnAPI) | |
.get(payload) | |
.then(callback.success) | |
.then(undefined, callback.error); | |
*/ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment