React Native - Phần 5 - Networking

Danh sách các bài trước:

• React Native - Phần 1 - Hướng dẫn cài đặt môi trường phát triển ứng dụng với React Native
• React Native - Phần 2 - Viết chương trình đầu tiên và tìm hiểu vể Props, State
• React Native - Phần 3 - Tìm hiểu về Style, Height & Width và điều chỉnh Layout với Flexbox
• React Native - Phần 4 - Tìm hiểu một số thành phần giao diện cụ thể trong React Native - Text input, ScrollView, ListView.

Trong phần này chúng ta sẽ tìm hiểu cách để kết nối ứng dụng với các giao thức Internet, đây là phần cực kỳ quan trọng khi các ứng dụng sử dụng mô hình Client-Server đang chiếm số đông.

Nhiều ứng dụng mobile cần phải tải về các thông tin bằng cách truy cập vào các API. Bạn có thể muốn sử dụng các REST API với phương thức POST, hoặc chỉ đơn giản là bạn cần lấy về thông tin tĩnh từ một server nào đó.

Sử dụng Fetch

React Native cung cấp module Fetch API để sử dụng cho việc kết nối network. Fetch sẽ rất thân thuộc nếu như bạn đã đã từng sử dụng XMLHttpRequest hoặc các networking APIs trước đây. Bạn có thể sẽ cần phải tham khảo hướng dẫn sử dụng Fetch tại đây để có được thêm các thông tin.

Tạo một HTTP Request

Khi bạn muốn lấy nội dung bằng cách gọi đơn giản nhất từ một URL, rất đơn giản bạn chỉ cẩn đặt URL đó trong fetch:

fetch('https://mywebsite.com/mydata.json')

Fetch sẽ có một số tùy chọn tham số để bạn có thể tùy chỉnh HTTP request. Ví như bạn muốn thêm cụ thể một header nào đó và muốn gọi với phương thức POST. Ví dụ dưới đây sẽ cho các bạn thấy một cách đơn giản các tùy chọn:

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

Để có được các cái nhìn đầy đủ hơn các bạn có thể đọc thêm ở tài liệu Fetch Request docs.

Xử lý response

Ví dụ ở bên trên đã cho các bạn thấy cách để tạo ra một request. Và trong phần này, khi các bạn muốn xử lý dữ liệu lấy được về thì phần này sẽ nói rõ hơn về cách thức xử lý dữ liệu sau khi được lấy về.

Networking bản chất là một hình thức bất đồng bộ (Lan man một chút, vì sự bất đồng bộ này mà ở Android từ API 11 trở lên hệ điều hành đã ngăn cản việc chạy Network trên main thread để ngăn cản độ trễ của chương trình trong thời gian chờ dữ liệu mạng được trả về dưới client). Phương thức Fetch sẽ trả về một Promise, điều này sẽ dễ dàng để các bạn có thể viết các đoạn code xử lý cho các thao tác bất đồng bộ:

  function getMoviesFromApiAsync() {
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });
  }

Bạn cũng có thể sử dụng mẫu cấu trúc ES2017 về async/await trong ứng dụng React Native:

  async function getMoviesFromApi() {
    try {
      let response = await fetch('https://facebook.github.io/react-native/movies.json');
      let responseJson = await response.json();
      return responseJson.movies;
    } catch(error) {
      console.error(error);
    }
  }

Đừng quên câu lệnh catch để bắt bất kỳ một lỗi nào xảy ra khi mà bạn thực hiện fetch. Bên cạnh đó chúng ta cũng không nên âm thầm bỏ qua các lỗi.

Mặc đinh, iOS sẽ khóa tất cả những request nào không được mã hóa khi sử dụng SSL. Nếu như bạn muốn fetch từ một cleartext URL (là URL được bắt đầu với http), bạn sẽ cần phải thêm một ngoại lệ App Transport Security. Nếu như bạn biết thời gian trước để có thể truy cập vào một domain sẽ cần rất nhiều các lớp bảo mật nên sẽ có rất nhiều các ngoại lệ được thêm vào để bắt ngoại lệ ở mỗi lớp bảo mật. Nếu như tên miền không được biết trong quá trình ứng dụng chạy thì bạn có thể vô hiệu hóa hoàn toàn AST. Chú ý rằng dù thế nào thì từ tháng 1 năm 2017, Apple Reviewing team của App Store sẽ yêu cầu một lý do hợp lý nếu như bạn muốn vô hiệu hóa ATS. Bạn có thể xem Apple's documentation để biết thêm thông tin.

Sử dụng các thư viện Networking khác

XMLHttpRequest API là một thành phần được tích hợp sẵn vào trong React Native. Điều này đồng nghĩa với việc bạn có thể sử các thư viện của bên thứ ba như frisbee hoặc axios và thao tác trên chúng. hoặc bạn cũng có thể sử dụng XMLHttpRequest API nếu như bạn muốn. Bạn có thể xem ví dụ ngay dưới đây:

var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();

Mô hình bảo mật của XMLHttpRequest là khác biệt so với web. nó dường như là không có khái niệm trong một ứng dụng native, bạn có thể đọc trong CORS.

Hỗ trợ WebSocket

React Native đồng thời hỗ trợ WebSocket, một phương tức tạo kênh kết nối liên tục bằng cách sử dụng kết nối TCP.

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened

  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // a message was received
  console.log(e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log(e

Như vậy với bài hướng dẫn này bạn đã có thể tích hợp các liên kết internet vào trong ứng dụng của mình, đã có rất nhiều thứ có thể làm được sau bài hướng dẫn này rồi. Và trong bài hướng dẫn sau tôi sẽ nói nhiều hơn về cách sử dụng, trao đổi dữ liệu giữa các màn hình trong ứng dụng React Native. Các bạn chờ tiếp nhé.

Nguồn tham khảo Networking - React Native Basic