가져오기 vs.Ajax Call

가져오기 vs.Ajax Call

일반적인 AJAX와 Fetch API의 차이점은 무엇입니까?

다음 시나리오를 고려해 주십시오.

function ajaxCall(url) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        reject(Error(req.statusText));
      }
    };
    req.onerror = function() {
      reject(Error("Network Error"));
    };
    req.send();
  });
}

ajaxCall('www.testSite').then(x => {
  console.log(x)
}) // returns html of site

fetch('www.testSite').then(x => {
  console.log(x)
}) // returns object with information about call

이게 뭐냐면fetch콜 리턴:

Response {type: "cors", url: "www.testSite", status: 200, ok: true, statusText: "OK"…}

왜 다른 걸 돌려주는 거죠?

할 수 있는 방법이 있나요?fetchAJAX의 일반적인 콜과 동일한 콜을 반환할 수 있습니까?

Fetch API에는 다양한 데이터 유형에 대한 메서드가 포함되어 있습니다.
일반 텍스트/html의 경우text()method: 약속도 반환하고 다른 약속과 체인으로 연결한 후 호출합니다.

fetch('www.testSite').then( x => { 
    return x.text();
}).then( y => {
    console.log(y);
});

반환된 콘텐츠의 빌트인은 다음과 같습니다.

• clone()- 응답 개체의 복제본을 만듭니다.
• error()- 네트워크 오류와 관련된 새 응답 개체를 반환합니다.
• redirect()- 다른 URL로 새 응답을 만듭니다.
• arrayBuffer()- ArrayBuffer로 해결된 약속을 반환합니다.
• blob()- BLOB로 해결된 약속을 반환합니다.
• formData()- FormData 개체로 해결되는 약속을 반환합니다.
• json()- JSON 개체로 해결되는 약속을 반환합니다.
• text()- USVString(텍스트)으로 해결된 약속을 반환합니다.

또한 서버에 항목을 보내거나 자신의 머리글을 추가할 수도 있습니다.

fetch('www.testSite', {
    method  : 'post',
    headers : new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    }),
    body    : new FormData(document.getElementById('myform'))
}).then( response => {
    return response.json(); // server returned valid JSON
}).then( parsed_result => {
    console.log(parsed_result);
});

ajaxCall이 XMLHttpRequest 개체에서 responseText를 반환하고 있습니다.걸러내고 있어요.

가져오기 코드에서 응답 텍스트를 읽어야 합니다.

fetch('/foo/').then(x => x.text()).then(console.log)

를 사용할 수도 있습니다.x.json()또는x.blob()

언급URL : https://stackoverflow.com/questions/38332701/fetch-vs-ajaxcall