리액트로 에이잭스 처리

리액트로 에이잭스 처리

상당히 전통적인 웹 응용 프로그램에서 Ajax 요청을 어떻게 처리해야 합니까?특히 React for views를 사용하는 경우, 텍스트 등의 데이터를 처리하는 백엔드가 있지만, Ajax를 사용하여 옵션을 전환하거나 서버에 투고를 좋아하는 등의 사용자 상호 작용을 자동으로 저장합니다.

이 경우 jQuery를 사용해야 합니까, 아니면 Backbone과 같은 것이 더 유용합니까?

jQuery를 사용하면 혹시 모르는 사람이 있을 경우를 대비해서 AJAX 콜을 매우 쉽게 전송할 수 있습니다.React는 JavaScript일 뿐이므로 다른 jQuery AJAX 호출과 동일하게 동작합니다.

React의 문서에서는 jQuery를 사용하여 AJAX를 호출하기 때문에 스택이나 스택에 관계없이 대부분의 용도로는 충분하다고 생각합니다.

componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

Facebook의 공식 문서를 확인해 주십시오.Complementary Toolshttps://github.com/facebook/react/wiki/Complementary-Tools 에서 참조해 주세요.

이들은 API와 같은 데이터를 가져오는 것을 거의 권장하지 않습니다.

• axios: 브라우저 및 node.js의 약속 기반 HTTP 클라이언트.
• jQuery AJAX: 소개는 필요 없습니다.
• superagent: AJAX 요청용 경량 "동형" 라이브러리.
• 요구 사항:또 에이잭스.xmlHttpRequest, JSONP, CORS 및 CommonJS Promise A 지원이 포함됩니다.브라우저 지원은 IE6까지 확장됩니다.

개인적으로 제일 좋아하는 건axios브라우저 및 nodejs env에서 작동하며 공식 반응까지 하는 약속 때문입니다.JS 웹사이트는 AJAX 및 API에서도 동일한 기능을 권장합니다.

JavaScript Fetch API를 사용할 수 있으며 GET 및 POST를 지원하며 Promise를 빌드할 수 있습니다.

fetch('/api/getSomething').then(function() {...})

JQuery는 사용하지 않습니다.AJAX 콜은 실제로는 그다지 복잡하지 않고 JQuery는 매우 의존적이기 때문입니다.라이브러리 없이 AJAX 콜을 실행하는 방법에 대한 banillajs의 메모를 참조하십시오.http://vanilla-js.com/

꼭 사용해 주세요.Fetch API매우 이해하기 쉽고 모든 방법을 지원하며 사용할 수 있습니다.async/await대신promise/then지옥으로 다시 전화해요

예를 들어 다음과 같습니다.

fetch(`https://httpbin.org/get`,{
    method: `GET`,
    headers: {
        'authorization': 'BaseAuth W1lcmxsa='
    }
}).then((res)=>{
    if(res.ok) {
        return res.json();
    }
}).then((res)=>{
    console.log(res); // It is like final answer of XHR or jQuery Ajax
})

더 나은 방법으로 또는async/await방법:

(async function fetchAsync () {
    let data = await (await fetch(`https://httpbin.org/get`,{
                                method: `GET`,
                                headers: {
                                    'authorization': 'BaseAuth W1lcmxsa='
                                }
                            })).json();
                      console.log(data);
})();

언급URL : https://stackoverflow.com/questions/29990809/handling-ajax-with-react