Pembangunan Aplikasi Mudah Alih Flutter · Pelajaran

Permintaan HTTP dan JSON

Pelajari cara membuat permintaan HTTP GET, POST, PUT dan DELETE kepada API REST serta menghuraikan respons JSON menjadi objek Dart.

Pelajaran 2 daripada 412 langkah

Permintaan HTTP dan JSON ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Sambung ke Web!

Aplikasi mudah alih moden sentiasa berinteraksi dengan internet untuk mendapatkan dan menghantar data. Hal ini biasanya dilakukan menggunakan permintaan HTTP untuk berkomunikasi dengan perkhidmatan web, yang juga dikenali sebagai API (Antara Muka Pengaturcaraan Aplikasi).

API menyediakan cara untuk sistem perisian yang berbeza berkomunikasi antara satu sama lain. Sebagai contoh, aplikasi cuaca menggunakan API untuk mendapatkan ramalan terkini.

Dapatkan Pakej `http`

Dalam Flutter dan Dart, cara paling mudah untuk membuat permintaan HTTP adalah dengan menggunakan pakej rasmi http. Mula-mula, anda perlu menambahkannya ke dalam fail pubspec.yaml projek anda:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0 # Add this line

Membuat Permintaan GET

Selepas menambah pakej tersebut, import pakej itu ke dalam fail Dart anda. Permintaan yang paling biasa ialah GET, yang digunakan untuk mendapatkan data daripada pelayan. Mari kita dapatkan beberapa data kiriman contoh daripada API awam:

import 'package:http/http.dart' as http;
import 'dart:convert'; // Needed for JSON

void main() async {
  var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');
  var response = await http.get(url);

  if (response.statusCode == 200) {
    print('Response body: ${response.body}');
  } else {
    print('Request failed with status: ${response.statusCode}.');
  }
}

Apakah JSON?

Kebanyakan API web mengembalikan data dalam format JSON (JavaScript Object Notation). Format ini merupakan cara yang ringan dan mudah dibaca manusia untuk menyusun data.

Data JSON kelihatan seperti pasangan kunci-nilai, serupa dengan peta Dart. Berikut ialah data yang mungkin dikembalikan oleh permintaan GET kita sebelum ini:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere...",
  "body": "quia et suscipit..."
}

Menghurai JSON kepada Dart

Untuk menggunakan data JSON dalam Dart, kita perlu menyahkodnya. Pustaka dart:convert Dart menyediakan fungsi jsonDecode(), yang menukar rentetan JSON kepada Map Dart.

Mari kita kemas kini contoh GET kita untuk menghurai respons tersebut:

import 'package:http/http.dart' as http;
import 'dart:convert';

void main() async {
  var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');
  var response = await http.get(url);

  if (response.statusCode == 200) {
    var jsonBody = jsonDecode(response.body);
    print('User ID: ${jsonBody['userId']}');
    print('Title: ${jsonBody['title']}');
  } else {
    print('Request failed with status: ${response.statusCode}.');
  }
}

Data Berstruktur dengan Model

Walaupun menggunakan Map sesuai untuk kes mudah, mencipta kelas model Dart khusus untuk data JSON anda memberikan keselamatan jenis dan kebolehbacaan kod yang lebih baik.

Pola yang biasa digunakan ialah mempunyai pembina factory yang menerima peta JSON dan mencipta tika model anda.

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({required this.userId, required this.id, required this.title, required this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      body: json['body'] as String,
    );
  }
}

Mendapatkan Data ke dalam Model

Sekarang, mari kita gabungkan permintaan GET, penyahkodan JSON dan model Post untuk mendapatkan satu kiriman dan menukarkannya kepada objek Dart bertip kuat. Ini menjadikan capaian kepada data lebih selamat dan jelas!

import 'package:http/http.dart' as http;
import 'dart:convert';

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({required this.userId, required this.id, required this.title, required this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      body: json['body'] as String,
    );
  }
}

