Giao tiếp Client với Server trong React Native

RESTful API là gì

Nếu bạn không biết RESTful API là gì thì có thể đọc thêm bài viết này (https://viblo.asia/p/thiet-ke-restful-api-GrLZD98Vlk0) để hiểu rõ hơn về RESTful API. Đây là một trong những chuẩn giao tiếp phổ biến giữa client và server.

Phần Demo này được trình bày khá rõ ràng và chi tiết trong ví dụ. Bạn nên chạy ví dụ trước để thấy cách hoạt động của nó. Demo bao gồm việc gọi một public api từ https://api.ice5.skyx.app/get_languages (GET) và hiển thị kết quả như sau:

• File Thiết kế RestFull tổng quan: app/libs/RESTClient.js

import { getBaseURL } from "../configs/config";

let networkError = {
  error_code: -1,
  message: "Network error",
  data: {},
};

export class RESTFulAPI {
  //Định nghĩa một api lấy language từ server.
  // Public api có sẵn tại https://api.ice5.skyx.app/get_languages

  getLanguage() {
    let api = getBaseURL() + "get_languages";
    return this.fetchData(api);
  }

  //Định nghĩa một hàm bất đồng bộ hỗ trợ các phương thức, GET, POST, PUT, DELETE (mặc định là GET)
  async fetchData(api, method = "GET", body) {
    let headers = {
      Accept: "application/json",
      "Content-Type": "application/json",
    };
    try {
      let response = await fetch(api, {
        method: method,
        headers: headers,
        body: JSON.stringify(body),
      });
      let responseJson = await response.json();
      return responseJson;
    } catch (error) {
      return networkError;
    }
  }
}

export default RESTClient = new RESTFulAPI();

Ở đây mình định nghĩa 1 lớp để quản lý việc trao đổi, giao tiếp giữa client và server. Hàm fetchData() là một hàm bất đồng bộ hỗ trợ gọi các phương thức RESTful.

Và đây là cách chúng ta gọi hàm fetchData() và định nghĩa rõ ràng 1 api truy cập để lấy danh sách ngôn ngữ.

getLanguage() {
    let api = getBaseURL() + "get_languages";
    return this.fetchData(api);
}

Ví dụ gọi fetchData() với phương thức POST

let api = getBaseURL() + "get_languages";
let body = {...}
return this.fetchData(api, 'POST', body);
//Đây là cách POST 1 đối tượng body lên hệ thống.
// Phương thức POST trên server này không hỗ trợ nên ắt hẳn không hoạt động rồi. Mình chỉ muốn demo cho các bạn biết cách gọi phương thức khác ntn thôi. =))

• Cách sử dụng RESTClient

import RESTClient from '../../../libs/RESTClient';

...

getLanguagesFromServer() {
    //todo có thể làm cái xoay xoay ở đây
    //Gọi hàm lấy language từ lớp RestClient để lấy dữ liệu
    RESTClient.getLanguage().then(
        (result) => {
            //Đây là quá trình bất đồng bộ, và trả về result sau khi kết thúc
            if (result.error_code == 0) {
                //Kiểm tra trạng thái lỗi và set lại dữ liệu để render data
                this.setState({
                    listData: result.data
                })
            }
            //todo Gọi xong thì tắt cái xoay xoay đi
        }
    )
}