브라우저의 JavaScript HTTP 라이브러리 비교

현대 웹 개발은 Ajax 요청에 크게 의존합니다. 기본

객체는이 기능을 제공하지만 많은 개발자는 더 간단한 Ajax 처리를 위해 jQuery와 같은 라이브러리를 사용하는 것을 선호합니다. 이 기사는 샘플 HTTP 서비스에 대한 요청을 통해 기능을 보여주는 SuperAgent와 Axios의 두 가지 인기있는 대안을 비교합니다.

주요 차이점 : XMLHttpRequest

수퍼 게이트와 axios는 비동기식 Ajax 기능을 제공하여 다른 코드가 동시에 실행할 수 있도록합니다. Axios는 표준 JavaScript 관행과 일치하는 약속을 활용하는 반면 SuperAgent는 다른 접근 방식을 사용합니다. 이로 인해 Axios는 다른 약속 기반 라이브러리와 더 완벽하게 통합 될 수 있습니다.

둘 다 기본 GET, POST 및 요청을 API에 적합하지만 현대 에서 찾은 업로드 진행 모니터링과 같은 기능이 부족합니다. 기능적으로 유사하지만 저자는 슈퍼 가트의 API가 더 직관적 인 것을 발견합니다. 그러나 약속 통합이 중요하다면 Axios가 선호하는 선택입니다. 는 개발자에게 편안한 브라우저 호환성을 관리하거나 최신 브라우저를 타겟팅하는 데 실용적인 옵션으로 남아 있습니다. 도서관 소개 :

는 동기 및 비동기 요청을 모두 지원합니다. JavaScript는 단일 스레드이므로 동기식 요청 블록 실행을하므로 비동기 요청이 실제 선택을합니다. Axios와 Superagent는 모두 비동기 요청을 독점적으로 수행합니다. 요청은 백그라운드에서 발생하기 때문에 응답을 즉시 사용할 수 없습니다. 콜백 함수는 응답이 수신되면 응답을 처리합니다 Axios는 약속을 사용 하여이 프로세스를 관리하여 다른 비동기 코드와 더 나은 통합을 제공합니다. SuperAgent의 API는 표준 약속 패턴을 준수하지 않습니다. 이로 인해 여러 라이브러리 또는 사용자 정의 약속으로 작업 할 때 Axios가보다 강력한 옵션이됩니다. 그러나 SuperAgent는 더 넓은 인식과 작지만 유용한 플러그인 생태계 (예 : URL 접두사)를 자랑합니다. 두 라이브러리는 기본 API 상호 작용 (Get, Post, Put)에서 탁월하지만 Modern 에서 사용 가능한 업로드 진행 추적과 같은 고급 기능이 부족합니다. 그들의 주요 이점은 요청 구성 및 실행에 대한 간결하고 체인 가능한 API에 있습니다.

설치 :
• 는 설치가 필요하지 않습니다. 최신 브라우저 (IE8 이상)에 내장되어 있습니다. SuperAgent는 NPM 모듈로 NPM (node.js/io.js 포함)과 Browserify와 같은 클라이언트 측 패키징 도구가 필요합니다. Axios는 NPM 모듈, AMD 모듈 및 독립형 JavaScript 파일로 제공됩니다. 예제 API (베이커리 주문 관리) :
이 예제는 가상의 베이커리 주문 관리 API를 사용합니다
get
• : 날짜 범위 내에서 주문을 검색합니다 Post : 새 순서를 만듭니다 /orders?start=YYYY-MM-DD&end=YYYY-MM-DD 데이터는 JSON 형식으로 교환됩니다. 예를 들어, 3 월 10 일에 3 개의 초콜릿과 5 개의 레몬 케이크를 주문하려면 (5 월 4 일에 주문) :
• 새 순서 만들기 : 이것은 HTTP 메소드 (post), url (/orders), 요청 본문 (주문 세부 사항) 및 컨텐츠 유형 ()을 지정해야합니다.
수퍼 게이트 :

<code class="language-json">{
  "chocolate": "3",
  "lemon": "5",
  "delivery": "2015-03-10",
  "placed": "2015-03-04"
}</code>

axios :

xmlhttprequest :

/orders application/json 날짜 범위별로 주문 검색 :

여기에는 쿼리 매개 변수를 추가하는 것이 포함됩니다
수퍼 게이트 :
axios :

<code class="language-javascript">var request = require('superagent');

request.post('/orders/')
  .send({'chocolate': 2, 'placed': '2015-04-26'})
  .type('application/json')
  .accept('json')
  .end(function(err, res) {
    if (err) {
      console.log('Error!');
    } else {
      console.log(res.body);
    }
  });</code>

• xmlhttprequest :
권장 사항 및 결론 :

<code class="language-javascript">axios.post(
  '/orders/',
  {
    chocolate: 2,
    placed: '2015-04-26'
  },
  {
    headers: {
      'Content-type': 'application/json',
      'Accept': 'application/json'
    }
  }
)
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(response) {
    console.log('Error!');
  });</code>

Axios와 Superagent는 Axios의 약속 기반 접근 방식이 핵심 차별화 요소 인 유사한 기능을 제공합니다. SuperAgent는보다 간소화 된 API를 제공하지만 Axios의 약속 준수는 더 다양합니다. 는 브라우저 별 뉘앙스를 편안하게 관리하는 개발자에게 유효한 옵션으로 남아 있습니다. 선택은 프로젝트 요구와 개발자 선호도에 따라 다릅니다. GitHub 저장소 (입력에 제공되지 않은 링크)에는 전체 코드 예제가 포함되어있을 수 있습니다. 입력 텍스트의 나머지는 자주 묻는 질문과 답변으로 구성되어 있으며,이 출력은 간단한 출력에 포함되어 있지 않습니다.

위 내용은 브라우저의 JavaScript HTTP 라이브러리 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!