英文:
How can I return correct value from function with multiple ajax requests?
问题
我有一个函数，它包含两个嵌套的Ajax调用。我想在第二个Ajax调用成功时从中返回一个值。我认为这是因为函数已经结束，但Ajax调用仍未结束。但我没有解决它。
我准备了下面的示例代码：
var patato = function(){
$.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
},
success:function(res){
console.log("Work 1")
$.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
},
success:function(res){
console.log("Work 2")
return true;
}
})
}
})
console.log("Çalıştı 3")
}
var patatos = patato();
if(patatos) {
console.log("Patato true")
}else{
console.log("Patato false")
}
请注意，这个代码示例中的问题是，patato 函数不会返回任何值，因为Ajax调用是异步的，函数会在Ajax调用完成之前结束。这就是为什么无法直接从第二个Ajax调用中返回值的原因。要解决这个问题，您可以使用回调函数或者Promise来处理Ajax异步调用的结果。
英文:
I have a function and its have nested two ajax call. I want to return a value inside from second ajax call when ajax call is successed. i think because function ending but the ajaxs call still not end. But i didn't solve it.
I prepared a example code below:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var patato = function(){
$.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
},
success:function(res){
console.log("Work 1")
$.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
},
success:function(res){
console.log("Work 2")
return true;
}
})
}
})
console.log("Çalıştı 3")
}
var patatos = patato();
if(patatos) {
console.log("Patato true")
}else{
console.log("Patato false")
}
<!-- language: lang-html -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<!-- end snippet -->
答案1
得分: 3
Your function should return a promise since you are doing some async work (fetching).
Also, I strongly recommend using async/await to simplify logic and improve readability/maintainability:
async function patato() {
console.log("Çalıştı 3")
const res = await $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
}
});
console.log("Work 1")
// use res if needed...
const res2 = await $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
},
});
console.log("Work 2")
// use res2 if needed...
return true;
}
patato().then(patato => console.log(`Patato ${patato}`));
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
英文:
Your function should return a promise since you are doing some async work (fetching).
Also I strongly recommend to use async/await to simplify logic and improve readability/maintainability:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
async function patato() {
console.log("Çalıştı 3")
const res = await $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
}
});
console.log("Work 1")
//use res if needed...
const res2 = await $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
},
});
console.log("Work 2")
//use res2 if needed...
return true;
}
patato().then(patato => console.log(`Patato ${patato}`));
<!-- language: lang-html -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<!-- end snippet -->
答案2
得分: 2
以下是您要翻译的部分：
"You can also run both AJAX jobs in parallel if the output of the first job is not required for the second one:
async function patato() {
console.log('Çalıştı 3');
await $.when($.ajax({ type: 'POST', url: 'https://jsonplaceholder.typicode.com/posts', dataType: 'json', data: { title: 'foo1', body: 'bar1', userId: 1 } }),
$.ajax({ type: 'POST', url: 'https://jsonplaceholder.typicode.com/posts', dataType: 'json', data: { title: 'foo2', body: 'bar2', userId: 2 } })
).done(function ([r1], [r2]) {
console.log('Both AJAX jobs are finished.', r1, r2);
});
console.log('End of patato.');
return true;
}
patato().then(pa => console.log(`Patato returns ${pa}`));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```"
<details>
<summary>英文:</summary>
You can also run both AJAX jobs in parallel if the output of the first job is not required for the second one:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
async function patato() {
console.log("Çalıştı 3")
await $.when( $.ajax({type:'POST',url: 'https://jsonplaceholder.typicode.com/posts',
dataType:'json',data: {title: 'foo1',body: 'bar1',userId: 1}}),
$.ajax({type: 'POST',url: 'https://jsonplaceholder.typicode.com/posts',
dataType:'json',data: {title: 'foo2',body: 'bar2',userId: 2}})
).done(function([r1],[r2]){console.log("Both AJAX jobs are finished.",r1,r2)})
console.log("End of patato.");
return true;
}
patato().then(pa => console.log(`Patato returns ${pa}`));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- end snippet -->
</details>
# 答案3
**得分**: 1
以下是您要翻译的部分：
"First thing that I wanted to mention is that it will not make much sense to make sequential requests if you second request don't need the response from the first one. On that note, I will assume you have a use case that requires two API call executed one after the other.
Here you have two options: use callbacks or `async/await` syntax.
Here you can find a good example of the usage of both: [Stack Overflow 链接](https://stackoverflow.com/questions/48506445/how-to-return-an-ajax-result-using-async-await)
For your particular example here's how you could do this with callbacks:
```js
const patato = function(){
return $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
}
}).then(function(res1){
console.log("Work 1")
return $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
}
}).then(function(res2){
console.log("Work 2")
return res1 && res2;
})
})
}
patato().then(patatos => {
if(patatos) {
console.log(patatos)
}else {
console.log("Patato false")
}
})
或者您也可以使用 async/await 语法（个人认为这比回调更容易理解）：
const patato = async function(){
console.log("Work 1");
const res1 = await $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
}
});
console.log("Work 2");
const res2 = await $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
}
});
return res1 && res2;
}
async function test() {
let result = await patato();
console.log(result);
}
test();
希望对您有帮助。
英文:
First thing that I wanted to mention is that it will not make much sense to make sequential requests if you second request don't need the response from the first one. On that note, I will assume you have a use case that requires two API call executed one after the other.
Here you have two options: use callbacks or async/await syntax.
Here you can find a good example of the usage of both: https://stackoverflow.com/questions/48506445/how-to-return-an-ajax-result-using-async-await
For your particular example here's how you could do this with callbacks:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
const patato = function(){
return $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
}
}).then(function(res1){
console.log("Work 1")
return $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
}
}).then(function(res2){
console.log("Work 2")
return res1 && res2;
})
})
}
patato().then(patatos => {
if(patatos) {
console.log(patatos)
}else {
console.log("Patato false")
}
})
<!-- language: lang-html -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<!-- end snippet -->
Or you could use async/await syntax as well (IMO this is easier to follow than the callback one):
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
const patato = async function(){
console.log("Work 1");
const res1 = await $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
}
});
console.log("Work 2");
const res2 = await $.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
data: {
title: 'foo',
body: 'bar',
userId: 1,
}
});
return res1 && res2;
}
async function test() {
let result = await patato();
console.log(result);
}
test();
<!-- language: lang-html -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论