실전적인 AJAX

1. jQuery를 이용한 AJAX

jQuery의 $.ajax() 메서드를 활용하면 손쉽게 AJAX 요청을 보내는 것이 가능하다.

// jQuery import
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

기본 골격은 다음과 같다.

$.ajax({
    type: "GET", // GET 방식으로 요청한다.
    url: "URL을 입력하는 곳", // 해당 URL에 요청을 보낸다.
    data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둔다)
    success: function(response){ // 서버에서 준 결과를 response라는 변수에 담는다.
		// response가 왔을 때 실행될 함수를 작성해준다.
    }
});

- type : "GET" or "POST"

- url : HTTP 요청을 보낼 URL

- data : 요청하면서 함께 보낼 데이터(GET 요청 시에는 비워둔다)

GET 요청은, url 뒤에 아래와 같이 붙여서 데이터를 가져간다.
http://naver.com?param=value&m2=value2

POST 요청은, data : {}에 넣어서 데이터를 가져간다.
data: { param: 'value', param2: 'value2' },

- success : 성공적으로 응답이 도착하면, response 값에 서버의 결과 값을 담아 함수를 실행한다.

 

예시 :

$.ajax({
    type: "GET",
    url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
    data: {},
    success: function(response){ 
      	console.log(response)
    }
});

더불어, $.ajax 뿐만 아니라 좀 더 명확한 사용을 위해 $.get()과 $.post()로 메소드를 분리하여 사용할 수도 있다.

 

 

2. axios를 이용한 AJAX

axios는 HTTP통신을 하는, 매우 인기있는 Promise 기반의 Javascript 라이브러리이다.

브라우저와 Node.js 모두에서 사용이 가능하다.

또한, IE8 이상의 모든 최신 브라우저를 지원한다.

러닝커브 또한 매우 낮기 때문에 장점을 생각하여 적극적인 도입을 권장하는 경우가 많음.

 

axios 공식 문서 번역본 :

xn--xy1bk56a.run/axios/guide/api.html#http-%EB%A9%94%EC%84%9C%EB%93%9C-%EB%B3%84%EC%B9%AD

 

1) 기본 HTTP 요청

axios({
    url: 'https://test/api/cafe/list/today',
    method: 'get',
    data: {
      	foo: 'diary'
    }
});

하지만, 보기 명확하게 method를 분리하여 사용하는 방법도 있다.

- axios.get()

- axios.post()

+ axios.put() / axios.patch() / axios.delete() / axios.options()

 

2) GET 요청

axios를 사용하는 가장 간단한 방법은 Modern Javascript의 async/await 구문을 사용하는 것이다.

다음의 예제는 Dog API를 사용하여, 모든 Dog의 breed의 목록을 가져와 axios.get() 한다.

 

만약 async/await을 사용하지 않는다면, Promise 구문을 사용하는 것도 가능하다.

// async/await 버전
const axios = require('axios');

const getBreeds = async () => {
    try {
        return await axios.get('https://dog.ceo/api/breeds/list/all');
    } catch (error) {
        console.error(error);
    }
};

const countBreeds = async () => {
    const breeds = await getBreeds();
  
    if (breeds.data.message) {
        console.log(`현재 강아지의 수는 ${Object.entries(breeds.data.message).length}입니다.`);
    }
};

countBreeds();


// Promise 버전
const axios = require('axios');

const getBreeds = () => {
    try {
        return axios.get('https://dog.ceo/api/breeds/list/all');
    } catch (error) {
        console.error(error)
    }
};

const countBreeds = () => {
    const breeds = getBreeds()
    .then(response => {
        if (response.data.message) {
            console.log(`현재 강아지의 수는 ${Object.entries(breeds.data.message).length}입니다.`);
        }
    })
    .catch(error => {
        console.log(error);
    })
};

countBreeds();

 

3) POST 요청

GET 요청과 방법은 동일하다. axios.post() 메소드를 활용해주면 된다.

데이터는 두 번째 인자로 동봉해주면 된다.

axios.post('https://test.com', {
    id : user.id,
    password : user.password
})
.then(response => {
    console.log(response);
})
.catch(error => {
    console.log('error : ', error.response);
});

 

4) 요청에 매개변수 추가하기

GET 요청에는 URL에 매개변수가 포함될 수 있다.

axios를 사용할 때도, 그냥 동일하게 URL에 매개변수를 넣어주면 된다.

axios.get('https://test.com/?foo=bar');

혹은, params 옵션에다가 추가해서 사용하는 것도 가능하다.

axios.get('https://test.com/', {
    params: {
      	foo: 'bar'
    }
});

