linux 添加dio扩展,Flutter 引入dio封装并实现数据请求

1.在flutter的根目录下找到pubspec.yaml，点击进入后在dependencies下添加  dio: ^2.1.0

dependencies:

flutter:

sdk: flutter

dio: ^2.1.0

2.在根目录的lib文件夹创建创建公共的数据请求文件夹 ajax_data,在文件夹里创建dio_http.dart文件,封装异步的http请求方法

import 'package:dio/dio.dart';//引入dio.dart

import 'dart:io';//引入dart的基本库io提供对I/O的支持

Future https(String methods, String api,Map obj)async{

print('显示参数，方式$methods,接口$api ,参数$obj');

//注意：请求参数的数据类型是Map，数据结构类型是key为String，value可以是任意类型dynamic

try {

Response response;

Dio dio = new Dio();

dio.options.baseUrl = "这里是接口的域名";

dio.options.connectTimeout = 5000;//链接超时，单位毫秒

dio.options.receiveTimeout = 3000;//接收超时，单位毫秒

// 更换ContentType

dio.options.contentType=ContentType.parse("application/x-www-form-urlencoded");

dio.options.responseType = ResponseType.json;//定制接收的数据类型

//添加header头

dio.options.headers = {

"version":1.0.1,

"Authorization":'_token',

};

//这里是请求拦截

dio.interceptors.add(InterceptorsWrapper(

onRequest:(RequestOptions options){

print(options.contentType);

// Do something before request is sent

return options; //continue

// If you want to resolve the request with some custom data，

// you can return a `Response` object or return `dio.resolve(data)`.

// If you want to reject the request with a error message,

// you can return a `DioError` object or return `dio.reject(errMsg)`

},

onResponse:(Response response) {

// Do something with response data

return response; // continue

},

onError: (DioError e) {

// Do something with response error

return  e;//continue

}

));

// 判断请求的方式调用dio不同的请求api

if(methods == "post"){

response =  await dio.post(api, data: obj);

}else if(methods == 'get'){

response =  await dio.get(api, queryParameters: obj);

}//注意get请求使用queryParameters接收参数，post请求使用data接收参数

return response;//返回请求结果

} catch (e) {

print('报错$e');

return e;

}

}

3.实现数据请求

在widget的Dart文件里获取请求数据：

(1)首先引入dio_http.dart文件；

(2)创建自定义的StatefulWidget ，并在里面创建http的请求调用dio_http.dart 中的https方法，我会在下面单独加粗标记

class PickCount extends StatefulWidget {

PickCount({Key key}) : super(key: key);

_PickCountState createState() => _PickCountState();

}

class _PickCountState extends State {

GetUserMsg userMsg;//创建用户信息类(这是自定义的)

@override

Widget build(BuildContext context) {

print('获赞数${userMsg}');

return Row(

mainAxisAlignment: MainAxisAlignment.start,

crossAxisAlignment: CrossAxisAlignment.center,

children: [

textNumber(userMsg.pab_num),//数据的传入

textName(' 排行数  '),

textNumber(userMsg.user_fab_num),//数据的传入

GestureDetector(

child: textName(' 分数  '),

onTap: (){

print('点击');

},

),

textNumber(userMsg.nab_num),//数据的传入

GestureDetector(

child:  textName(' 人数'),

onTap: (){

print('点击');

},

),

],

);

}

//widget中简单放在widget

Text textNumber(int count){

return Text(

'$count',

style: TextStyle(

fontSize: ScreenUtil().setHeight(36),

color: Colors.white

),

);

}

//widget中简单放在widget

Text textName(String name){

return Text(

'$name',

style: TextStyle(

fontSize: ScreenUtil().setHeight(26),

color: Color.fromRGBO(254, 254, 254, 0.6),

),

);

}

//以下是调用https的函数

void getUserMsgEvt(){

Map msg = {

'user_id':'1234567890123'

};

https('post', '接口名',msg ).then((res){

//    获取任意类型的数据json

dynamic json = res.data['data'];

print('显示结果 $json');

setState(() {

//对json数据进行模型层处理；并赋予userMsg

userMsg = GetUserMsg.fromJson(json);

});

});

}

@override

void initState() {

super.initState();

//调用请求数据的接口

getUserMsgEvt();

}

}