giới thiệu.

React đang là một framework rất phổ biến hiện nay. và có một vấn đề mà rất nhiều những người mới làm quen với react đặt ra câu hỏi: 'làm thế nào để lấy dữ liệu từ server trong react' để trả lời câu hỏi này. React chỉ là một thư viện để view và bạn hoàn toàn tự do sử dụng bất kể thư viện nào mà bạn thấy nó thỏa mái nhất. Trong bài viết này tôi sẽ giới thiệu đến các bạn 5 thư viện đơn giản để làm ajax call trong React.

JQuery $.ajax.

đây là cách nhanh nhất để làm một ajax call đến server. Nếu mà bạn chỉ mới bắt đầu làm quen với react, thì cái này có thể giúp bạn giảm được rất nhiều thời gian để tiếp cận với nó, nhiều người trong chúng ra đã quá quen thuộc với jquery vì thể không mất thời gian để hiểu và sử dụng nó trong react. Dưới đây là một ví dụ đơn giản sử dụng jqery để lấy dữ liệu từ server.

    loadCommentsFromServer: function() {
        $.ajax({
            url: URL,
            method: 'get',
            success: (data) => {
                this.setState({data: data});
            },
            error: (xhr, status, error) {
                console.log(error);
            }
        });
    }

ta đã thực hiện ajax call ngay bên trong React Component. và gọi this.setState() trong success callback. Tuy nhiê, Jquery là một thư viện lớn với nhiều functionalities, bởi vậy không cần thiết để sử dụng jquery chỉ để thực hiện call server (nếu mà bạn không sử dụng cho các nhiệm vụ khác). vậy ta lên sử dụng thư viện gì để thay thế. chúng ta sẽ cùng tìm hiểu fetch api.

Fetch API

Fetch là một api đơn giản và chuẩn hóa việc call api thay thế cho XMLHttpRequest. nó có một Polyfill cho các browser cũ và nên sử dụng nó trong các webapp hiện đại. nếu mà bạn thực hiện một api call ở trong node.js bạn cũng có thể sử dụng fetch bằng việc sử dụng node-fetch. dưới đây là một ví dụ call api sử dụng fetch api:

loadCommentsFromServer: function() {
    fetch(URL).then(response => {
        // thực hiện setState ở đây ...
    }).catch(error => {
        
    });
 }

trong hầu hết các React tutorial hiện nay bạn sẽ thấy fetch được sử dụng cho việc call api tới server để tìm hiểu nhiều hơn về fetch bạn có thể xem các đường link bên dưới: Mozilla Google Developers

Superagent

Superagent là một thư viện có trọng lượng nhẹ được tao ra để giúp developer dễ đọc hơn và linh hoạt hơn. Nếu vì một lý do nào đó bạn không muốn sử dụng fetch thì bạn có thể sử dụng Superagent. ví dụ:

addComment: function(comment) {
    request.post(URL)
        .send(comment)
        .set('Content-Type', 'aplication/json')
        .end((error, response) => {
            // thực hiện set State ở đây
        });
 }

Superagent cũng có Node.js module với cùng api. Nếu mà bạn đang xây dựng một app sử dụng Node.js và React. bạn có thể bundle superagent sử dụng một cái gì đó giống như webpack và làm nó có sẵn phía client. vì các API cho client và server là giống nhau. không cần thay đổi code để làm việc trên browser.

Axios.

Axios là một promise dựa trên HTTP client cho Node.js và browser. Giống như fetch và superagent, nó có thể làm việc trên cả client side và server side, nó có nhiều tính năng rất hữu ích. ví dụ về sử dụng axios:

loadCommentsFromServer: function() {
    axios.get(this.props.url).then(function(response){
      // perform setState here
    }).catch(function(error){
      //Some error occurred
    });
}

Request

sẽ là một thiều sot nếu không kể đến thư viện request được thiết kế với sự đơn giản sẽ đọc và dễ sử dụng. Với 16K sao trên github, nó cũng là một thư viện phổ biến nhất Node.js module. bạn có thể tìm thấy nhiều hơn thông tin về request module trên github của họ ví dụ sử dụng request:

loadCommentsFromServer: function() {
    request(this.props.url, function(err, response, body){
          // perform setState here
    });
}

Kết Luận.

Trên đây là 5 thư viện để thực hiện việc lấy dự liệu từ server mà mình đã giới thiệu tới các bạn. tùy vào mục đích sử dụng mà các bạn nên chọn thư viện mà mình thấy tiện lợi nhất đối với mình. Về mình thì mình thích sử dụng axios vì nó hỗ trợ rất nhiều và sự đơn giản của nó như: call nhiều api đồng thời, interceptor, cancelation... rất đơn giản. Hy vọng bài viết sẽ giúp được những bạn mới tiếp cận với React có thể biết được một số phương pháp tiếp cận với call api.