POST 요청도 마찬가지. 

axios.post('https://test.com/', {
    params: {
      	foo: 'bar'
    }
});

아래는 URLSearchParams 메서드를 사용하는 방법을 보여주는 코드.

var data = {};

const params = new URLSearchParams({
    contact: this.ContactPerson,
    phoneNumber: this.PhoneNumber,
    email: this.Email
}).toString();

const url = "https://test.com/api/UpdateProfile?" + params;

axios
.post(url, data, {
    headers: {
        aaid: this.ID,
        token: this.Token
    }
})
.then(res => {
    this.Info = JSON.parse(res.data);
})
.catch(err => {
    console.log(err);
});

 

3. fetch API를 이용한 AJAX

1) 기본 HTTP 요청

fetch('api 주소')
    .then(res => res.json())
    .then(res => {
        // data를 응답 받은 후의 로직
    });

데이터가 JSON형태의 데이터이기 때문에, 처음에 날라온 res 응답을 json() 메서드를 통해 JSON 객체로 바꿔준다.

fetch API에서의 default method는 GET method이다. 그래서 위의 코드도 GET 요청을 보낸 것.

 

2) GET 요청 보내기

기본 메서드가 GET이라서 코드 자체는 위와 완전히 동일하다.

그냥 추가로, 유동적인 URL을 사용하는 방법을 보여주는 코드.

fetch(`https://api.google.com/user/${userId}`)
    .then(res => res.json())
    .then(res => {
        if (res.success) {
            console.log(`${res.user.name}` 님 환영합니다);
        }
    });

3) POST 요청 보내기

POST 요청의 경우, fetch 함수에다가 메서드에 관한 정보를 추가 인자로 넘겨줘야 한다.

1. 두 번째 인자로 method와 body 정보를 함께 보내줘야 한다.

2. method는 "post"

3. body는 보낼 데이터를 적어준다.

JSON 형태로 보내기 위해 JSON.stringify() 함수에 객체를 인자로 전달하여 JSON 형태로 변환하였다.

여기서 보이는 것은, axios는 JSON.stringify를 따로 사용해 줄 필요가 없었다는 점인 듯 하다.

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
})
    .then(res => res.json())
    .then(res => {
        if (res.success) {
            alert("저장 완료");
        }
    });

4) GET 요청에 매개변수 추가하기

fetch('https://api.google.com/user?id=3')
    .then(res => res.json())
    .then(res => {
        if (res.success) {
            console.log(`${res.user.name}` 님 환영합니다);
        }
    });

5) 첫 번째 then에 추가되는 로직

백엔드에서 올바른 응답 body를 주지 않는 경우를 대비한 로직이다.

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => {
      if (res.status === 200) {
          alert("저장 완료");
      } else if (res.status === 403) {
          return res.json();
      }
  })
  .then(res => {
      console.log("에러 메시지 ->", res.message);
  });

 

 

4. fetch API와 axios의 비교

fetch API는 axios API와의 비교를 통해 알아보자.

axios의 특징

- 구형 브라우저를 지원한다.

- 응답 시간 초과를 설정하는 방법이 있다.

- JSON 데이터 자동 변환이 가능하다.

- Node.js에서의 사용이 가능하다.

- 요청 취소가 가능하다.

- catch에 걸렸을 때 .then을 실행하지 않고 console.log에 에러 로그를 보여준다.

- 데이터를 JSON.stringify로 변환할 필요가 없다.

- return 값이 Promise 객체 형태이다.

fetch API의 특징

- 지원하지 않는 브라우저가 존재한다.

- 자바스크립트의 내장 라이브러리이므로, import할 필요가 없다.

- 라이브러리의 업데이트에 따른 에러를 방지할 수가 있다.

(React Native의 경우 업데이트가 잦아서 다른 라이브러리가 쫓아오지 못하는 경우가 비일비재하다.

하지만 fetch API는 내장 라이브러리이므로 이러한 에러를 방지할 수 있다.)

- 네트워크 에러가 발생했을 때 기다려야 한다(Response Timeout API를 제공하지 않음)

- body의 데이터를 JSON.stringify로 변환해줘야 한다.

- return 값이 Promise 객체 형태이다.

 

코드 비교

fetch API의 POST 요청

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

axois의 POST 요청

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

 

대부분의 결론은, React Native같은 경우 업데이트가 상당히 빠르기 때문에 fetch API를 추천.

그 외에는 axios가 더 장점이 많아보인다는 결론이었다.

 

 

참고 :

Axios를 사용하여 HTTP요청하기

Ajax (axios와 fetch 비교)

fetch() 함수 사용법 - Blog by Yeri