关于不同例子的超常行为的解释,见。 我为什么在一个职能范围内加以修改后,我的变数没有改变? - 《民法》参考资料
如果你已经理解这一问题,就能够找到以下可能的解决办法:。
The problem
<>A,Ajax > 代表synchronous 。 这意味着将请求(或接受答复)放在正常执行流动之外。 举例来说,$.ajax Return Immediate and the next statement,return results;, is implementing before the function sent as success, callsback was Even calls.
这里是一种类似做法,希望能够使同步流动和同步流动之间的区别更加明确:
Synchronous
请你打电话给朋友,请他找你。 虽然这可能会有一段时期,但你在等待电话和星号进入空间,直到你的朋友给你必要的答案。
当你履行包含“正常”法典的职能时,情况也是如此:
function findItem() {
var item;
while(item_not_found) {
// search
}
return item;
}
var item = findItem();
// Do something with item
doSomethingElse();
即便是find 项目可能需要很长时间才能执行,任何在<条码>后加入的代码:至wait,直至该功能恢复。
Asynchronous
出于同样的原因,你再次请你的朋友发言。 但此时,你告诉他,你正在忙之中,他应该在你的移动电话上打回<>。 你hang,离开房屋,尽一切计划做事。 一旦你的朋友打电话给你,你将处理他给你的信息。
这正是你在阿贾克斯提出请求时发生的事情。
findItem(function(item) {
// Do something with the item
});
doSomethingElse();
处决不是等待答复,而是立即继续进行,Ajax呼吁之后的陈述得到执行。 为了最终做出回应,你提供了一旦收到答复即称为“召回<>>/em”的职能(注意到什么? ? 发出这一呼吁之后提出的任何声明均在发出呼吁之前执行。
Solution(s)
www.un.org/Depts/DGACM/index_spanish.htm Embrace the asynchronous nature ofgust Java! 虽然某些同步作业提供了同步的对应单位(也提供“Ajax”),但通常会阻止使用,特别是在浏览器的情况下。
你们为什么不问?
贾瓦文位于浏览器的电离层,任何长期过程都将锁定电离层,使其无法应对。 此外,对贾瓦文的执行时间有上限,浏览器将询问用户是否继续执行。
All of this results in a really bad user experience. The user won t be able to tell whether everything is working fine or not. Furthermore, the effect will be worse for users with a slow connection.
In the following we will look at three different solutions that are all building on top of each other:
- Promises with
async/await (ES2017+, available in older browsers if you use a transpiler or regenerator)
- Callbacks (popular in node)
- Promises with
then() (ES2015+, available in older browsers if you use one of the many promise libraries)
www.un.org/Depts/DGACM/index_spanish.htm 现有浏览器和第7+号:。
ES2017+: Promises with async/await
2017年发表的《欧洲海事委员会章程》介绍了 为履行同步职能而提供的支持<>。 在<代码>sync和await的帮助下,你可以在“同步风格”中写成“同步”。 法典仍然很不成熟,但更容易读/理解。
www.un.org/Depts/DGACM/index_spanish.htm 在承诺的基础上再接再厉:<条码>sync的功能始终回报承诺:<条码>await<>>>>>>>“不校正”许诺,或者导致承诺的价值在承诺被拒时得到解决或留下错误。
<>Important: 您只能使用<代码>await在<条码>内或https://developer.mozilla.org/en-US/docs/Web/Java/Guide/Modules” rel=“noreferer”栏内。 顶级<代码>await 模块外没有支持,因此,你可能不得不做一个综合二FE(。 立即生效:<>条码>。 如果不使用模块,情况如何。
https://developer.mozilla.org/en-US/docs/Web/Javagust/Reference/Statements/async_Function”rel=“noretinger”>async和
Here is an example that elaborates the delay function findItem() above:
// Using superagent which will return a promise.
var superagent = require( superagent )
// This is isn t declared as `async` because it already returns a promise
function delay() {
// `delay` returns a promise
return new Promise(function(resolve, reject) {
// Only `delay` is able to resolve or reject the promise
setTimeout(function() {
resolve(42); // After 3 seconds, resolve the promise with value 42
}, 3000);
});
}
async function getAllBooks() {
try {
// GET a list of book IDs of the current user
var bookIDs = await superagent.get( /user/books );
// wait for 3 seconds (just for the sake of this example)
await delay();
// GET information about each book
return superagent.get( /books/ids= +JSON.stringify(bookIDs));
} catch(error) {
// If any of the awaited promises was rejected, this catch block
// would catch the rejection reason
return null;
}
}
// Start an IIFE to use `await` at the top level
(async function(){
let books = await getAllBooks();
console.log(books);
})();
Current browser 和 async/await。 在regenerator的帮助下,你还可以支持旧的环境。 (或使用再生器的工具,例如Babel。)
Let functions accept callbacks
退约是指职能1转为职能时。 2. 职能2可随时随行1。 在一个同步的进程中,只要完成同步进程,就会叫退。 通常,结果会反馈。
在问题的例子中,你可以提出<条码>foo接受退约,并将其作为<条码>。 因此,
var result = foo();
// Code that depends on result
......
foo(function(result) {
// Code that depends on result
});
我们在此界定了“在线”职能,但你可以通过任何职能参考:
function myCallback(result) {
// Code that depends on result
}
foo(myCallback);
定义如下:
function foo(callback) {
$.ajax({
// ...
success: callback
});
}
。 当我们称之为“标准/编码”时,我们将其通过。 一、Ajax申请一经成功,$.ajax将打电话到 查询<>/code>,并通过对反馈的答复(可参见result,因为这正是我们如何界定反馈。
你们也可以处理对策,然后把对策传回:
function foo(callback) {
$.ajax({
// ...
success: function(response) {
// For example, filter the response
callback(filtered_response);
}
});
}
It s easier to write code using callbacks than it may seem. After all, JavaScript in the browser is heavily event-driven (DOM events). Receiving the Ajax response is nothing else but an event.
Difficulties could arise when you have to work with third-party code, but most problems can be solved by just thinking through the application flow.
ES2015+: Promises with then()
The Promise API is a new feature of ECMAScript 6 (ES2015), but it has good browser support already. There are also many libraries which implement the standard Promises API and provide additional methods to ease the use and composition of asynchronous functions (e.g., bluebird).
通行证是future值的集装箱。 如果承诺得到价值(即resolved)或取消价值(rejected),则通知所有希望获得这一价值的“列入名单者”。
The advantage over plain callbacks is that they allow you to decouple your code and they are easier to compose.
这里是利用承诺的一个例子:
function delay() {
// `delay` returns a promise
return new Promise(function(resolve, reject) {
// Only `delay` is able to resolve or reject the promise
setTimeout(function() {
resolve(42); // After 3 seconds, resolve the promise with value 42
}, 3000);
});
}
delay()
.then(function(v) { // `delay` returns a promise
console.log(v); // Log the value once it is resolved
})
.catch(function(v) {
// Or do something else if it is rejected
// (it would not happen in this example, since `reject` is not called).
});
.as-console-wrapper { max-height: 100% !important; top: 0; }
Applied to our Ajax call we could use promises like this:
function ajax(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
resolve(this.responseText);
};
xhr.onerror = reject;
xhr.open( GET , url);
xhr.send();
});
}
ajax("https://jsonplaceholder.typicode.com/todos/1")
.then(function(result) {
console.log(result); // Code depending on result
})
.catch(function() {
// An error occurred
});
.as-console-wrapper { max-height: 100% !important; top: 0; }
阐述允诺提供的所有好处不属于本答复的范围,但如果你撰写新的法典,你应认真考虑这些好处。 它们为你的法典提供了很大的抽象和分离。
More information about promises: HTML5 rocks - JavaScript Promises.
Side note: jQuery s deferred objects
递延物体是指 j履行承诺的习惯(在产品预报标准化之前)。 他们几乎像承诺一样行事,但暴露了一种稍有不同的趋势。
Every Ajax method of jQuery already returns a "deferred object" (actually a promise of a deferred object) which you can just return from your function:
function ajax() {
return $.ajax(...);
}
ajax().done(function(result) {
// Code depending on result
}).fail(function() {
// An error occurred
});
Side note: Promise gotchas
考虑到未来价值的承诺和推迟目标只是containers,它们不是价值本身。 例如,你有:
function checkPassword() {
return $.ajax({
url: /password ,
data: {
username: $( #username ).val(),
password: $( #password ).val()
},
type: POST ,
dataType: json
});
}
if (checkPassword()) {
// Tell the user they re logged in
}
This code misunderstands the above asynchronous issues. Specifically, $.ajax() doesn t freeze the code while it checks the /password page on your server - it sends a request to the server and while it waits, it immediately returns a jQuery Ajax Deferred object, not the response from the server. That means the if statement is going to always get this Deferred object, treat it as true, and proceed as though the user is logged in. Not good.
但是,固定办法很容易:
checkPassword()
.done(function(r) {
if (r) {
// Tell the user they re logged in
} else {
// Tell the user their password was bad
}
})
.fail(function(x) {
// Tell the user something bad happened
});
Not recommended: Synchronous "Ajax" calls
As I mentioned, some(!) asynchronous operations have synchronous counterparts. I don t advocate their use, but for completeness sake, here is how you would perform a synchronous call:
Without jQuery
If you directly use a XMLHttpRequest object, pass false as third argument to .open.
jQuery
If you use jQuery, you can set the async option to false. Note that this option is deprecated since jQuery 1.8.
You can then either still use a success callback or access the responseText property of the jqXHR object:
function foo() {
var jqXHR = $.ajax({
//...
async: false
});
return jqXHR.responseText;
}
如果您使用任何其他j Query Ajax方法,例如$.get,$.getJSON/code>,你必须将其改为$.ajax。 (因为你只能将配置参数通过<代码>。
Heads up! It is not possible to make a synchronous JSONP request. JSONP by its very nature is always asynchronous (one more reason to not even consider this option).
