Flutter 网络请求框架封装

版权声明：本文为博主原创文章，转载请注明出处！

网络请求是每个项目中都非常重要的一个环节，在Flutter中也有多种方式，这边我使用到的是dio库，这是一个API非常完整的库，具体的介绍和使用我这里就不做过多的介绍，大家去从这个链接去看看(dio)就行。 为了更加方便我们的使用，我对其再做一层封装，里面会包含各种表单提交方式，json提交方式等，另外还包含一个统一的登录异常的监听，和一个统一的数据处理和统一的异常处理等。下面还是老样子，我们具体代码中见：

class NetUtil {
  static final debug = false;
  static BuildContext context = null;
  /// 服务器路径
  static final host = 'http://xxxxxxxx';
  static final baseUrl = host + '/api/';

///  基础信息配置
  static final Dio _dio = new Dio(new Options(
      method: "get",
      baseUrl: baseUrl,
      connectTimeout: 5000,
      receiveTimeout: 5000,
      followRedirects: true));

 /// 代理设置，方便抓包来进行接口调节

//  static void setProxy() {
//    (_dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) {
//      // config the http client
//      client.findProxy = (uri) {
//        //proxy all request to localhost:8888
//        return "PROXY localhost:8888";
//      };
//      // you can also create a new HttpClient to dio
//      // return new HttpClient();
//    };
//  }


  static String token;

  static final LogicError unknowError = LogicError(-1, "未知异常");

  static Future<Map<String, dynamic>> getJson<T>(
          String uri, Map<String, dynamic> paras) =>
      _httpJson("get", uri, data: paras).then(logicalErrorTransform);

  static Future<Map<String, dynamic>> getForm<T>(
          String uri, Map<String, dynamic> paras) =>
      _httpJson("get", uri, data: paras, dataIsJson: false)
          .then(logicalErrorTransform);

  /// 表单方式的post
  static Future<Map<String, dynamic>> postForm<T>(
          String uri, Map<String, dynamic> paras) =>
      _httpJson("post", uri, data: paras, dataIsJson: false)
          .then(logicalErrorTransform);

  /// requestBody (json格式参数) 方式的 post
  static Future<Map<String, dynamic>> postJson(
          String uri, Map<String, dynamic> body) =>
      _httpJson("post", uri, data: body).then(logicalErrorTransform);

  static Future<Map<String, dynamic>> deleteJson<T>(
          String uri, Map<String, dynamic> body) =>
      _httpJson("delete", uri, data: body).then(logicalErrorTransform);

  /// requestBody (json格式参数) 方式的 put
  static Future<Map<String, dynamic>> putJson<T>(
          String uri, Map<String, dynamic> body) =>
      _httpJson("put", uri, data: body).then(logicalErrorTransform);

  /// 表单方式的 put
  static Future<Map<String, dynamic>> putForm<T>(
          String uri, Map<String, dynamic> body) =>
      _httpJson("put", uri, data: body, dataIsJson: false)
          .then(logicalErrorTransform);

  /// 文件上传  返回json数据为字符串
  static Future<T> putFile<T>(String uri, String filePath) {
    var name =
        filePath.substring(filePath.lastIndexOf("/") + 1, filePath.length);
    var suffix = name.substring(name.lastIndexOf(".") + 1, name.length);
    FormData formData = new FormData.from({
      "multipartFile": new UploadFileInfo(new File(filePath), name,
          contentType: ContentType.parse("image/$suffix"))
    });

    var enToken = token == null ? "" : Uri.encodeFull(token);
    return _dio
        .put<Map<String, dynamic>>("$uri?token=$enToken", data: formData)
        .then(logicalErrorTransform);
  }

  static Future<Response<Map<String, dynamic>>> _httpJson(
      String method, String uri,
      {Map<String, dynamic> data, bool dataIsJson = true}) {
    var enToken = token == null ? "" : Uri.encodeFull(token);

    /// 如果为 get方法，则进行参数拼接
    if (method == "get") {
      dataIsJson = false;
      if (data == null) {
        data = new Map<String, dynamic>();
      }
      data["token"] = token;
    }

    if (debug) {
      print('<net url>------$uri');
      print('<net params>------$data');
    }

    /// 根据当前 请求的类型来设置 如果是请求体形式则使用json格式
    /// 否则则是表单形式的（拼接在url上）
    Options op;
    if (dataIsJson) {
      op = new Options(contentType: ContentType.parse("application/json"));
    } else {
      op = new Options(
          contentType: ContentType.parse("application/x-www-form-urlencoded"));
    }

    op.method = method;

    /// 统一带上token
    return _dio.request<Map<String, dynamic>>(
        method == "get" ? uri : "$uri?token=$enToken",
        data: data,
        options: op);

  }

