[ JS ] trigger HTTP request

1. XMLHttpRequest obj 사용

1. XMLHttpRequest의 instance 생성
2. open() 메서드를 통한 서버 연결. GET, POST 등 method와 url을 인자로 전달.
3. setRequestHeadr() 메서드를 통한 헤더 설정
4. XMLHttpRequest의 obj의 propety인 onreadystatechange를 통한 response 정의
5. send()메서드를 통한 request 전송

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log('Error:', xhr.status);
    }
  }
};
xhr.send();

 

2. fetch() api 사용

1. request를 원하는 url을 인자로 주며 fetch() api 호출(HTTP method, headr 등을 옵션으로 전달 가능)
2. .then() 으로 반환 받은 promise로 response 핸들링

fetch('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    if (response.ok) {
      return response.text();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });