[JavaScript] 18. AJAX와 Fetch

2024년 08월 02일

Song hyun
작성자
2024.08.02.:36

728x90

[JavaScript] 18. AJAX와 Fetch

1. AJAX

=>AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술이다!

2. Ferch API

(1) Fetch API의 개

3. 시나리오 코드

(1-1) JSON PlaceHolder를 출력해보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="fetchTodo(1)">통신 요청</button>
    <script>
        //네트워크 요청 처리 Fetch API의 활용
        function fetchTodo(todoId){
            // 인수 1->URL 넣기
            // fetch 함수의 리턴 타입은 Promise 타입(미래 타입)
            let promiseData=fetch("https://jsonplaceholder.typicode.com/todos/"+todoId);
            console.log(promiseData);
        }
    </script>
</body>
</html>

(1-2) await/async를 통해 출력해보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="fetchTodo(1)">통신 요청</button>
    <script>
        //네트워크 요청 처리 Fetch API의 활용
        async function fetchTodo(todoId){

            try {
                // 인수 1->URL 넣기
                // fetch 함수의 리턴 타입은 Promise 타입(미래 타입)
                let promiseData=await fetch("https://jsonplaceholder.typicode.com/todos/"+todoId);
                console.log(promiseData);
                // JSON 형식의 문자열을 변수에다가 저장

                // PromiseData 데이터 타입을 사용할려면 역시나 await 키워드를 사용해주어야 한다.
                let todo=await promiseData.json();
                console.log("todo : "+JSON.parse(todo));
            } catch (error) {
                // 오류 발생 시 콘솔에 출력
                console.log("error : "+error);
            }

            
        }
    </script>
</body>
</html>

(2) 응답 주고 받기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="fetchTodo2(2)">통신 요청</button>
    <script>
        //네트워크 요청 처리 Fetch API의 활용
        // 소화시키는 방법 1
        async function fetchTodo(todoId){

            try {
                // 인수 1->URL 넣기
                // fetch 함수의 리턴 타입은 Promise 타입(미래 타입)
                let promiseData=await fetch("https://jsonplaceholder.typicode.com/todos/"+todoId);
                console.log(promiseData);
                // JSON 형식의 문자열을 변수에다가 저장

                // PromiseData 데이터 타입을 사용할려면 역시나 await 키워드를 사용해주어야 한다.
                let todo=await promiseData.json();
                console.log("todo : "+todo);
            } catch (error) {
                // 오류 발생 시 콘솔에 출력
                console.log("error : "+error);
            }
        }
            // 소화시키는 방법2 = 비동기 처리 then()과 catch()를 사용하기
            function fetchTodo2(todoId){
                fetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`)
                .then(proData=>{
                    console.log("then 수행 1");
                    console.log("proData : "+proData);
                    console.log("proData : "+ proData.body);

                    // 응답 본문을 문자열로 변환
                    // proData <--- Response Object 타입입니다.
                    console.log("json text : "+proData.text());
                })
                .catch(error=>{
                    console.log(error);
                });
            }
            
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="fetchTodo1(2)">통신 요청</button>
    <script>
        //네트워크 요청 처리 Fetch API의 활용
        // 소화시키는 방법 1
        async function fetchTodo1(todoId){

            try {
                // 인수 1->URL 넣기
                // fetch 함수의 리턴 타입은 Promise 타입(미래 타입)
                let promiseData=await fetch("https://jsonplaceholder.typicode.com/todos/"+todoId,{
                    method:'GET',
                    headers:{
                        'Content-type':'application/json'
                    }
                })
            // 소화시키는 방법2 = 비동기 처리 then()과 catch()를 사용하기
            function fetchTodo2(todoId){
                fetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`,{
                    method:'GET',
                    headers:{
                        'Content-type': 'application/json'
                    }
                })
                .then(proData=>{
                    console.log("수행 1");
                    return proData.text(); // 응답 본문(body)를 문자열 변환 처리
                })
                .then(bodyText=>{
                    console.log("수행2");
                    const todo=JSON.parse(bodyText);
                    console.log("파싱된 객체 : "+todo);

                    console.log('completed : ',todo.completed)
                    console.log("파싱된 객체 : "+todo);
                    console.log("파싱된 객체 : "+todo);
                    console.log("파싱된 객체 : "+todo);
                    console.log("파싱된 객체 : "+todo);
                })
                .catch(error=>{
                    console.log(error);
                });
            }

            // HTTP 1.1 <--- JSON - GET,POST() --> REST API GET,POST,PUT,DELETE

            function fetchPost1(){
                fetch('https://jsonplaceholder.typicode.com/posts/1',{
                    method: 'POST',
                    headers: {
                        'Content-Type' : 'application/json'
                    },
                    body: JSON.stringfy({
                       title: '서버에 자원 등록 요청',
                       body: '비동기 통신 POST 처리 방식 연습',
                       userId: 1
                    })
                }).then(response =>{
                    console.log('수행1');
                    console.log(JSON.parse(response.text()));
                   // let resultBody = JSON.parse(response.text());
                   // console.log("응답받은 결과를 문자열에서 JS 객체로 변환 처리(파싱)", resultBody);
                })
                .catch(error=>{
                    console.log(error);
                });
            }

            // fetch 함수의 호출
         function testPatch(){
            fetch('https://jsonplaceholder.typicode.com/posts/1',{
                method: 'PATCH',
                body: JSON.stringify({
                title: 'foo',
            }),
             headers: {
             'Content-type': 'application/json; charset=UTF-8',
             },
            })
            .then((response) => response.json())
            .then((json) => console.log(json));
         }
    </script>
</body>
</html>

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 20. 실행 환경 구축 (0)	2024.08.21
[JavaScript] 19. 로컬 스토리지 (0)	2024.08.21
[JavaScript] 17. Promise 타입 (0)	2024.08.02
[JavaScript] 16. 이벤트 처리 - 배너 변경하기 (0)	2024.08.01
[JavaScript] 15. 쿼리 셀렉트문과 클래스 선택자 (0)	2024.08.01

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 18. AJAX와 Fetch

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바