프런트 엔드 요청의 여러 방법에 대해 이야기

소개

프런트 엔드는 빠르게 발전하는 분야이며 프런트 엔드 기술 스택에서 프런트 엔드 요청이 가장 일반적인 분야입니다.인터페이스 데이터를 요청해야만 정적 페이지를 동적으로 만들 수 있습니다. 이 문서에서는 프런트 엔드 개발 타임라인을 사용하여 프런트 엔드 요청의 기술적 진화와 장단점을 하나씩 분석합니다.

1. XMLHttp요청

XMLHttpRequest는 서버와 데이터를 교환하는 최초의 솔루션으로 개발자는 XMLHttpRequest를 사용하여 페이지를 다시 로드하지 않고 최종적으로 웹 페이지를 업데이트할 수 있으며 페이지가 로드된 후 데이터 수락 및 전송을 요청할 수 있습니다. 그리고 모든 브라우저는 XMLHttpRequest 개체를 가져올 수 있습니다.

var xhr = new XMLHttpRequest(); //获取xhr对象

그러나 XMLHttpRequest는 대략적인 기본 개체이며 다른 브라우저는 다른 방식으로 생성합니다. 다음은 호환되는 메서드입니다.

var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari...
  xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  try {
    xhr = new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e) {
    try {
      xhr = new ActiveXObject('Microsoft.XMLHTTP');  //IE5,6
    } catch (e) {}
  }
}

XMLHttpRequest를 사용하여 get 요청을 시작합니다.

//get请求
xhr.open("GET","test1.txt",true);
xhr.send();

전체 게시물 요청 코드는 다음과 같습니다.

var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari...
  xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  try {
    xhr = new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e) {
    try {
      xhr = new ActiveXObject('Microsoft.XMLHTTP');
    } catch (e) {}
  }
}
if (xhr) {
  xhr.onreadystatechange = onReadyStateChange;
  xhr.open('POST', '/api', true);
  // 设置 Content-Type 为 application/x-www-form-urlencoded
  // 以表单的形式传递数据
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('username=admin&password=root');
}


// onreadystatechange 方法
function onReadyStateChange() {
  // 该函数会被调用四次
  if (xhr.readyState === 4 &&xhr.status === 200) {
    console.log('执行成功');
  } else {
    console.log('执行出错');
  }
}

2. 제이쿼리 아약스

제이쿼리라고 하면 10년 이상 프론트엔드를 장악하고 UI 레이어와 데이터 레이어의 상호작용 문제를 완전히 해결한 시대입니다. ) 프런트 엔드가 MVVM 웨이브에 진입했습니다. Ajax는 개발자가 보다 편리하게 사용할 수 있도록 XHR을 캡슐화합니다.

$.ajax({   //标准写法
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});
$.get(url,function(){}); //get请求
$.post(url,body,function(){}); //post请求
$.getJSON(url,function(){});  //get请求从服务器加载Json编码

장점: - 네이티브 XHR의 캡슐화 - MVC용 프로그래밍 - 완벽한 호환성 - jsonp 지원

단점: - MVVM을 준수하지 않음 - 비동기식 모델이 충분히 현대적이지 않고 체인을 지원하지 않으며 코드 가독성이 좋지 않음 - 전체 Jquery가 너무 크고 도입 비용이 너무 높음

3. 가져오기

Fetch는 사실 새로운 세상입니다.분리된 XHR은 ajax보다 사용하기 쉬운 Promise 기반의 완전한 비동기 처리 메커니즘입니다.

가져오기를 사용하는 코드는 다음과 같이 xhr보다 더 체계적입니다.

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

특히 화살표 기능을 사용한 후:

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

장점: - 더 낮은 수준, 풍부한 API(요청, 응답) 제공 - ES의 새로운 Promise 설계를 기반으로 XHR과 분리된 간단한 구문

위의 내용을 보면 페치가 정말 아름답다고 생각할 수 있지만 페치 자체는 저수준 API이고, 익숙한 $.ajax나 axios와 같은 다양한 라이브러리를 캡슐화하는 데 도움이 되지 않는다는 점을 이해해 주시기 바랍니다. 기능 또는 구현.

따라서 몇 가지 단점이 있습니다. - 호환성이 상대적으로 낮고 저수준 브라우저에서 지원하지 않으며 가져오기의 폴리필을 구현해야 합니다. 브라우저가 기본 가져오기를 지원하는지 여부를 판단하는 아이디어는 실제로 매우 간단합니다. 지원하지 않는 경우 여전히 XMLHttpRequest를 사용하여 구현하고 패키징을 위해 Promise와 결합합니다. 일반적인 폴리필에는 es6-promise, babel-polyfill, fetch-ie8 등이 포함됩니다.

jsonp를 지원하지 않습니다. fetch-jsonp를 도입할 수 있습니다.

//安装
npm install fetch-jsonp --save-dev

