- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个发出Ajax请求的函数foo
。如何从foo
返回响应?
我尝试从success
回调返回值,以及将响应分配给函数内部的局部变量并返回该局部变量,但是这些方法均未真正返回响应。
function foo() {
var result;
$.ajax({
url: '...',
success: function(response) {
result = response;
// return response; // <- I tried that one as well
}
});
return result;
}
var result = foo(); // It always ends up being `undefined`.
最佳答案
→有关不同示例的异步行为的更一般说明,请参见Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
→如果您已经理解问题,请跳至下面的可能解决方案。
问题
Ajax中的A代表asynchronous。这意味着发送请求(或更确切地说接收响应)已从正常执行流程中删除。在您的示例中,$.ajax
立即返回,并且在调用作为return result;
回调传递的函数之前,将执行下一个语句success
。
这是一个类比,希望可以使同步流和异步流之间的区别更加清晰:
同步
假设您打给朋友一个电话,并请他为您找东西。尽管可能要花一些时间,但您还是要等电话并凝视太空,直到您的朋友给您所需的答案。
当您进行包含“正常”代码的函数调用时,也会发生相同的情况:
function findItem() {
var item;
while(item_not_found) {
// search
}
return item;
}
var item = findItem();
// Do something with item
doSomethingElse();
findItem
可能要花很长时间才能执行,但
var item = findItem();
之后的任何代码都必须等到该函数返回结果为止。
findItem(function(item) {
// Do something with item
});
doSomethingElse();
async/await
的承诺(ES2017 +,如果使用转译器或再生器,则在较旧的浏览器中可用)
then()
的承诺(ES2015 +,如果您使用许多promise库之一,则在较旧的浏览器中可用)
async/await
的承诺
async
和
await
,您可以以“同步样式”编写异步代码。该代码仍然是异步的,但更易于阅读/理解。
async/await
建立在promise之上:
async
函数总是返回promise。
await
“取消包装”承诺,并导致承诺被解决的值或如果承诺被拒绝则引发错误。
await
函数内使用
async
。目前,尚不支持顶级
await
,因此您可能必须进行异步IIFE(
Immediately Invoked Function Expression)才能启动
async
上下文。
async
和
await
的更多信息。
// 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 await 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);
})();
async/await
。您还可以通过在
regenerator(或使用再生器的工具,例如
Babel)的帮助下将代码转换为ES5来支持较旧的环境。
foo
接受回调并将其用作
success
回调。所以这
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);
foo
本身定义如下:
function foo(callback) {
$.ajax({
// ...
success: callback
});
}
callback
指的是我们在调用时传递给
foo
的函数,而只是将其传递给
success
。即一旦Ajax请求成功,
$.ajax
将调用
callback
并将响应传递给回调(可以用
result
引用,因为这是我们定义回调的方式)。
function foo(callback) {
$.ajax({
// ...
success: function(response) {
// For example, filter the response
callback(filtered_response);
}
});
}
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).
});
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("/echo/json")
.then(function(result) {
// Code depending on result
})
.catch(function() {
// An error occurred
});
function ajax() {
return $.ajax(...);
}
ajax().done(function(result) {
// Code depending on result
}).fail(function() {
// An error occurred
});
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
}
$.ajax()
在检查服务器上的“ / password”页面时不会冻结代码-它向服务器发送请求,而在等待时,它立即返回jQuery Ajax Deferred对象,而不是来自的响应。服务器。这意味着
if
语句将始终获得此Deferred对象,将其视为
true
,然后像用户登录一样继续进行。
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
});
XMLHTTPRequest
对象,请将
false
作为第三个参数传递给
.open
。
async
选项设置为
false
。请注意,自jQuery 1.8起不推荐使用此选项。
success
回调或访问
jqXHR object的
responseText
属性:
function foo() {
var jqXHR = $.ajax({
//...
async: false
});
return jqXHR.responseText;
}
$.get
,
$.getJSON
等,则必须将其更改为
$.ajax
(因为您只能将配置参数传递给
$.ajax
)。
关于javascript - 如何从异步调用返回响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40155109/
我正在尝试检查 Entry 中是否存在重复项,并使用内联消息提醒用户该数字存在。 $(document).ready(function(){ $("#con1").blur(function(
我有一个基于类的 View 。我在引导模式上使用 Ajax。为了避免页面刷新,我想使用此类基于 View 返回 JSON 响应而不是 HTTP 响应,但我只看到了如何为基于函数的 View 返回 JS
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
我有一个大型内部企业基于 Web 的应用程序在 IIS6 上运行 ASP.NET 3.5,生成 401 个“未经授权”响应,然后是 200 个“Ok”响应(如 Fiddler 所述)。我知道为什么会发
感谢您研究我的问题。 我有一个node/express服务器,配置了一个server.js文件,它调用urls.js,而urls.js又调用 Controller 来处理http请求,所有这些都配置相
当我使用以下命令时,我得到正确的 JSON 响应: $ curl --data "regno=&dob=&mobile=" https://vitacademics-rel.herokuapp.co
我有一个非常简单的 RESTful 服务,它通过 POST 接收一些表单数据,其目的是在云存储(Amazon S3、Azure Blob 存储等)中简单地保留文本主体(具有唯一 ID)作为一个文件..
UDP 不发送任何 ack,但它会发送任何响应吗? 我已经设置了客户端服务器UDP程序。如果我让客户端向不存在的服务器发送数据,那么客户端会收到任何响应吗? 我的假设是; 客户端 --> 广播服务器地
我有一个电梯项目,其中 有一个扩展 RestHelper 的类,看起来像这样 serve{ "api" / "mystuff" prefix { case a
我们正在寻求覆盖 Kong 错误响应结构并编写自定义消息(即用我们的自定义消息替换“超出 API 速率限制”、“无效的身份验证凭据”等)。 我们要找的错误响应结构(代码是自定义的内部错误代码,与HTT
我正在尝试监听 EKEventStoreChangedNotification 以检查当我的应用程序处于后台时日历是否已更改。 我在 View Controller 的 initWithNibMeth
我了解 javascript,并且正在学习 ASP.NET C# 我想要做什么(完成的是javascript): document.getElementById('divID-1'
是否可以过滤所有 har 对象并仅获取 POST 请求/响应?也许在初始化 BrowserMobProxyServer 期间是这样做的方法?我需要将 har 对象保存到文件中并上传到 har 查看器。
我正在尝试向 Oauth 的 API 发送响应。遗憾的是,Symfony2 文档在解释 $response->headers->set(...); 的所有不同部分方面做得很差。 这是我的 OauthC
我正在尝试测试用例来模拟 api 调用,并使用 python 响应来模拟 api 调用。 下面是我的模拟, with responses.RequestsMock() as rsps: url
在尝试在 Haskell 中进行一些领域驱动设计时,我发现自己遇到了这个问题: data FetchAccessories = FetchAccessories data AccessoriesRes
我正在与 ANT+ USB 棒连接,并用项目 react 器替换我自己天真的“MessageBus”,因为它看起来非常合适。 USB接口(interface)本质上是异步的(单独的输入/输出管道),我
我正在将项目迁移到AFNetworking 2.0。使用AFNetworking 1.0时,我编写了代码来记录控制台中的每个请求/响应。这是代码: -(AFHTTPRequestOperation *
我有以下代码段。 ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){
我有问题......我在 php 中有一个监听器脚本可以执行以下操作: if ($count != 1) {echo 'no';} else { echo "yes";} 因此它会回显"is"或“
我是一名优秀的程序员,十分优秀!