h5의 fetch 메소드 해석(요약)

H5의 새로운 객체인 fetch는 ajax의 존재를 대체하기 위해 탄생했습니다. 주요 목적은 ServiceWorkers와 결합하여 다음 최적화를 달성하는 것입니다.

1. 오프라인 경험 최적화
2. 확장성을 유지하세요

물론 ServiceWorkers가 브라우저 측 데이터베이스 IndexedDB와 협력한다면 축하합니다. 모든 브라우저는 프록시 서버가 될 수 있습니다. (그러나 이것은 좋은 일이 아니라고 생각합니다. 이전 c/s 아키텍처의 오래된 길을 따라 프런트 엔드를 점점 더 무겁게 만들 것입니다)

h5의 새로운 방식이므로 지원하지 않는 오래된 브라우저도 있을 것입니다.

브라우저는 추가 폴리필을 추가해야 합니다.

[링크]: https://github.com/fis-comComponents/whatwg-fetch

퍼치(가져오기):

HTML:

 fetch('/users.html') //여기에 반환되는 것은 Promise 객체입니다. 이를 지원하지 않는 브라우저는 실행하기 전에 babel 및 기타 트랜스코더를 통해 해당 ployfill 또는 트랜스코딩을 사용해야 합니다. 응답 .text()}) .then(function(body) { document.body.innerHTML = body})

JSON:

 fetch('/users.json') .then(function(response) { return response.json()}) .then(function(json) { console.log('parsed json', json)}) .catch(function (예) { console.log('파싱 실패', 예)})

응답 메타데이터:

 fetch('/users.json').then(function(response) { console.log(response.headers.get('Content-Type')) console.log(response.headers.get('Date')) 콘솔 .log(response.status) console.log(response.statusText)})

게시물 양식:

 var form = document.querySelector('form')fetch('/users', { 메소드: 'POST', body: new FormData(form)})

JSON 게시:

 fetch('/users', { 메소드: 'POST', 헤더: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ //여기 게시물 요청의 요청 본문 이름: 'Hubot', 로그인: 'hubot', })})

파일 업로드:

 var input = document.querySelector('input[type=file]')var data = new FormData()data.append('file', input.files[0]) //선택한 파일 콘텐츠 가져오기 data.append( ' user', 'hubot')fetch('/avatars', { 메소드: 'POST', 본문: 데이터})

(1) Ajax와의 차이점:

1. 패치 방법은 데이터를 가져올 때 네트워크 오류나 요청 프로세스가 중단되지 않는 한 404 또는 500 오류라도 오류를 발생시키지 않습니다. 그러나 물론 해결책이 있습니다. 여기에 데모가 있습니다.

 function checkStatus(response) { if (response.status >= 200 && response.status < 300) { //응답 상태 코드가 정상인지 판단 return response //원래 응답 객체를 정상적으로 반환합니다.} else { var error = new Error (response .statusText) //비정상일 경우 응답 오류 상태 메시지가 출력됨 error.response = response throw error }}function parJSON(response) { return response.json()}fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('JSON 응답으로 요청 성공', data) }).catch( function(error) { console.log('요청 실패', error) })

2. 매우 중요한 문제는 fetch 메소드가 쿠키를 보내지 않는다는 점인데, 이는 서버가 세션을 유지하기 위해 쿠키를 통해 세션을 식별해야 하기 때문에 클라이언트와 서버 간의 지속적인 연결을 유지해야 하는 경우 매우 치명적입니다. 쿠키를 보내려면 정보를 수정해야 합니다.

 fetch('/users', { 자격 증명: 'same-origin' //동일한 도메인에서 쿠키 보내기})fetch('https://segmentfault.com', { 자격 증명: 'include' //도메인 간에 쿠키 보내기} )

아래 그림은 세그먼트에 대한 크로스 도메인 접근 결과입니다.

다른 것이 없으면 요청한 URL과 응답 URL은 동일하지만 리디렉션과 같은 작업을 수행하면 response.url이 다를 수 있습니다. XHR에서는 리디렉션 후 response.url이 정확하지 않을 수 있으므로 설정해야 합니다. : response.headers['X-Request-URL'] = request.url은 (Firefox < 32, Chrome < 37, Safari, IE)에 적합합니다.

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.