jquery - .done (),의 사용 .done () .다음으로 () 및 .ajax 요청을 지정된 순서로 수행하기 위한 () 시
저는 jquery에서 Promise에 대한 많은 글을 읽고 여러 ajax 요청을 할 때 "callback hell"을 피했습니다.
이 모든 것을 읽고도 무엇을 사용해야 하는지에 대한 간단한 답이 없다고 생각합니다..done()
,.then()
그리고..when()
- 요청을 연쇄한다는 측면에서
저는 제 요점을 설명하기 위해 가장 기본적인 예를 만들려고 노력했습니다.아래 코드는 내가 원하는 대로 정확히 작동하지만, 이것에 의존하는 유일한 것은.done()
다른 방법(예:.then()
아니면.when()
이에 들어맞습니다.
그래서 저는 3개의 PHP 스크립트를 만들고 PHP의 sleep method를 사용하여 이 스크립트들이 완료되는 데 걸리는 시간을 인위적으로 지연시켰습니다.지연 시간은 다음과 같이 설정됩니다.
r1.php
- 5초r2.php
- 1초r3.php
- 3초
스크립트 자체는 다음과 같이 간단합니다.
<?php
// r1.php
echo "starting r1.php \n";
sleep(5); // Delay execution. Varies as described above for each script
echo "ending r1.php \n";
?>
만약 이것들이 병렬적으로 운영된다면, 그들이 완료할 순서는r2.php
,r3.php
,그리고나서r1.php
.
하지만 우리가 그들을 순서대로 운영하고 싶다면 어떻게 해야 할까요?r1
.php,r2.php
,r3.php
)와 jquery가 각각의 ajax 요청이 이루어질 때까지 기다렸다가 다음으로 넘어가도록 합니까?예를 들어, 만약 무언가가r2.php
결과에 따라 달라집니다.r1.php
기타.
저는 다음과 같은 내용을 적었습니다. 바로 그 내용입니다.
$(document).ready(function() {
$.ajax({
url: 'ajax/r1.php',
method: 'get'
}).done(function(response1) {
console.log('After r1.php\n');
console.log(response1);
$.ajax({
url: 'ajax/r2.php',
method: 'get'
}).done(function(response2) {
console.log('After r2.php\n');
console.log('response1:' + response1);
console.log(response2);
$.ajax({
url: 'ajax/r3.php',
method: 'get'
}).done(function(response3) {
console.log('After r3.php\n');
console.log('response1:' + response1);
console.log('response2:' + response2);
console.log(response3);
});
});
});
});
보시다시피 요청은 순서대로 완료되고 있으며 각 PHP 스크립트에 지정된 시간이 소요됩니다.
또한 콜백이 실행되고 있는 범위 때문에 예를 들어 다음과 같이 액세스할 수 있습니다.response1
(산출량r1.php
처리하는 콜백에서r3.php
:
제 질문은: 어떤 상황에서 다음과 같은 기능이 있습니까?.done()
( 등).then()
아니면.when()
- 수많은 자료에서 언급되는 것) 실제로 이런 종류의 일을 할 필요가 있습니까?언제가 필요하겠습니까?.then()
아니면.when()
이런 종류의 시나리오에 대해서요?
제가 알기론.done()
약속과 호환됩니다.교체까지 했습니다..done()
와 함께.then()
위의 코드에서 그리고 결과는 정확히 같습니다.
저는 다음 내용을 모두 읽었지만 jquery와 함께 ajax 요청을 실행하는 방법에 대한 문제를 복잡하게 만들고 있다고 생각합니다.
- jQuery는 연기하고 약속 - .then() vs.done()
- jQuery 약속을 사용하여 3개의 비동기 호출을 연결하려면 어떻게 해야 합니까?
- https://medium.com/coding-design/writing-better-ajax-8ee4a7fb95f
누가 초보자들이 이해할 수 있는 방식으로 설명해 주실 수 있나요?저는 jquery 3.2.1을 사용하고 있어서 바닐라 자바스크립트가 아닌 jquery만의 응답을 원합니다.
저는 원래 이 질문을 했는데 단어가 잘못 쓰여 코드가 충분히 포함되지 않은 것 같습니다.그래서 저는 정확한 문제를 설명하기 위해 여기에 주어진 코드를 조롱했습니다.
.done()
method는 Promise가 해결할 때만 호출됩니다(대략)..fail()
, 이는 약속이 거부될 때 호출됩니다.
.then()
method는 해결된 콜백과 거부된 콜백을 받아들이며, 다음과 같이 done/fail을 함께 사용하는 것과 같습니다.
$.ajax().then(resolvedCallback(), rejectedCallback());
에 해당합니다.
$.ajax().done(sucess()).fail(failure());
그 차이는 그 몇 배나 된다는 것입니다..then()
보다 복잡한 약속 해결을 위해 보다 쉽게 체인으로 연결할 수 있습니다.
.when()
메소드를 사용하면 일부 논리를 Promise/Delivered/Nable로 캡슐화하여 사용할 수 있습니다..then()
,.done()
,그리고..fail()
사용할 수 있습니다.실행하려는 복잡하거나 오래 실행되는 논리가 있고 쉽게 약속/연기된 논리로 감싸야 하는 경우에 유용합니다.또한 읽기 쉽게 해줍니다.
$.when(function(){/*I do something that takes a while*/})
.then(function(){/*I succeed*/},
function(){/*I fail*/})
.then( ... )
.then( ... )
...
그 다음에 체인을 끝낼 수 있습니다..always()
약속이 해결되었는지 또는 거절되었는지 여부에 관계없이 모든 종류의 결과를 정리하거나 사슬의 끝에서 항상 발생해야 하는 어떤 행동을 수행하는 것.
편집: 모든 것을 하나로 모으다
으로..when()
, 우리는 코드 대기 유닛을 가지고 진행하기 전에 많은 것들을 완료할 수 있습니다.
function fetchMe(url) {
return $.ajax({
url: url,
method: 'get'
});
}
$.when(fetchMe('ajax/r1.php'), fetchMe('ajax/r2.php'), fetchMe('ajax/r3.php'))
.then(function(r1, r2, r3) { // Resolve
console.log('response1: ' + r1.data);
console.log('response2: ' + r2.data);
console.log('response3: ' + r3.data);
}, function(){ // Reject!
console.log('Something broke!');
});
에서,fetchMe()
합니다.$.ajax()
호출. 사용하기.when()
, 우리는 스크립트에 이 세 가지가 모두 완료될 때까지 기다리라고 말합니다..then()
. 해결 메서드의 입력은 지연된 항목을 순서대로 가져옵니다..when()
그리고 거기서 우리는 요청으로부터 데이터를 가져올 수 있습니다.
해봐도 좋습니다.$.Deffered
여러 개의 아약스 호출을 연결하여 순차적으로 만듭니다.
- 문서: https://api.jquery.com/category/deferred-object/
- 유사한 문제:모든 AJAX 호출을 순차적으로 수행하는 방법은?
언급URL : https://stackoverflow.com/questions/51933513/jquery-usage-of-done-then-and-when-for-making-ajax-requests-in-a-giv
'programing' 카테고리의 다른 글
페이지 속도 인사이트 Google Retackcha에 사용되지 않는 자바스크립트 제거 (0) | 2023.10.31 |
---|---|
정수에 필요한 바이트 수를 결정하는 방법은? (0) | 2023.10.31 |
"JDBC 드라이버 인스턴스화 할 수 없음" 플라이웨이 명령줄 오류 수정 방법? (0) | 2023.10.31 |
match_parent width가 RecyclerView에서 작동하지 않습니다. (0) | 2023.10.31 |
Http에 매개변수를 추가하는 방법NameValuePair를 사용하여 POST를 사용한 URL 연결 (0) | 2023.10.31 |