통신 fetch() 사용 예제들

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

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 941
» fetch() 사용 예제들 황제낙엽 2024.07.09 871
28 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 1115
27 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 1123
26 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 1172
25 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 1082
24 [URLSearchParams] URL 파라미터(매개변수) 값 가져오기 file 황제낙엽 2023.02.02 1026
23 Fetch API (CORS 극복을 위한 노력) 황제낙엽 2021.12.05 1365
22 두 서버의 자원을 접근하는 클라이언트 프레임웍(Next.js)에서의 CORS오류 file 황제낙엽 2021.12.05 1286
21 CORS 의 내용과 이에 대한 우회 방안들 file 황제낙엽 2021.12.05 970
20 client 통신 기술 jquery ajax, fetch, axios 황제낙엽 2021.12.05 1166
19 XMLHttpRequest Specification 황제낙엽 2021.04.29 1230
18 XMLHttpRequest.timeout 황제낙엽 2018.11.03 1223
17 XMLHttpRequest 제대로 활용하기 file 황제낙엽 2017.08.01 1210
16 Ajax (XMLHttpRequest) 샘플 황제낙엽 2017.08.01 1016
15 Javascript CORS/XSS 극복하는(피하는) 방법 file 황제낙엽 2017.07.31 1544
14 HTTP 접근 제어 (CORS) 황제낙엽 2017.05.29 1068
13 CORS(Cross-Origin Resource Sharing) - 5 file 황제낙엽 2017.03.07 1297
12 CORS(Cross-Origin Resource Sharing) - 4 file 황제낙엽 2017.03.07 1821
11 CORS(Cross-Origin Resource Sharing) - 3 file 황제낙엽 2017.03.07 1026