Flutter 封装网络请求库 Dio

这是一篇入门级教程，更适用于小型项目。

一. 为啥不用原生请求？

因为不好用。

二. 为啥有了Dio还要继续封装？

方便做一些统一的处理，比如响应拦截。

三. 和网上别人封装的有啥区别？

要么太简陋，封装了跟没封装一样；要么太复杂，不是我想要的刚好“够用”。所以自己写了一份...

四. 开始封装

三方插件

引入 Dio 插件

dio: ^3.0.10

引入 loading 插件 （非必须）

flutter_easyloading: ^2.2.2

引入常用工具类 （非必须）

common_utils:  ^1.2.1

创建目录

创建 request 文件

代码中 LogUtil 来自于 common_utils 插件，EasyLoading 来自于 flutter_easyloading 插件，可以根据自己的习惯替换。
阅读下方代码时，可以先过滤掉 LogUtil 和 EasyLoading ，方便阅读。

完整代码如下，都有相应的注释，就不做过多解释。

import 'dart:convert';
import 'package:common_utils/common_utils.dart';
import 'package:dio/dio.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

class Request {
  // 配置 Dio 实例
  static BaseOptions _options = BaseOptions(
    baseUrl: 'https://www.xx.com/api',
    connectTimeout: 5000,
    receiveTimeout: 3000,
  );

  // 创建 Dio 实例
  static Dio _dio = Dio(_options);

  // _request 是核心函数，所有的请求都会走这里
  static Future<T> _request<T>(String path, {String method, Map params, data}) async {
    // restful 请求处理
    if (params != null) {
      params.forEach((key, value) {
        if (path.indexOf(key) != -1) {
          path = path.replaceAll(":$key", value.toString());
        }
      });
    }
    LogUtil.v(data, tag: '发送的数据为：');
    try {
      Response response = await _dio.request(path,
          data: data, options: Options(method: method));
      if (response.statusCode == 200 || response.statusCode == 201) {
        try {
          if (response.data['status'] != 200) {
            LogUtil.v(response.data['status'], tag: '服务器错误，状态码为：');
            EasyLoading.showInfo('服务器错误，状态码为：${response.data['status']}');
            return Future.error(response.data['msg']);
          } else {
            LogUtil.v(response.data, tag: '响应的数据为：');
            if (response.data is Map) {
              return response.data;
            } else {
              return json.decode(response.data.toString());
            }
          }
        } catch (e) {
          LogUtil.v(e, tag: '解析响应数据异常');
          return Future.error('解析响应数据异常');
        }
      } else {
        LogUtil.v(response.statusCode, tag: 'HTTP错误，状态码为：');
        EasyLoading.showInfo('HTTP错误，状态码为：${response.statusCode}');
        _handleHttpError(response.statusCode);
        return Future.error('HTTP错误');
      }
    } on DioError catch (e, s) {
      LogUtil.v(_dioError(e), tag: '请求异常');
      EasyLoading.showInfo(_dioError(e));
      return Future.error(_dioError(e));
    } catch (e, s) {
      LogUtil.v(e, tag: '未知异常');
      return Future.error('未知异常');
    }
  }

  // 处理 Dio 异常
  static String _dioError(DioError error) {
    switch (error.type) {
      case DioErrorType.CONNECT_TIMEOUT:
        return "网络连接超时，请检查网络设置";
        break;
      case DioErrorType.RECEIVE_TIMEOUT:
        return "服务器异常，请稍后重试！";
        break;
      case DioErrorType.SEND_TIMEOUT:
        return "网络连接超时，请检查网络设置";
        break;
      case DioErrorType.RESPONSE:
        return "服务器异常，请稍后重试！";
        break;
      case DioErrorType.CANCEL:
        return "请求已被取消，请重新请求";
        break;
      case DioErrorType.DEFAULT:
        return "网络异常，请稍后重试！";
        break;
      default:
        return "Dio异常";
    }
  }

  // 处理 Http 错误码
  static void _handleHttpError(int errorCode) {
    String message;
    switch (errorCode) {
      case 400:
        message = '请求语法错误';
        break;
      case 401:
        message = '未授权，请登录';
        break;
      case 403:
        message = '拒绝访问';
        break;
      case 404:
        message = '请求出错';
        break;
      case 408:
        message = '请求超时';
        break;
      case 500:
        message = '服务器异常';
        break;
      case 501:
        message = '服务未实现';
        break;
      case 502:
        message = '网关错误';
        break;
      case 503:
        message = '服务不可用';
        break;
      case 504:
        message = '网关超时';
        break;
      case 505:
        message = 'HTTP版本不受支持';
        break;
      default:
        message = '请求失败，错误码：$errorCode';
    }
    EasyLoading.showError(message);
  }

  static Future<T> get<T>(String path, {Map params}) {
    return _request(path, method: 'get', params: params);
  }

  static Future<T> post<T>(String path, {Map params, data}) {
    return _request(path, method: 'post', params: params, data: data);
  }

  // 这里只写了 get 和 post，其他的别名大家自己手动加上去就行
}

创建 api 文件

import 'package:app/http/request.dart';

class Api {
  static login(data) {
    return Request.post(
      "/login",
      data: data,
    );
  }
}

五. 开始使用

await Api.login(data);

六. 最后

文章代码有些许滞后，最新的代码，直接看仓库 github.com/un-pany/flu…

End.