void main() async {
  var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');
  var response = await http.get(url);

  if (response.statusCode == 200) {
    var jsonBody = jsonDecode(response.body);
    Post post = Post.fromJson(jsonBody);
    print('Fetched Post ID: ${post.id}');
    print('Post Title: ${post.title}');
  } else {
    print('Failed to load post: ${response.statusCode}.');
  }
}

Menghantar Data dengan POST

Untuk menghantar data baharu kepada pelayan, anda biasanya menggunakan permintaan POST. Ini melibatkan penyediaan isi permintaan, biasanya dalam format JSON. Jangan lupa untuk menetapkan pengepala 'Content-Type'!

import 'package:http/http.dart' as http;
import 'dart:convert';

void main() async {
  var url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  var response = await http.post(
    url,
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': 'foo',
      'body': 'bar',
      'userId': '1',
    }),
  );

  if (response.statusCode == 201) { // 201 Created
    print('Created Post: ${response.body}');
  } else {
    print('Failed to create post: ${response.statusCode}.');
  }
}

Mengemas Kini dan Memadam Data

Selain GET dan POST, anda juga akan menemui permintaan PUT dan DELETE:

PUT: Digunakan untuk mengemas kini sumber sedia ada pada pelayan. Seperti POST, permintaan ini biasanya menyertakan isi permintaan.
DELETE: Digunakan untuk membuang sumber daripada pelayan. Permintaan ini biasanya tidak memerlukan isi permintaan.

Pakej http menyediakan fungsi http.put() dan http.delete(), yang digunakan dengan cara yang serupa masing-masing dengan http.post() dan http.get().

Pengendalian Permintaan yang Kukuh

Permintaan rangkaian boleh gagal atas banyak sebab (tiada internet, pelayan tidak berfungsi, data tidak sah). Sentiasa bersedia untuk senario ini:

Gunakan try-catch untuk pengecualian berkaitan rangkaian (contohnya, SocketException).
Periksa response.statusCode untuk memahami balasan pelayan (contohnya, 200 OK, 404 Not Found, 500 Server Error).

Ini memastikan aplikasi anda kekal stabil walaupun berlaku masalah.

Pemeriksaan Permintaan HTTP

Kaedah HTTP yang manakah biasanya digunakan untuk menghantar data baharu kepada pelayan dan mendapatkan data sedia ada daripada pelayan, masing-masing?

Jawab dalam pelajaran interaktif

Ulang Kaji: HTTP dan JSON

Syabas! Anda telah mempelajari asas membuat permintaan HTTP dan mengendalikan data JSON:

Pakej http penting untuk panggilan rangkaian.
GET mendapatkan data, POST menghantar data baharu, PUT mengemas kini data dan DELETE membuang data.
JSON ialah format standard untuk data API.
Gunakan dart:convert untuk jsonDecode respons dan jsonEncode isi permintaan.
Kelas model Dart meningkatkan keselamatan jenis dan penyusunan kod.

Seterusnya, anda akan mendalami pengendalian ralat dengan kukuh dalam operasi tak segerak!

Percuma untuk bermula

Pelajari Dart dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Permintaan HTTP dan JSON” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Permintaan HTTP dan JSON”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Permintaan HTTP dan JSON”?

Pelajari cara membuat permintaan HTTP GET, POST, PUT dan DELETE kepada API REST serta menghuraikan respons JSON menjadi objek Dart. Anda berlatih Pembangunan Aplikasi Mudah Alih Flutter menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Mudah Alih Flutter?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Mudah Alih Flutter di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Permintaan HTTP dan JSON” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Mudah Alih Flutter ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Mudah Alih Flutter menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Future dan Async/Await
Permintaan HTTP dan JSON
Pengendalian Ralat dalam Operasi Tak Segerak
Strim dan Data Reaktif

← Kembali ke Pembangunan Aplikasi Mudah Alih Flutter