92. (Http/fetch) fetch (페치) Web APi 요청 시 필요한 Request 객체 설명

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : fetch

 

---

[소스 코드]

 

// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : HTTP / API

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[설 명]
// --------------------------------------------------------------------------------------

1. Fetch API 는 JavaScript 에서 접근하고 조작할 수 있는 인터페이스를 제공하는 Web Api 입니다.


2. Request 는 Fetch APi 에서 http 요청에 사용할 수 있는 객체입니다.


3. Request 객체 초기화 방법 : var myRequest = new Request(input, init);

  >> input : http 요청에 필요한 URL 을 지정합니다

  >> init : 커스텀 설정을 포함한 옵션 오브젝트입니다


4. Request init 에 지정 가능한 옵션 종류

  >> headers : Http 전송에 필요한 Headers 헤더
  >> body : Http 전송에 필요한 Body 바디 데이터
  >> mode : Request 에서 사용할 모드 ( cors , no-cors , same-origin ) - 기본값은 cors 이며 크롬 47버전 이전에서는 기본값이 no-cors 이며 크롬 47버전 이후로 same-origin가 사용 가능하게 되었습니다
  >> credentials : Request 에서 사용할 자격 증명서(Request Credential) ( omit , same-origin , include ) - 기본값은 omit.이며, 크롬 47 이전의 기본값은 same-origin 이며 크롬 47 이후로부터 include가 사용 가능하게 되었습니다
  >> cache : Request 에서 사용할 cache mode 
  >> redirect : Request 에서 사용할 리다이렉트 모드 ( follow , error , manual ) - 크롬 47 이전 버전에서의 기본값은 manual 이며, 47 이후로부터 follow 가 사용 가능하게 되었습니다
  >> referrer : no-referrer 나 client, URL을 지정하는 USVString 입니다
  >> integrity : sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE= 같은 Request 의 하위 리소스 무결성(subresource integrity) 값을 포함합니다


5. Request 사용 샘플 코드 : 

    var myHeaders = new Headers();
    myHeaders.append('Content-Type', 'application/json');

    var myInit = { method: 'POST',
                    headers: myHeaders,
                    cache: 'default' };

    var myRequest = new Request('https://....', myInit);

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

https://developer.mozilla.org/ko/docs/Web/API/Request/Request

// --------------------------------------------------------------------------------------

---