With the advent of ES2017, the answer to this question is async/await.
It's THE JS solution for “callback hell”.
Promise is the equivalent to System.Threading.Tasks.Task.
You can await a Promise in an async function.
Unlike in C#, there is no way to call an async-function in a synchronous function.
So you can await a Promise in an async function, and ONLY in an async-function.
async function foo()
{
return 123;
}
let result = await foo();
console.log(result)
You can use TypeScript or babel to transpile async/await back to ES5 (while IE11 exists).
There's a promise polyfill for IE11.
See ECMA-draft 262 or MDN for closer information.
A good example of promise is the FETCH api.
The fetch-API is good for async/await ajax requests.
Why ? Because if you have to promisify XmlHttpRequest, it looks like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="google" value="notranslate" />
<!--
<meta name="author" content="name" />
<meta name="description" content="description here" />
<meta name="keywords" content="keywords,here" />
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
-->
<title>Title</title>
<style type="text/css" media="all">
body
{
background-color: #0c70b4;
color: #546775;
font: normal 400 18px "PT Sans", sans-serif;
-webkit-font-smoothing: antialiased;
}
</style>
<script type="text/javascript">
<!--
// http://localhost:57566/foobar/ajax/json.ashx
var ajax = {};
ajax.x = function () {
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest();
}
var versions = [
"MSXML2.XmlHttp.6.0",
"MSXML2.XmlHttp.5.0",
"MSXML2.XmlHttp.4.0",
"MSXML2.XmlHttp.3.0",
"MSXML2.XmlHttp.2.0",
"Microsoft.XmlHttp"
];
var xhr;
for (var i = 0; i < versions.length; i++) {
try {
xhr = new ActiveXObject(versions[i]);
break;
} catch (e) {
}
}
return xhr;
};
ajax.send = function (url, callback, method, data, async) {
if (async === undefined)
{
async = true;
}
var x = ajax.x();
x.open(method, url, async);
x.onreadystatechange = function () {
if (x.readyState == 4) {
callback(x.responseText)
}
};
if (method == 'POST') {
x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
x.send(data)
};
ajax.get = function (url, data, callback, async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
};
ajax.post = function (url, data, callback, async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url, callback, 'POST', query.join('&'), async)
};
///////////
function testAjaxCall() {
ajax.get("./ajax/json.ashx", null, function (bError, strMessage, iStatus)
{
console.log("args:", arguments);
console.log("Error:", bError);
console.log("Message:", strMessage);
console.log("Status:", iStatus);
}
, true
);
}
-->
</script>
</head>
<body>
<script type="text/javascript">
function ajaxGet(url, data)
{
var result;
return new Promise(function (resolve, reject)
{
ajax.get(url, data, function (bError, strMessage, iStatus)
{
// console.log("args:", arguments);
// console.log("Error:", bError);
// console.log("Message:", strMessage);
// console.log("Status:", iStatus);
result = bError;
resolve(result);
}
,true
);
}
);
}
async function main()
{
var ajaxResult = await ajaxGet("./ajax/json.ashx");
console.log("ajaxResult: ", ajaxResult);
}
async function lol()
{
var res = null;
var myPromise = new Promise(function (resolve, reject)
{
// Standard AJAX request setup and load.
var request = new XMLHttpRequest();
// Request a user's comment from our fake blog.
request.open('GET', 'https://localhost:57566/ajax/json.ashx');
/*
// Set function to call when resource is loaded.
// Onload same as onreadystatechange - onload added with XHR2
request.onload = function ()
{
// internal server error/404
if (request.status === 200)
{
res = request.response;
// console.log(request.response);
console.log("onload- resolving promise");
resolve(request.response);
} else
{
console.log("onload- rejectinv promise");
reject('Page loaded, but status not OK.');
}
};
*/
request.onreadystatechange = function ()
{
console.log("readystate:", request.readyState);
console.log("status:", request.status)
if (request.readyState != 4) return;
// XMLHttpRequest.DONE = 200, 0=cancelled 304 = redirect
//if (!(request.status != 200 && request.status != 304 && request.status != 0))
if (request.status === 200)
{
console.log("successy")
resolve(request.responseText); // Success
return;
}
if (request.status != 200 && request.status != 0 && request.status != 304)
{
console.log('HTTP error ' + request.status);
// reject('Page loaded, but status not OK.');
reject(new Error("Server error - Status NOK", "filename", "linenum666")); // Error
return;
}
if (request.status === 0)
{
console.log("cancelled:", request)
//resolve(null); // Cancelled, HTTPS protocol error
return;
}
reject(new Error("Strange error", "filename", "linenum666")); // Some Error
};
// Set function to call when loading fails.
request.onerror = function ()
{
// Cannot connect
console.log("OMG OnError");
// reject('Aww, didn\'t work at all. Network connectivity issue.');
reject(new Error("Aww, didn\'t work at all. Network connectivity issue.", "filename", "linenum666")); // Some Error
};
if (!navigator.onLine)
{
console.log("No internet connection");
reject("No internet connection");
}
else
{
try
{
request.send();
}
catch (ex)
{
console.log("send", ex.message, ex);
}
}
});
return myPromise;
}
async function autorun()
{
console.clear();
// await main();
try
{
var resp = await lol();
console.log("resp:", resp);
}
catch (ex)
{
console.log("foo", ex.message, ex);
}
console.log("I am here !");
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", autorun, false);
else if (document.attachEvent) document.attachEvent("onreadystatechange", autorun);
else window.onload = autorun;
</script>
</body>
</html>
https://stackoverflow.com/questions/23263429
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian