GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 12/12/2019 | 00:00 GMT+7

Sử dụng Thư viện React-Async để tìm nạp dữ liệu so sánh

Khi tìm nạp dữ liệu trong một ứng dụng JavaScript, async-await cho phép ta sử dụng lập trình đồng bộ bắt buộc để tìm nạp dữ liệu. Điều này nghĩa là mã của ta sẽ mô tả một cách ngụ ý cách chương trình sẽ hoạt động và sẽ hoạt động theo một chuỗi hoạt động duy nhất. Mặt khác, React là một thư viện xây dựng giao diện user một cách khai báo . Đây thường được coi là một phương pháp đối lập với lập trình mệnh lệnh, trong đó nhà phát triển mô tả những gì họ muốn chương trình làm, hơn là cách họ muốn nó hoạt động. Do đó, sự kết hợp giữa React và async-await dẫn đến một mô hình hỗn hợp trong đó ta có cả mã bắt buộc (để tìm nạp dữ liệu) và mã khai báo (cho cấu thành giao diện user ).

React-async cung cấp một API khai báo để thực hiện bất kỳ lệnh gọi API REST nào bằng cách sử dụng một thành phần React duy nhất, cho phép lập trình khai báo được sử dụng trong toàn bộ ứng dụng. Nó xử lý các lỗi, giải quyết lời hứa và thử lại các lời hứa cũng như xử lý trạng thái không đồng bộ local .

Trong bài viết này, ta sẽ giải thích cách thư viện React-Async giúp ta tìm nạp dữ liệu và chạy qua một số minh họa về các thành phần và chức năng của Helper.

Tìm nạp dữ liệu khai báo với React-Async

Hãy chia chủ đề của ta thành hai phần: Tìm nạp dữ liệu khai báo và Lệnh gọi API không đồng bộ trong React.

Tìm nạp dữ liệu so sánh là một cách tiếp cận được sử dụng trong việc gọi các API, trong đó bạn khai báo những gì bạn muốn nó làm cho bạn mà bạn không cần lo lắng về tất cả những thứ liên quan đến cuộc gọi. Nó ngược lại với phương pháp bắt buộc, nơi bạn cũng cần phải trình bày chi tiết các bước bạn muốn chương trình thực hiện.

Vì JavaScript là đồng bộ theo mặc định và là một stream nên khi ta muốn hiển thị một thành phần hiển thị một số dữ liệu đến từ lệnh gọi không đồng bộ trong các version trước của React, các lớp cần được sử dụng. Ta phải sử dụng các phương thức vòng đời của thành phần đảm bảo cuộc gọi xảy ra khi thành phần được mount và sau đó ta sử dụng trạng thái local để quản lý trạng thái tải.

Yêu cầu không đồng bộ sẽ đợi một yêu cầu phản hồi trong khi phần còn lại của mã tiếp tục thực thi. Sau đó, khi đến đúng thời điểm, một lệnh gọi lại sẽ kích hoạt các yêu cầu không đồng bộ này hoạt động.

Hãy chứng minh điều này bằng cách thực hiện cuộc gọi đến một điểm cuối để lấy danh sách giá tiền tệ:

import React, { Component } from 'react'; import axios from 'axios';  class App extends Component {   state = {     data: [],     error: '',   };    componentDidMount() {          axios       .get('https://api.coinmarketcap.com/v1/ticker/?limit=1')       .then(res => this.setState({ data: res.data }))       .catch(error => this.setState({ error }));   }    render () {     return (       <div className="App">         <ul>           {this.state.data.map(el => (             <li>               {el.name}: {el.price_usd}             </li>           ))}         </ul>       </div>     );   } }  export default App;

Lưu ý: Cài đặt axios bằng lệnh 'npm install axios` vào terminal của bạn.

Bạn có thể thấy mã này trực tiếp bằng cách sử dụng trang CodeSandbox này .

Ở đây, ta thực hiện lệnh gọi API của bạn trong hàm componentDidMount đảm bảo nó chạy ngay sau khi thành phần được tải. Ta chỉ có thể hiểu được dữ liệu của bạn sau khi thực hiện các bước sau:

  • Đầu tiên, ta thực hiện một yêu cầu đối với API.
  • Sau đó ta nhận được phản hồi.
  • Ta extract dữ liệu từ phản hồi.
  • Cuối cùng, ta lưu trữ dữ liệu ở trạng thái local của ta .

Trong trường hợp xảy ra lỗi trong quá trình tìm nạp dữ liệu:

  • Ta bắt lỗi.
  • Sau đó, ta lưu trữ dữ liệu ở trạng thái local của ta .

Ở đây ta đang mô tả rõ ràng cách thức và việc cần làm ở mỗi bước trong việc tìm nạp dữ liệu. Mặc dù cú pháp và chức năng hoạt động chính xác, mã có thể được viết lại để hiệu quả hơn và ít dòng hơn nếu được viết theo cách khai báo. Hãy viết lại nó bằng React-Async.

Trước tiên, bạn cần cài đặt gói bằng lệnh npm install react-async trong terminal . Sau đó, viết thành phần của bạn với mã sau:

import React, { Component } from 'react'; import Async from 'react-async';  const loadJson = () =>   fetch("https://api.coinmarketcap.com/v1/ticker/?limit=1")     .then(res => (res.ok ? res : Promise.reject(res)))     .then(res => res.json())  const App = () => (   <Async promiseFn={loadJson}>     {({ data, error, isLoading }) => {       if (isLoading) return "Loading..."       if (error) return ``Something went wrong: ${error.message}``        if (data)         return (           <div>              {data.map(el => (               <li>                 {el.name}: {el.price_usd}               </li>              ))}           </div>         )        return null     }}   </Async> )  export default App;

Nếu bạn đang sử dụng CodeSandbox, hãy thêm React-Async từ menu phụ thuộc. Nếu bạn muốn xem mã này trực tiếp, hãy xem ví dụ về React-Async trong CodeSandbox .

Ở đây ta đã viết lại thành phần của bạn bằng cách sử dụng hook thay vì các lớp. Đầu tiên ta tạo một hàm loadJson để xử lý việc tìm nạp dữ liệu của ta . Sau đó, bên trong thành phần Ứng dụng của ta , ta sử dụng thành phần Async có sẵn thông qua thư viện React-Async .

Khi lời hứa của ta được giải quyết, ta sẽ cung cấp các đạo cụ để xử lý các tình huống khác nhau.

  • isLoading có sẵn để ta có thể hiển thị thông báo thân thiện với user trong khi dữ liệu chưa được tải.
  • error có sẵn trong trường hợp có lỗi trong quá trình tìm nạp.
  • data là data thực tế được trả về sau khi quá trình tìm nạp hoàn tất.

Trong ví dụ này, ta không còn phải sử dụng các lớp hoặc phương thức vòng đời để tải dữ liệu của bạn , cũng như không cần phải cho React-Async biết cách xử lý dữ liệu hoặc cách cập nhật trạng thái của ta .

React-Async quản lý trạng thái tải thông qua hỗ trợ dự phòng isLoading , được hiển thị cho đến khi data sẵn sàng được hiển thị, tức là khi lời gọi không đồng bộ phụ thuộc giải quyết và trả về dữ liệu.

Thành phần trợ giúp

React-Async đi kèm với một số thành phần trợ giúp giúp JSX của bạn dễ khai báo hơn và ít lộn xộn hơn. Mỗi thành phần trợ giúp sẽ chỉ hiển thị con của nó khi thích hợp. Ta có thể viết lại hàm Ứng dụng của bạn để trông như thế này:

const App = () => (   <Async promiseFn={loadJson}>     <Async.Loading>Loading...</Async.Loading>      <Async.Resolved>       {data => (         <div>                      {data.map(el => (             <li>               {el.name}: {el.price_usd}             </li>           ))}         </div>       )}     </Async.Resolved>      <Async.Rejected>       {error => `Something went wrong: ${error.message}`}     </Async.Rejected>   </Async> )

Kiểm tra ví dụ này trên CodeSandbox .

Trong ví dụ này, ta đã sử dụng các Async.Loading , Async.Resolved và Async.Rejected để đơn giản hóa mã của ta và làm cho nó dễ đọc hơn. Các thành phần trợ giúp được cung cấp bởi React-Async có thể lấy một phần tử React hoặc một hàm dưới dạng con. Khi bạn cung cấp một chức năng, bạn sẽ nhận được các đạo cụ kết xuất mà bạn có thể sử dụng trong thành phần của bạn .

Ứng dụng kiểm tra profile user với các chức năng của người trợ giúp

Hãy xây dựng một ứng dụng profile user nhỏ sử dụng thêm một số chức năng trợ giúp. Cập nhật thành phần của bạn thành mã sau:

import React, { Component } from 'react'; import Async from 'react-async';  const loadUser = ({ userId }) =>   fetch('`https://reqres.in/api/users/${userId}'`)     .then(res => (res.ok ? res : Promise.reject(res)))     .then(res => res.json())  const UserPlaceholder = () => (   <div>     <div>User Details Loading</div>   </div> )  const UserDetails = ({ data }) => (   <div className="details">     <img className="avatar" src={data.data.avatar} alt="" />     <div>       {data.data.first_name} {data.data.last_name}     </div>   </div> )  const App = () => (     <Async promiseFn={loadUser} userId={1}>       <Async.Pending>         <UserPlaceholder />       </Async.Pending>       <Async.Fulfilled>{data => <UserDetails data={data} />}</Async.Fulfilled>       <Async.Rejected>{error => <p>{error.message}</p>}</Async.Rejected>     </Async> ) export default App;

Đây là mã trong CodeSandbox.

Hãy xem qua các hàm mà ta đã khai báo:

  • loadUser : Ta xác định chức năng này để xử lý việc tìm nạp dữ liệu. Nó cần một chỗ dựa ( userId ) và truy vấn API dựa trên id.
  • userPlaceholder : Đây là thành phần dự phòng sẽ được hiển thị khi lời hứa vẫn chưa được giải quyết, nghĩa là khi dữ liệu chưa tải xong.
  • userDetails : Thành phần này xử lý hiển thị thực tế của dữ liệu user . Nó lấy dữ liệu thông qua đạo cụ và chỉ được hiển thị khi lời hứa đã được giải quyết.
  • Async.Pending , Async.Fulfilled và Async.Rejected : Đây là các chức năng để đơn giản hóa mã của ta và làm cho nó dễ đọc hơn.

Kết luận

Trong hướng dẫn này, ta đã khám phá cách sử dụng thư viện React-Async để giúp ta tìm nạp dữ liệu một cách khai báo. Ta cũng đã xem xét một số chức năng trợ giúp mà nó cung cấp. Để tìm hiểu thêm về React-Async, hãy xem tài liệu về React-Async trên GitHub .

Tags:

Các tin liên quan