  /// 对请求返回的数据进行统一的处理
  /// 如果成功则将我们需要的数据返回出去，否则进异常处理方法，返回异常信息
  static Future<T> logicalErrorTransform<T>(Response<Map<String, dynamic>> resp) {
    if (resp.data != null) {
      if (resp.data["code"] == 0) {
        T realData = resp.data["data"];
        return Future.value(realData);
      }
    }

    if (debug) {
      print('resp--------$resp');
      print('resp.data--------${resp.data}');
    }

    LogicError error;
    if (resp.data != null && resp.data["code"] != 0) {
      if (resp.data['data'] != null) {
        /// 失败时  错误提示在 data中时
        /// 收到token过期时  直接进入登录页面
        Map<String, dynamic> realData = resp.data["data"];
        error = new LogicError(resp.data["code"], realData['codeMessage']);
      } else {
        /// 失败时  错误提示在 message中时
        error = new LogicError(resp.data["code"], resp.data["message"]);
      }
    } else {
      error = unknowError;
    }
    return Future.error(error);
  }

  ///获取授权token
  static getToken() async {
    String token = await LocalStorage.get(LocalStorage.TOKEN_KEY);
    return token;
  }
}

/// 统一异常类
class LogicError {
  int errorCode;
  String msg;

  LogicError(errorCode, msg) {
    this.errorCode = errorCode;
    this.msg = msg;
  }
}
复制代码

上面就完成了基本的封装，基本涵盖了所有的方法，除了下载，下面我们再来看看统一的登录异常的处理，当监听到异地登录的情况或者其他登录异常时，我们是需要让用户知道的，有时候还需要直接进入登录页面，这里就涉及到了路由的跳转，需要context这个参数，为了得到这个context，这时候我们可以写一个监听类来结合接口使用

class LoginInvalidHandler {
  BuildContext currentContext;
  LoginInvalidHandler(this.currentContext);

  Future<Null> loginInvalidHandler(dynamic errorMsg) {
    if (errorMsg != null &&
        errorMsg is LogicError &&
        errorMsg.errorCode == 10000) {
      LocalStorage.clearLoginInfo();
      Fluttertoast.showToast(
          msg: '您的登录已过期，请重新登录',
          gravity: ToastGravity.CENTER,
          timeInSecForIos: 3);
/// 进入登录页的路由跳转
     // NavigatorUtils.goPwdLogin(currentContext);
      return Future.error(errorMsg);
    }
    return Future.error(errorMsg);
  }
}


Future<Null> nullFutureHandler(dynamic data){
  return Future.value(null);
}
复制代码

有了这些以后吗，一切都准备好了，接下来就是接口了，我们可以写一个Api类,这里我就简单的写两个接口示例：

/// 所有接口请求

class ApiInterface {
  /// 获取短信验证码
  static final String _API_GET_SMS = "";

  static Future<Map<String, dynamic>> getSmsCode(
      String flag, String phoneNum, String vefifyCode) async {
/// 调用封装的NetUtil ，这里合理选择方法即可，比如请求体的方式传参数
    return NetUtil.postJson(_API_GET_SMS,
        {"flagId": flag, "phone": phoneNum, "vefifyCode": vefifyCode});
  }

/// 在需要进行登录校验的接口上进行LoginInvalidHandler  异常检测 
///     LoginInvalidHandler handler 带token过期  自动进入登录页的 检测
/// 这里使用的putForm ，即表单方式传递参数
static final String _API_SET_PPWD = "user";
  static Future<Map<String, dynamic>> tradepassword(LoginInvalidHandler handler,
      String tradePassword, String checkTradePassword) async {
    return NetUtil.putForm(_API_SET_PPWD, {
      'tradePassword': tradePassword,
      'checkTradePassword': checkTradePassword
    }).catchError(handler.loginInvalidHandler);
  }
复制代码

最后就是进行调用了

 /// 调用
ApiInterface.tradepassword(
        LoginInvalidHandler(context), ‘sss’,'kjkkl') .then((data) {
 /// 请求成功 进行成功的逻辑处理

}).catchError((errorMsg) {
 /// 请求失败  进入了自定义的error拦截
  if (errorMsg is LogicError) {
    LogicError logicError = errorMsg;
  
  } else {
 /// 请求失败 dio异常
    
  }
});
复制代码

进行了上述的封装之后，我们用起来就非常的顺手了，写起代码来那是键盘敲得飞起啊！

附上Github传送门

喜欢的小伙伴们点点 给文章点点赞哦！Github点点star啥的！哈哈！

转载于:https://juejin.im/post/5c161e24e51d4546f83c8ae8