Flutter

Flutter, Bài 10: Gửi và nhận HttpRequest

Đại đa số các ứng dụng hiện đại đều ít nhiều cần gửi các HttpRequest để lấy dữ liệu từ internet về hiển thị trên giao diện ứng dụng. Và việc gửi Request trên Flutter thậm chí đơn giản hơn trên Android và iOS Sdk nhưng không hề thua kém, hay còn có thể nhanh hơn nếu xét về performance.

Flutter

1. Gửi và nhận HttpRequest:

Trước hết, bạn cần phải add thư viện ngoài tương tự như dùng Maven trong Android hay Pod với iOS. Trong tập tin pubspec.yaml, bạn cấu hình nó tương tự như sau:

Bạn lưu ý phiên bản của thư viện nên đồng với phiên bản Dart mà Flutter Sdk đang được phát triển dựa trên. Chẳng hạn, gói http trong Flutter Sdk trên máy tính của bạn đang dựa trên phiên bản 0.11.3+16 thì bạn nên dùng phiên bản +16 thay cho +17 để hạn chế xung đột.

Sau khi add thư viện xong, bạn cần import nó vào Dart file trước khi sử dụng. Ví dụ:

Tương tự như JavaScript fetch, Dart http.get là một async function. Nếu JS fetch nếu không có await sẽ return một đối tượng Promise, còn Dart http.get sẽ return một Future<T>. Về bản chất, chúng tượng tự nhau ở chỗ đều có .then((result) => …) do đó nếu bạn đã quen với JavaScript thì chỉ mất 1 phút 30 giây để sử dụng thành thục Dart http. Chẳng hạn:

Còn nếu bạn dùng http.get kèm với await thì bản thân nó sẽ trực tiếp return một Response thay vì một Response trong .then. Tuy nhiên, nếu dùng với await bạn sẽ cần tách nó trong một Thread khác với threading package để tránh đơ UI Thread. Về Thread, tôi sẽ giới thiệu trong bài khác khi có dịp. Tốt nhất, bạn nên dùng theo hướng async.

2. Các methods khác của http:

Ngoài get, http package cung cấp các methods khác tương ứng với các HTTP Methods, chẳng hạn get <=> GET, post <=> POST, delete <=> DELETE, hay put <=> PUT, và patch <=> PATCH, tương tự như express của NodeJS. Điểm chung của chúng là chúng đều nhận param đầu tiên là String hoặc Uri trỏ tới endpoint url, param thứ hai là một Map<String, String> headers. Đối với các methods gửi dữ liệu lên server như post hay put, chúng sẽ chứa thêm param thứ ba là dynamic body chứa body của Request và param thứ tư chỉ cách mã hoá, tức Encoding. Ví dụ:

Về chi tiết nội dung của package này bao gồm các class con như Request, Response, hay các class liên quan và các methods, bạn tham khảo tại https://pub.dartlang.org/documentation/http/latest/http/http-library.html.

3. Json:

Bạn thấy tôi có sử dụng method json.decode trong package dart:convert để parse json. Mặc định, nó return một Map<String, dynamic> hoặc một Future<Map<String, dynamic>>. Trong trường hợp Response của bạn là một Json Array, bạn cũng có thể dùng json.decode để parse dữ liệu. Bạn vui lòng tham khảo bài viết này để hiểu rõ hơn.

Để convert một json String sang một jsonObject, bạn dùng json.encode(String json).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.