flutter封装Dio使用

封装 DioHttpUtil 类

// ignore_for_file: constant_identifier_names

import 'package:dio/dio.dart';
import 'package:flutter/foundation.dart';
import 'package:pretty_dio_logger/pretty_dio_logger.dart';

const String APPLICATION_JSON = "application/json";
const String CONTENT_TYPE = "content-type";
const String ACCEPT = "accept";
const String AUTHORIZATION = "authorization";
const String DEFAULT_LANGUAGE = "en";
const String TOKEN = "Bearer token";
const String BASE_URL = "https://wpapi.ducafecat.tech";

class DioHttpUtil {
  static final DioHttpUtil _instance = DioHttpUtil._internal();

  factory DioHttpUtil() => _instance;

  late Dio _dio;

  // 单例模式
  DioHttpUtil._internal() {
    Map<String, String> headers = {
      CONTENT_TYPE: APPLICATION_JSON,
      ACCEPT: APPLICATION_JSON,
      AUTHORIZATION: TOKEN,
      DEFAULT_LANGUAGE: DEFAULT_LANGUAGE
    };

    // 初始值
    var options = BaseOptions(
      baseUrl: BASE_URL,
      headers: headers,
      connectTimeout: const Duration(seconds: 5), // 5秒
      receiveTimeout: const Duration(seconds: 3), // 3秒
      responseType: ResponseType.json,
    );

    // 初始_dio
    _dio = Dio(options);

    // 拦截器 - 日志打印
    if (!kReleaseMode) {
      _dio.interceptors.add(PrettyDioLogger(
        requestHeader: true,
        requestBody: true,
        responseHeader: true,
      ));
    }

    // 拦截器
    _dio.interceptors.add(RequestInterceptorHandler());
  }

  /// GET 请求方法
  Future<Response> get(String url,
      {Map<String, dynamic>? params,
      Options? options,
      CancelToken? cancelToken}) async {
    Options requestOptions = options ?? Options();
    Response response = await _dio.get(url,
        queryParameters: params,
        options: requestOptions,
        cancelToken: cancelToken);

    return response;
  }

  /// post 请求方法
  Future<Response> post(String url, dynamic data, Options? options,
      CancelToken? cancelToken) async {
    Options requestOptions = options ?? Options();
    Response response = await _dio.post(url,
        data: data ?? {}, options: requestOptions, cancelToken: cancelToken);
    return response;
  }

  /// put 请求方法
  Future<Response> put(String url, dynamic data, Options? options,
      CancelToken? cancelToken) async {
    Options reqeustOptions = options ?? Options();
    Response response = await _dio.put(url,
        data: data ?? {}, options: reqeustOptions, cancelToken: cancelToken);
    return response;
  }

  /// delete 请求方法
  Future<Response> delete(String url, Options? options, dynamic data,
      CancelToken? cancelToken) async {
    Options reqeustOptions = options ?? Options();
    Response response = await _dio.delete(
      url,
      data: data ?? {},
      options: reqeustOptions,
      cancelToken: cancelToken,
    );
    return response;
  }
}

// dio 拦截器
class RequestInterceptorHandler extends Interceptor {
  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    return handler.next(response);
  }

  void next(RequestOptions options) {}
}

生成 models

{
    "id": 0,
    "name": "",
    "description": ""
}

运行 flutter packages pub run json_model, 生成对应的models

编写api类

import 'package:test_drive/models/product.dart';
import 'package:test_drive/utils/http.dart';

class ListApi {
  // 请求列表数据
  static Future<List<Product>> list({int? page, int? prePage}) async {
    var res = await DioHttpUtil().get("/products", params: {
      'page': page ?? 0,
      'pre_page': prePage ?? 20,
    });

    List<Product> items = [];
    for (var item in res.data) {
      // 转义成josn格式，并且存入List
      items.add(Product.fromJson(item));
    }

    return items;
  }
}

使用

// 定义接收数据list
 List<Product> _products = [];

 @override
 void initState() {
   // 发起数据请求
   featchData();
   super.initState();
 }

 // 获取列表
 void featchData() async {
   try {
     final resposne = await ListApi.list();
     setState(() {
       if (mounted) {
         _products = resposne;
       }
     });
   } catch (err) {
     print(err.toString());
   }
 }

 // 渲染列表
 ListView.builder(
   itemCount: _products.length,
   itemBuilder: (context, index) {
       return ListTile(
       title: Text(_products[index].name ?? ""),
       subtitle: Text(_products[index].description ?? ""),
           );
       },
   ),

效果预览