통신 fetch() 사용 예제들

황제낙엽 2024.07.09 05:32 조회 수 : 263

sitelink1  
sitelink2  
sitelink3  
sitelink4  
extra_vars4  
extra_vars5  
extra_vars6  

아래의 예제들은 스크립트상에서는 오류도 없고 요청도 잘 보낸다.

하지만 톰캣의 기본 설치 상태에서는 전송한 데이터를 받을 수가 없었다. (HttpServletRequest 객체에 값이 없다)

서버 설정을 다양하게 바꿔봐도 문제를 해결하지 못해서 그래서 결국 fetch 대신 XMLHttpRequest 을 여전히 이용중이다.

 

다만 fetch 는 최신 스펙이므로 추후 본격적으로 활용할때를 대비해서 예제를 저장해둔다.

자세한게 필요하면 copilot 에게 물어보면 친절히 알려준다.

 

    var data = {

        'cmd' : 'getMallList'

    };

 

    fetch('/jbs/jbg', {

        method: 'POST',

        cache: 'no-cache',

        headers: {

            'Content-Type': 'application/json'

        },

        body: JSON.stringify(data)

    })

    .then(response => {

        // 응답 객체가 성공적으로 돌아왔는지 확인합니다.

        if (!response.ok) {

            throw new Error('Network response was not ok ' + response.statusText);

        }

        // 응답을 JSON으로 변환합니다.

        return response.json();

    })

.then(data => {

if (data.code == '000') {

          

        }

})

    .catch(error => console.error('Error:', error));

 

json 형태로 데이터를 서버에 전송하는 예제다.

promise 를 써서 응답데이터 처리도 하고 있다.

 

 

var data = {

'cmd' : 'fetchOrders',

'seqm' : mall.seq,

'id' : mallId,

'pw' : mallPw

};

 

fetch('/jbs/jbg', {

method: 'POST',

cache: 'no-cache',

headers: {

'Content-Type': 'application/json'

},

body: JSON.stringify(data)

}).catch(error => console.error('Error:', error));

 

데이터 전송후 응답을 기다리지 않는다. (후처리가 필요없는 경우 유용)

 

 

let formData = new FormData();

formData.append('cmd', 'fetchOrders');

formData.append('seqm', mall.seq);

formData.append('id', mallId);

formData.append('pw', mallPw);

 

fetch('/jbs/jbg', {

method: 'POST',

body: formData

});

 

이 예제 역시 후처리가 필요없어서 서버에 요청하고 에러 처리도 없이 끝내고 있다.

다만 formData 형태로 서버에 데이터를 전송하고 싶을때 참고한다.

 

 

 

번호 제목 글쓴이 날짜 조회 수
30 [Gemini] ajax 와 fetch 의 차이 황제낙엽 2025.01.04 205
» fetch() 사용 예제들 황제낙엽 2024.07.09 263
28 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 393
27 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 435
26 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 287
25 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 318
24 [URLSearchParams] URL 파라미터(매개변수) 값 가져오기 file 황제낙엽 2023.02.02 431
23 Fetch API (CORS 극복을 위한 노력) 황제낙엽 2021.12.05 443
22 두 서버의 자원을 접근하는 클라이언트 프레임웍(Next.js)에서의 CORS오류 file 황제낙엽 2021.12.05 506
21 CORS 의 내용과 이에 대한 우회 방안들 file 황제낙엽 2021.12.05 459
20 client 통신 기술 jquery ajax, fetch, axios 황제낙엽 2021.12.05 270
19 XMLHttpRequest Specification 황제낙엽 2021.04.29 428
18 XMLHttpRequest.timeout 황제낙엽 2018.11.03 488
17 XMLHttpRequest 제대로 활용하기 file 황제낙엽 2017.08.01 382
16 Ajax (XMLHttpRequest) 샘플 황제낙엽 2017.08.01 393
15 Javascript CORS/XSS 극복하는(피하는) 방법 file 황제낙엽 2017.07.31 943
14 HTTP 접근 제어 (CORS) 황제낙엽 2017.05.29 405
13 CORS(Cross-Origin Resource Sharing) - 5 file 황제낙엽 2017.03.07 572
12 CORS(Cross-Origin Resource Sharing) - 4 file 황제낙엽 2017.03.07 1152
11 CORS(Cross-Origin Resource Sharing) - 3 file 황제낙엽 2017.03.07 343