Flutter异步编程 http网络请求数据

import ‘dart:convert‘;

import ‘package:flutter/material.dart‘;
import ‘package:http/http.dart‘ as http;
import ‘dart:async‘;

class HttpDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(‘HttpDemo‘),
        elevation: 0.0,
      ),
      body: HttpDemoHome(),
    );
  }
}

class HttpDemoHome extends StatefulWidget {
  @override
  _HttpDemoHomeState createState() => _HttpDemoHomeState();
}

class _HttpDemoHomeState extends State<HttpDemoHome> {
  @override
  void initState() {
    super.initState();
    // fetchPosts()
    //   .then((value) => print(value));

    // final post = {
    //   ‘title‘: ‘hello‘,
    //   ‘description‘: ‘nice to meet you.‘,
    // };

    // print(post[‘title‘]);
    // print(post[‘description‘]);

    // final postJson = json.encode(post);
    // print(postJson);

    // final postJsonConverted = json.decode(postJson);
    // print(postJsonConverted[‘title‘]);
    // print(postJsonConverted[‘description‘]);
    // print(postJsonConverted is Map);

    // final postModel = Post.fromJson(postJsonConverted);
    // print(‘title: ${postModel.title}, description: ${postModel.description}‘);

    // print(‘${json.encode(postModel)}‘);
  }

  Future<List<Post>> fetchPosts() async {
    final response = 
        await http.get(‘https://resources.ninghao.net/demo/posts.json‘);
    
    // print(‘statusCode: ${response.statusCode}‘);
    // print(‘body: ${response.body}‘);

    if (response.statusCode == 200) {
      final responseBody = json.decode(response.body);
      List<Post> posts = responseBody[‘posts‘]
        .map<Post>((item) => Post.fromJson(item))
        .toList();

      return posts;
    } else {
      throw Exception(‘Failed to fetch posts.‘);
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: fetchPosts(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        print(‘data: ${snapshot.data}‘);
        print(‘connectionState: ${snapshot.connectionState}‘);
        
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(
            child: Text(‘loading...‘),
          );
        }

        return ListView(
          children: snapshot.data.map<Widget>((item) {
            return ListTile(
              title: Text(item.title),
              subtitle: Text(item.author),
              leading: CircleAvatar(
                backgroundImage: NetworkImage(item.imageUrl),
              ),
            );
          }).toList(),
        );
      },
    );
  }
}

class Post {
  final int id;
  final String title;
  final String description;
  final String author;
  final String imageUrl;

  Post(
    this.id,
    this.title,
    this.description,
    this.author,
    this.imageUrl,
  );

  Post.fromJson(Map json)
    : id = json[‘id‘],
      title = json[‘title‘],
      description = json[‘description‘],
      author = json[‘author‘],
      imageUrl = json[‘imageUrl‘];

  Map toJson() => {
    ‘title‘: title,
    ‘descritpion‘: description,
  };
}

 http: ^0.12.0