React Ajax 개발에 사용할 것

React ajax 개발에서는 다음을 사용할 수 있습니다. 1. jQuery의 "$.ajax" 메소드 2. Fetch API 3. 경량 AJAX API 라이브러리인 SuperAgent 4. 주로 백엔드에 데이터를 보내는 데 사용되는 Axios 라이브러리 5. 요청 라이브러리.

이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React AJAX 요청을 위한 5가지 솔루션

1. jQuery $.ajax

이것은 빠르고 더러운 솔루션입니다. 공식 React 튜토리얼의 이전 버전에서는 jQuery $.ajax를 사용하여 서버에서 데이터를 가져오는 방법을 보여주었습니다. React를 막 배우고 사용하기 시작했다면 jQuery를 사용하면 시작하고 개발하는 데 많은 시간을 절약할 수 있습니다. 왜냐하면 우리 모두는 jQuery에 매우 익숙하기 때문입니다. 다음은 AJAX를 구현하는 jQuery의 예입니다. $.ajax 来示范如何从服务器获取数据。如果你是刚刚开始学习和把玩 React，jQuery 可以节省你大量入门和开发的时间，因为我们都对 jQuery 非常熟悉了。这是 jQuery 实现 AJAX 的例子：

loadCommentsFromServer: 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)
    });
}

P.S. 这代码段摘自旧版本的官方教程

这里演示了如何在一个 React 组件里面使用 jQuery 的 $.ajax。唯一需要注意的是如何在 success 回调里面调用 this.setState() ，即当 jQuery 成功收到数据之后应该如何通过 React 的 API 更新 state 的。

然而，jQuery 是一个包含很多功能的大头儿，只为了用一下 AJAX 功能而引入整个 jQuery 是没有意义的（除非你还使用 jQuery 做了很多别的事情）。So，用什么才好？答案是 fetch API。

2、Fetch API

https://github.com/github/fetch

Fetch 是个新的、简单的、标准化的API，旨在统一Web通信机制，并替代 XMLHttpRequest。它已经被主流浏览器所支持，针对较旧的浏览器也有了一个 polyfill （Benz乱入：polyfill 直译是填充工具，就是旧浏览器本来不支持某个新的JS API，引入一段js代码后就支持了，这一段js代码给旧浏览器”填充“了一个API。这个单词我实在不知道怎么翻译 ，感觉反而保留原单词不翻译更能让读者理解。）。如果你在使用 Node.js ，你也可以通过 node-fetch 来使 Node.js 支持 Fetch。

若把上述用 jQuery $.ajax 的代码段改成 fetch 实现的话，代码应该长这样子：

loadCommentsFromServer: function() {
    fetch(this.props.url).then(function(response){
        // 在这儿实现 setState
    });
}

在一些流行的 React 教程中你也许会发现 fetch 的身影。要了解更多关于 fetch 的情况，可参考下列链接（全英文）：

• Mozilla
• David Walsh Blog
• Google Developers
• WHATWG

3、SuperAgent

https://github.com/visionmedia/superagent

SuperAgent 是一个轻量级的 AJAX API 库，为更好的可读性和灵活性而生。如果某些原因让你不太想用 fetch，那么 SuperAgent 就几乎是必然的选择了。SuperAgent 的用法大概是这样的：

loadCommentsFromServer: function() {
    request.get(this.props.url).end(function(err,res){
        // 在这儿实现 setState
    });
}

SuperAgent 也有 Node.js 版本，API 是一样的。如果你在用 Node.js 和 React 开发同构应用（Benz 乱入：这个链接是我加的，旨在照顾初学者），你可以用 webpack 之类的东西嵌入 superagent 并让它适用于浏览器端。因为浏览器端和服务器端的 API 是一样的，所以其 Node.js 版本不需要修改任何代码就可以在浏览器上运行。

4、Axios

https://github.com/axios/axios

Axios 是一个基于 promise 对象（Benz 乱入：这个链接也是我加的）的 HTTP 客户端；axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。。与 fetch 和 superagent

loadCommentsFromServer: function() {
    axios.get(this.props.url).then(function(response){
        // 在这儿实现 setState
    }).catch(function(error){
        // 处理请求出错的情况
    });
}

P.S. 이 코드 조각은 공식 튜토리얼의 이전 버전에서 가져온 것입니다.

이는 React 구성 요소에서 jQuery의 $.ajax를 사용하는 방법을 보여줍니다. . 주의가 필요한 유일한 것은 success 콜백에서 this.setState()를 호출하는 방법, 즉 jQuery가 성공적으로 수신한 후 React API를 통해 상태를 업데이트하는 방법입니다. 데이터.

그러나 jQuery는 많은 기능을 포함하는 큰 패키지이므로 단지 AJAX 기능을 사용하기 위해 jQuery 전체를 소개하는 것은 의미가 없습니다(jQuery를 사용하여 다른 많은 작업을 수행하지 않는 한). 그러면 무엇을 사용해야 합니까? 그 대답은 fetch API입니다.

2. Fetch API

https://github.com/github/fetch

Fetch는 웹 통신 메커니즘을 통합하고 를 대체하도록 설계된 새롭고 간단한 표준화된 API입니다. XMLHttpRequest. 주류 브라우저에서 지원되었으며 이전 브라우저를 위한 폴리필도 있습니다

(Benz가 엉망입니다: 폴리필은 문자 그대로 채우기 도구이므로 이전 브라우저는 원래 새로운 JS API를 지원하지 않는다는 의미입니다. js 조각을 도입한 후 이 js 코드 조각은 이전 브라우저용 API를 "채우고" 있습니다. 이 단어를 어떻게 번역해야 할지 잘 모르겠지만, 원래 단어를 그대로 두는 것이 독자들에게는 더 좋을 것이라고 생각합니다. 번역되지 않았습니다.). Node.js를 사용하는 경우 node-fetch를 사용하여 Node.js가 Fetch를 지원하도록 활성화할 수도 있습니다.

jQuery $.ajax를 사용하는 위 코드 세그먼트가 fetch로 변경되면 코드는 다음과 같아야 합니다. 🎜

loadCommentsFromServer: function() {
    request(this.props.url, function(err, response, body){
        // 在这儿实现 setState
    });
}

🎜일부 인기 React 튜토리얼에서 찾을 수 있습니다. 가져오기가 포함됩니다. 가져오기에 대해 자세히 알아보려면 다음 링크(모두 영어)를 참조하세요. 🎜

• Mozilla
• David Walsh 블로그
• Google 개발자
• 뭐야

🎜🎜3, SuperAgent🎜🎜🎜https:/ /github.com/visionmedia/superagent🎜🎜SuperAgent는 더 나은 가독성과 유연성을 위해 탄생한 경량 AJAX API 라이브러리입니다. 어떤 이유로 fetch를 사용하고 싶지 않다면 SuperAgent는 거의 불가피한 선택입니다. SuperAgent의 사용법은 대략 다음과 같습니다. 🎜rrreee🎜SuperAgent에도 Node.js 버전이 있으며 API도 동일합니다. Node.js와 React를 사용하여 동형 애플리케이션을 개발하는 경우🎜(Benz intrusion: 이 링크는 초보자를 위해 제가 추가했습니다)🎜, webpack과 같은 것을 사용하여 superagent를 삽입하고 만들 수 있습니다 브라우저 측에서 작동합니다. 브라우저 측 API와 서버 측 API가 동일하기 때문에 Node.js 버전은 코드를 수정하지 않고도 브라우저에서 실행할 수 있습니다. 🎜🎜🎜4, Axios🎜🎜🎜https://github.com/axios/axios🎜🎜Axios는 Promise 객체 기반의 HTTP 클라이언트입니다🎜(Benz가 끼어들었습니다: 이 링크도 추가했습니다)🎜; 백그라운드로 요청하는 것 외에도 요청에는 더 많은 제어 기능이 있습니다. . fetch 및 superagent와 마찬가지로 브라우저와 Node.js를 모두 지원합니다. 또한 Github 홈페이지에서 유용한 고급 기능이 많이 포함되어 있음을 확인할 수 있습니다. 🎜🎜Axios의 대략적인 사용법은 다음과 같습니다. 🎜rrreee🎜🎜5, Request🎜🎜🎜https://github.com/request/request🎜🎜 이 요청 라이브러리를 소개하지 않으면 이 글은 이렇게 될 것 같습니다. 불완전한. 이념적으로 미니멀리스트 디자인을 추구하는 JS 라이브러리입니다. Github에 별이 12,000개 이상 있습니다🎜(벤츠는 엉망입니다. 이 기사를 번역했을 때 이미 별이 16,000개가 넘었습니다) 🎜. 또한 가장 인기 있는 Node.js 모듈 중 하나입니다. 자세히 알아보려면 GitHub 홈페이지로 이동하세요. 🎜🎜사용 예: 🎜rrreee🎜[관련 권장 사항: 🎜Redis 비디오 튜토리얼🎜]🎜

위 내용은 React Ajax 개발에 사용할 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!