Flutter3.0仿微博瀑布流——网络请求封装篇

2023-12-01 20:05:12

网络请求是App开发中常见且重要的环节，在Flutter3.0中，http包被弃用，取而代之的是dio包。本文将以仿微博瀑布流为例，详细介绍如何使用dio包进行网络请求的封装，并提供完整实现代码，帮助开发者轻松上手dio网络请求。

1. 引入Dio依赖

dependencies:
  dio: ^4.0.6

2. 创建 Dio 实例

import 'package:dio/dio.dart';

class HttpManager {
  static Dio dio = Dio();

  // 可根据实际情况，修改 baseUrl，超时时间等
  static init() {
    dio.options.baseUrl = 'https://api.weibo.com/2/';
    dio.options.connectTimeout = 10000;
    dio.options.receiveTimeout = 10000;
  }
}

3. 网络请求封装

// GET 请求
static Future<T> get<T>(
  String url, {
  Map<String, dynamic>? params,
}) async {
  Response response = await dio.get(
    url,
    queryParameters: params,
  );
  return response.data as T;
}

// POST 请求
static Future<T> post<T>(
  String url, {
  Map<String, dynamic>? params,
}) async {
  Response response = await dio.post(
    url,
    data: params,
  );
  return response.data as T;
}

4. 实际使用

// 调用 get 方法
HttpManager.get<UserInfo>('user/info', params: {
  'id': '123',
}).then((data) {
  // 处理响应数据
});

// 调用 post 方法
HttpManager.post<LoginResult>('user/login', params: {
  'username': 'admin',
  'password': '123456',
}).then((data) {
  // 处理响应数据
});

5. 完整示例代码

import 'package:dio/dio.dart';

class HttpManager {
  static Dio dio = Dio();

  static init() {
    dio.options.baseUrl = 'https://api.weibo.com/2/';
    dio.options.connectTimeout = 10000;
    dio.options.receiveTimeout = 10000;
  }

  // GET 请求
  static Future<T> get<T>(
    String url, {
    Map<String, dynamic>? params,
  }) async {
    Response response = await dio.get(
      url,
      queryParameters: params,
    );
    return response.data as T;
  }

  // POST 请求
  static Future<T> post<T>(
    String url, {
    Map<String, dynamic>? params,
  }) async {
    Response response = await dio.post(
      url,
      data: params,
    );
    return response.data as T;
  }
}

void main() async {
  HttpManager.init();

  // 调用 get 方法
  HttpManager.get<UserInfo>('user/info', params: {
    'id': '123',
  }).then((data) {
    // 处理响应数据
  });

  // 调用 post 方法
  HttpManager.post<LoginResult>('user/login', params: {
    'username': 'admin',
    'password': '123456',
  }).then((data) {
    // 处理响应数据
  });
}