//使用
fetchJsonp(url, {
  timeout: 3000,
  jsonpCallback: 'callback'
}).then(function(response) {
  console.log(response.json());
}).catch(function(e) {
  console.log(e)
});

인터셉터가 없으면 추가 캡슐화 계층 또는 가져오기 인터셉터가 필요합니다.
기본적으로 쿠키가 없으므로 구성을 추가해야 합니다.

fetch(url,{
  credentials: 'include' //include表示cookie既可同域，也可跨域，‘same-origin’表示只可同域
});

중단 없음, 시간 초과 시간 초과 처리를 지원하지 않음

Promise.race()로 구현할 수 있습니다. Promise.race(iterable) 메서드는 Promise 객체를 반환합니다. iterable의 Promise가 해결되거나 거부되는 한 외부 Promise는 동일한 값으로 해결되거나 거부됩니다. - 진행 상태를 가져올 수 없습니다.

getReader() 메서드는 주기적으로 읽을 수 있는 원본 바이트 스트림을 읽기 위해 가져오기의 Response.body에서 구현됩니다. javascript 참조 - 가져오기 진행률 표시기 - Stack Overflow 2016 - the year of web streams

4. 악시오스

Axios는 네트워크 요청을 위한 비교적 새로운 클래스 라이브러리로 You Yuxi Youda가 권장했으며 VUE 네트워크 요청의 표준 구성이 되었으며 매우 인기가 있습니다. 자체적으로 네이티브 XHR을 감싸는 래퍼입니다. - 지원 노드, http 요청 생성 - 지원 Promise API - 클라이언트가 CSRF 방지: 각 요청은 쿠키에서 얻은 키를 사용 - 요청 및 응답 가로채기 - 요청 취소

호환성 측면에서 axios는 본질적으로 기본 XHR의 캡슐화이지만 기본 ES6 Promise의 구현에 의존하고 가져오기와 같은 폴리필 호환성이 필요합니다.

설치하다:

//npm
npm install axios

//cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"><\/script>

기본 사용법은 다음과 같습니다.

axios({
    method: 'GET',
    url: url,
})
.then(res => {console.log(res)})
.catch(err => {console.log(err)})

// get请求
axios.get(url)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// post请求
axios.post（‘/user’, {
    name: 'Jerry',
    lastName: 'Liang'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

특수 장면 처리

개발 과정에서 우리는 종종 당혹스러운 시나리오에 직면하는데 이는 여러 요청의 직렬 및 동시성입니다. 동시성은 해결하기 쉽습니다. 콜백 지옥은 없지만 코드의 가독성은 쉽게 엉성해지며 직렬 문제는 for 프론트엔드가 절박해서 백엔드에서 Merge를 하는 것이 가장 좋은 방법인데, 백엔드가 이 처리를 하지 않으면 프론트엔드는 콜백지옥을 마주해야 한다.

다중 요청 직렬

// ajax
$.ajax({
    url: '',
    data: '',
    success: function (data) {
       $.ajax({
            url: '',
            data: '',
            success: function (data) {
                $.ajax({
                    // 如此一层嵌套一层
                })
            }
        }) 
    }
})

//axios
axios.get(url)
.then(res => {
    return axios.get(url,{
         {name:result.name}
    });
}).then(res => {
    //如此一层层嵌套
});

병렬로 여러 요청

//ajax 通过计数器实现（虽然Jquery支持$.when的方式，但此处不做案例）
var num = 0;
function all(){
    num++;
    if(n>=3)console.log('三个请求全部完成')；
}
$.ajax({
    url: '',
    data: '',
    success: function (data) {
       console.log("ajax请求1 完成");
       all();
    }
})
$.ajax({
    url: '',
    data: '',
    success: function (data) {
       console.log("ajax请求2 完成");
       all();
    }
})
$.ajax({
    url: '',
    data: '',
    success: function (data) {
       console.log("ajax请求3 完成");
       all();
    }
})

//axios
function getInfo() {
  return axios.get(url);
}
function getUser() {
  return axios.get(url);
}
axios.all([getInfo(), getUser()])
  .then(axios.spread(function (info, user) {
    // 两个请求现在都执行完成
  }));

선택 방법(개인적인 이해, 참고용)

우선, 코드가 여전히 Jquery를 기반으로 한다면 ajax가 최선의 선택이라는 것은 의심의 여지가 없습니다.
어떤 MVVM 프레임워크를 사용하고 있다면 아무 생각 없이 axios를 사용하는 것을 추천하며, 실제 프로젝트 사용에서 fetch는 다양한 캡슐화와 예외 처리가 필요하며, 이는 즉시 사용할 수 없으며 axios는 $.ajax를 직접 대체할 수 있습니다.
가져오기를 사용하고 싶다면 이를 자신만의 모범 사례로 캡슐화할 수 있을 것이라고 믿습니다.

참조: [연구 및 요약] 프런트엔드 요청(xhr/ajax/fetch/axios)에 대한 이러한 사항 - 거의 알고 있음