Flutter网络请求框架封装
2018-12-16 本文已影响131人
Yinll
网络请求是每个项目中都非常重要的一个环节,在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.onHttpClientCreate = (HttpClient client) {
// // config the http client
// client.findProxy = (uri) {
// //proxy all request to localhost:8888
// return "PROXY 192.168.1.151: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 = "user/sendPhoneSms";
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/set/word";
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传送门
喜欢的话,麻烦点点star哦!