Flutter cung cấp cho ta package http để sử dụng các phương thức HTTP. Http là một thư viện dựa trên Future và sử dụng các chức năng await và async. Nó cung cấp nhiều phương thức cấp cao và đơn giản hóa việc phát triển của ứng dụng di động dựa trên REST.
Các bài viết liên quan:
Khái niệm cơ bản
Package http cung cấp một lớp cấp độ cao và http cho các yêu cầu web.
Lớp http cung cấp các chức năng thực hiện tất cả loại của yêu cầu HTTP.
Hàm http nhận url và một vài thông tin bổ sung thông qua Map trong Dart (post dữ liệu, header bổ sung, v.v…). Nó gửi yêu cầu đến server và thu thập các dữ liệu trả về thông qua async/await. Ví dụ như code dưới đây sẽ đọc dữ liệu từ một url cụ thể và in nó vào console:
Những hàm chính sẽ liệt kê dưới đây:
- read – gửi một request đến url cụ thể thông qua hàm GET và trả về response là Future<String>.
- get – gửi một request cụ thể thông qua hàm GET và trả về response là Future<Response> Response là một lớp giữ các thông tin về phản hồi.
- post – gửi một request cụ thể thông qua hàm POST bằng cách gửi các dữ liệu được cung cấp và trả về một response là Future<Response>.
- put – gửi một request cụ thể thông qua hàm PUT và trả về một response là Future<Response>
- head – gửi một request cụ thể thông qua hàm HEAD và trả về một response là Future<Response>
- delete – gửi một request cụ thể thông qua hàm DELETE và trả về một response là Future<Response>
Ngoài ra package http còn cung cấp một lớp tiêu chuẩn về HTTP phía client. Lớp client hỗ trợ kết nối rất bền vững, nó sẽ rất có ích khi có quá nhiều request đến một máy chủ nào đó. Ngoài ra thì nó rất giống với lớp http, code mẫu như sau:
Truy cập dịch vụ API sản phẩm
Giờ ta cùng nhau tạo một ứng dụng đơn giản để lấy dữ liệu sản phẩm từ một web server và hiển thị sản phẩm đó trên ListView.
Tạo ứng dụng flutter với tên là rest_api_flutter
Copy và paste thư mục từ project cũ vào assets trong project mới và chỉnh file pubspec.yaml như sau
Copy và paste tất cả code từ main.dart của project bài trước vào main.dart project mới này.
Thêm package http vào trong pubspec.yaml như sau:
Sau khi Ctrl + S Flutter sẽ tự động kiểm tra và cài package cho chúng ta
Thêm các package http vào trong file main.dart
Giờ ta cần tạo một server ảo để hiểu được cách vận hành của http trong flutter, Ở đây tác giả sử dụng WAMP để tạo server localhost, ta vào directory www của wamp và tạo thư mục tên là JSONWebServer (chuột trái vào icon wamp ở góc phải màn hình, sau đó chọn www directory), trong thư mục đó ta tạo 1 file products.json như sau:
Sau đó ta vào http://localhost/JSONWebServer/products.json để kiểm tra thử server có hoạt động không, nếu có hoạt động thì nó sẽ hiển thị như sau:
Tạo file Product.dart trong thư mục lib và chuyển class Product vào trong đó
Viết hàm dựng cho class Projduct là Product.fromMap để chuyển đổi dữ liệu dạng Map sang đối tượng Product.
Full code của Product.dart
Tạo 2 hàm mới là parseProducts và fetchProducts trong main.dart để lấy và load thông tin sản phẩm từ web server vào trong đối tượng List<Product> (tùy vào từng máy mà có ip khác nhau, bạn có thể dùng cmd, nhập ipconfig và để ý phần Ethernet để biết được ip của server, của tác giả là 192.168.1.21)
Future được sử dụng để lazy load thông tin về sản phẩm. Khái niệm về lazy load là dùng để trì hoãn việc thực thi code cho đến khi cần thiết.
http.get được sử dụng để lấy dữ liệu từ internet.
json.decode được sử dụng để giải mã dữ liệu JSON vào đối tượng Map. Một khi dữ liệu JSON đã được giải mã thì nó sẽ được chuyển đổi sang List<Product> bằng cách sử dụng hàm fromMap của lớp Product.
Trong class MyApp, tạo biến mới là Future<Product> xong truyền vào cho hàm dựng
Trong lớp MyHomePage, thêm một biến mới là Future<Product> và truyền nó vào hàm dựng, ngoài ra xóa biến items và các hàm liên quan. Thay thế biến products trong hàm dựng. Nó sẽ cho phép lấy các product từ internet chỉ 1 lần khi ứng dụng chạy.
Thay đổi home option (MyHomePage) trong hàm dựng của widget MyApp để liên kết với các thay đổi ở trên
Thay đổi hàm main và truyền vào tham số Future<Product>
Tạo một widget mới là ProductBoxList để xây dựng 1 danh sách product trong home page.
Lưu ý là ta đã sử dụng các khái niệm tương tự như trong ứng dụng trước là liệt kê các sản phẩm ra trên dang danh sách
Xem thêm Lập trình Flutter
cuối cùng ta chỉnh sửa hàm dựng của widget MyHomePage để lấy thông tin product bằng cách sử dụng Future thay vì gọi hàm thông thường
Lưu ý rằng widget FutureBuilder được dùng để render widget, FutureBuilder sẽ cố gắng lấy dữ liệu từ thuộc tính future của nó. Nếu thuộc tính future trả về dữ liệu, nó sẽ render widget sử dụng ProductBoxList, ngoài ra thì nó sẽ báo lỗi
Ta chạy ứng dụng và kết quả như sau:
Các bài viết khác:
