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

Posted 2020-11-10 码上加油站

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