如何在Flutter中调用Get与Post API？

如今多数应用都会通过API获取远程数据，**应用程序编程接口（API）**是定义多个软件应用或软硬件混合中介间交互规则的接口。

下面是包含Get和Post方法的完整实现代码：

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart';

class CallApi extends StatefulWidget {
  const CallApi({Key? key}) : super(key: key);

  @override
  State<CallApi> createState() => _CallApiState();
}

class _CallApiState extends State<CallApi> {

  List<dynamic> data = [];

  final uri = "https://jsonplaceholder.typicode.com/posts";

  void postData() async {
    final response = await post(Uri.parse(uri), body:{
      "title": "Anything",
      "body": "Post body",
      "userId": "1",
    });
    print(response.body);
  }

  @override
  void initState() {
    super.initState();
    fetchApiData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(onPressed: postData, child: const Text('发送数据'),),
      )
    );
  }

  void fetchApiData() async {
    final response = await get(Uri.parse(uri));
    final jsonData = jsonDecode(response.body) as List;
    setState(() {
      data = jsonData;
    });
  }
}

Post方法单独实现示例 #

如果只需要单独的Post请求逻辑，可以参考以下代码：

List<dynamic> data = [];
final uri = "https://jsonplaceholder.typicode.com/posts";

void postData() async {
  final response = await post(Uri.parse(uri), body:{
    "title": "Anything",
    "body": "Post body",
    "userId": "1",
  });
  print(response.body);
}

代码说明

• Get请求：通过fetchApiData方法实现，在组件初始化时自动调用，获取接口返回的JSON数据后解析并更新组件状态。
• Post请求：通过postData方法实现，点击页面上的"发送数据"按钮时触发，向接口提交表单参数，并在控制台打印返回结果。

内容的提问来源于stack exchange，提问作者Kunj Bhuva