javascript fetch를 동기화하는 방법

javascript fetch를 동기화하는 방법

fetch를 사용하여 API에서 데이터 json을 가져옵니다.정상적으로 동작하지만 다양한 콜에 대해 반복해서 사용해야 하기 때문에 동기화가 필요하거나 컴포넌트별로 페치가 완료되었을 때 인터페이스를 갱신할 수 있는 방법이 필요합니다.

function fetchOHLC(yUrl){
    fetch(yUrl)
    .then(response => response.json())
    .then(function(response) {
                alert(JSON.stringify(response.query));

            var t = response.created;
            var o = response.open;
            var h = response.high;
            var l = response.low;
            var c = response.close;
        
        return {t,o,h,l,c};
    
    })
    .catch(function(error) {
        console.log(error);
    });    
}

var fetchData = fetchOHLC(yUrl);
alert(fetchData); // empty ?

fetch를 사용하는 것 외에 다른 방법이 있습니까? (가능하다면 jquery를 사용하고 싶지 않습니다.)

감사해요.

편집

질문은 ajax나 jquery가 아닌 fetch-api에 대한 것이므로 제대로 읽지 않고 해당 질문의 중복으로 표시하지 마십시오.

fetch는 비동기 콜만을 실행하는 것을 목적으로 하고 있습니다만, 다음과 같은 옵션이 있습니다.

옵션 1

XMLHttpRequest도 정상인 경우 async: false를 사용하면 동기 콜이 실행됩니다.

옵션 2

사용하다async/await후드 아래에서는 비동기이지만 동기화된 것처럼 느껴집니다.https://stackoverflow.com/a/54950884/2590616 를 참조하십시오.

옵션 3

그렇지 않으면 컴포넌트별로 페치가 완료되면 인터페이스를 갱신할 수 있는 방법이 필요합니다.

이 소리는 마치fetch+Promise.all()https://stackoverflow.com/a/52013616/2590616 를 참조해 주세요.

fetch api를 사용하지 않으려면 콜백, 이벤트 리스너, XMLHttpRequest를 사용해야 합니다.

당신은 항상 xhr을 사용하여 예전 패션 방식을 사용할 수 있습니다.다음은 요청의 예입니다.

   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
       }
     };

   xhttp.open("POST", "cookies.php", true);
   xhttp.send();

콜백 함수를 파라미터로 추가하면 됩니다.

function fetchOHLC(yUrl, callback){
    fetch(yUrl)
    .then(response => response.json())
    .then(function(response) {
            alert(JSON.stringify(response.query));

            var t = response.created;
            var o = response.open;
            var h = response.high;
            var l = response.low;
            var c = response.close;
        
            callback({t,o,h,l,c});
    
    })
    .catch(function(error) {
        console.log(error);
        callback(null, error);
    });    
}

fetchOHLC(yUrl, function(response, error){
    if (response == null) {
        console.log(error);
    } else {
        var fetchData = response;
        alert(fetchData);
    }
});

검색 엔진에 "javascript fetch synchronous(javascript fetch를 동기화하는 방법)"를 드롭하여 여기에 온 경우:

그건 말이 안 돼요.네트워크 조작의 실행에는 CPU 작업이 필요 없기 때문에, 네트워크 조작의 실행중에 CPU가 차단됩니다.fetch(...)말이 안 돼요대신 위의 링크된 복제에 표시된 것처럼 비동기식으로 올바르게 작업하십시오.

---

동기요구가 꼭 필요한 경우(필요없음)에는 권장되지 않는XMLHttpRequestMDN을 인용하려면 , 동기 배리언트:

주의: Gecko 30.0(Firefox 30.0/Thunderbird 30.0/SeaMonkey 2.27) 이후, Blink 39.0 및 Edge 13은 사용자 경험에 부정적인 영향을 미치기 때문에 메인 스레드에 대한 동기 요구는 권장되지 않습니다.

const request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
request.send(null);

MDN에 대한 자세한 내용은 참조하십시오.

언급URL : https://stackoverflow.com/questions/44735669/how-to-make-javascript-fetch-synchronous