Ste*_*ger 9 javascript ajax asynchronous synchronize async-await
我最近不得不纠正Web应用程序中的安全问题(我没有创建).安全问题是,它使用的是非http-only cookie.所以我不得不设置会话cookie的http-only,这意味着你不能再从javascript中读取(并设置)cookie的值.到目前为止这么容易缝合.
更深层次的问题是,使用了Web应用程序
JSON.parse(readCookie(cookieName)).some_value
在一百万个地方.
因此,为了不必重写"一百万行代码",我必须创建一个ajax-endpoint,它将http-cookie的内容作为JSON,并重写readCookie以使用SYNCHRONOUS ajax请求(而不是读取cookie) ),因为剩下的可怕代码希望readCookie在这些百万个地方同步,因为读取cookie是同步的.
现在的问题是,我得到了很多
主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用.如需更多帮助,请查看https://xhr.spec.whatwg.org/.
它会调试调试控制台,更不用说某人决定删除此功能的可能性.
因此,我正在研究新的ES async/await关键字,以查看是否可以帮助以某种方式同步创建异步ajax请求(我知道我必须使用IE 11的包装器).
到目前为止,我阅读了这些页面
https://www.twilio.com/blog/2015/10/asyncawait-the-hero-javascript-deserved.html
https://pouchdb.com/2015/03/05/taming- -async-beast-with-es7.html
https://jakearchibald.com/2014/es7-async-functions/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements /功能*
但看起来所有新的异步内容似乎只能解决编写异步代码更容易的问题,而不是在异步和现有同步代码之间启用互操作.使用我读过的信息,我现在可以等待异步ajax调用的结果,就像它是同步的一样,但问题是 - await只允许在异步方法中使用...这意味着即使我可以等待它的结果是同步的,getCookie方法仍然必须是异步的,这使得所有的东西看起来完全没有意义(除非你的整个代码都是异步的,当你不从头开始时肯定不是这样). .
我似乎无法找到有关如何在同步和异步代码之间进行交互的任何信息.
例如,在C#中,我可以使用.Result从同步上下文中调用异步方法,例如
AsyncContext.RunTask(MyAsyncMethod).Result;
或更简单但更少死锁安全
MyAsyncMethod(args).Result;
有没有办法在JavaScript中实现相同的目标？
当代码库的其余部分是同步的,没有任何互操作的可能性时,传播异步似乎没什么意义......在2017 AD中,真的还没有办法在JavaScript中实现这一点吗？
我再次强调:
我知道如何进行同步ajax调用,并且我知道如何使用带有回调和/或承诺的异步ajax调用.
但是我无法弄清楚的是如何同步async-ajax-call (没有回调),因此它可以从期望同步运行的代码中使用(在"一百万个地方")!
这是我到目前为止已经试过:
(请注意,我是使用 loadQuote 或 main,文本 "罗恩曾经说过" 还是第一次出现在调试控制台,这应该不是如果的情况下异步 AJAX调用已经解决同步)
<!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 getQuote() {
var quote;
return new Promise(function (resolve, reject) {
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);
quote = bError;
resolve(quote)
}, true);
/*
request('./ajax/json.ashx', function (error, response, body) {
quote = body;
resolve(quote);
});
*/
});
}
async function main() {
var quote = await getQuote();
console.log("quote: ", quote);
}
function myGetQuote() {
var quote = async function () { return await getQuote(); };
console.log("quote: ", quote);
return quote;
}
function spawn(generatorFunc) {
function continuer(verb, arg) {
var result;
try {
result = generator[verb](arg);
} catch (err) {
return Promise.reject(err);
}
if (result.done) {
return result.value;
} else {
return Promise.resolve(result.value).then(onFulfilled, onRejected);
}
}
var generator = generatorFunc();
var onFulfilled = continuer.bind(continuer, "next");
var onRejected = continuer.bind(continuer, "throw");
return onFulfilled();
}
function loadQuote()
{
return spawn(function *() {
try {
let story = yield getQuote();
console.log("story:", story);
// addHtmlToPage(story.heading);
// for (let chapter of story.chapterURLs.map(getJSON)) { addHtmlToPage((yield chapter).html); } addTextToPage("All done");
} catch (err) {
//addTextToPage("Argh, broken: " + err.message);
console.log("Argh, broken: " + err.message);
}
//document.querySelector('.spinner').style.display = 'none';
});
}
function autorun()
{
console.clear();
// main();
// main();
loadQuote();
//var quote = myGetQuote();
// console.log("quote: ", quote);
console.log('Ron once said,');
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", autorun, false);
else if (document.attachEvent) document.attachEvent("onreadystatechange", autorun);
else window.onload = autorun;
</script>
</body>
</html>
但问题是 - 等待仅允许在异步方法中使用.
确切地说,没有,没有解决方法.JavaScript的run-to-completion语义要求在任何挂起的异步操作(例如回调到异步XHR调用的XHR处理程序)之前完成同步函数.
JavaScript在给定线程上运行的方式是它处理作业队列1:
(它有点复杂,它有两个层次,但这与这个特定问题无关.)
XHR完成等等是在队列中安排的作业.无法暂停作业,从队列中运行另一个作业,然后选择暂停的作业.async/ 为处理异步操作await提供了极其简单的语法,但它们不会改变作业队列的性质.
对于您的情况,我看到的唯一解决方案是一直异步到顶级.这可能没有您想象的那么复杂(或者可能会如此).在许多情况下,它在许多功能async面前添加function.但是,使这些函数异步可能会产生明显的连锁效应(例如,在事件处理程序变为异步时同步的东西会改变与UI相关的时间).
例如,考虑这个同步代码:
var btn = document.getElementById("btn");
btn.addEventListener("click", handler, false);
function handler(e) {
console.log("handler triggered");
doSomething();
console.log("handler done");
}
function doSomething() {
doThis();
doThat();
doTheOther();
}
function doThis() {
console.log("doThis - start & end");
}
function doThat() {
console.log("doThat - start");
// do something that takes a while
var stop = Date.now() + 1000;
while (Date.now() < stop) {
// wait
}
console.log("doThat - end");
}
function doTheOther() {
console.log("doThat - start & end");
}.as-console.wrapper {
max-height: 80% !important;
}<input type="button" id="btn" value="Click Me">
<p id="text"></p>现在我们想制作make doThatasync(注意:只能在最近支持async/的浏览器上运行await,比如Chrome;遗憾的是Stack Snippet的Babel配置不包含它们,因此我们不能使用该选项):
var btn = document.getElementById("btn");
btn.addEventListener("click", handler, false);
// handler can't be async
function handler(e) {
console.log("handler triggered");
doSomething();
console.log("handler done");
}
// doSomething can be
async function doSomething() {
doThis();
await doThat();
doTheOther();
}
function doThis() {
console.log("doThis - start & end");
}
// make doThat async
async function doThat() {
console.log("doThat - start");
// simulate beginning async operation with setTimeout
return new Promise(resolve => {
setTimeout(() => {
// do something that takes a while
var stop = Date.now() + 1000;
while (Date.now() < stop) {
// wait
}
console.log("doThat - end (async)");
}, 0);
});
}
function doTheOther() {
console.log("doThat - start & end");
}.as-console.wrapper {
max-height: 80% !important;
}<input type="button" id="btn" value="Click Me">
<p id="text"></p>关键是我们尽快去异步doSomething(因为handler不能异步).但是,当然,这会改变与处理程序相关的工作时间.(当然,我们可能应该更新handler以捕获来自promise`doSomething()返回的错误.)
1这是JavaScript规范术语.HTML5规范(也涉及到这一点)称它们为"任务"而不是"作业".
你的做法有问题。await首先，为了使async操作完成，部分代码必须将其自身包装在async函数中。
例如：
async function asyncExample () {
try {
const response = await myPromise()
// the code here will wait for the
// promise to fullfil
} catch (error) {
// the code here will execute if the promise fails
}
}
function nonAsyncExample () {
asyncExample ()
console.log('this will not wait for the async to finish')
// as it's not wrapped in an async function itself
}
您可以尝试将autorun()函数声明为async，但这可能会导致额外的复杂性。
我的建议是，如果您的 JS 应用程序有一个入口点，它是由onload事件触发的，请尝试在此点之前执行 ajax 调用，然后将其存储在本地变量中并从那里查询。
例如，如果您的代码如下所示：
function init () {
// perform initialisations here
}
document.addEventListener("DOMContentLoaded", init)
将其更改为
document.addEventListener("DOMContentLoaded", function () {
getAjaxConfig().then(function (response) {
window.cookieStash = response
init()
}
})
cookieStash并从应用程序的其余部分获取您的数据。您无需等待任何其他事情。
| 归档时间： |
|
| 查看次数： |
10374 次 |
| 最近记录： |