机遇屋-flutter网络请求框架dio基本使用

flutter网络请求框架dio基本使用

作者：ych

### 引用
dio用来在flutter跨平台开发中访问网络的框架，在使用的时候，我们首先是引入依赖
```
dio: ^4.0.6
```

#### Dio get请求
##### Dio get 请求无参数
```
  //get请求无参数
  void getRequestFunction1() async {
    ///创建Dio对象
    Dio dio = new Dio();
    ///请求地址 获取用户列表
    String url = "http://192.168.0.1:8080/getUserList";
    ///发起get请求
    Response response = await dio.get(url);
    ///响应数据
    var data = response.data;

setState(() {
      result = data.toString();
    });
  }
```

##### Dio get 请求有参数
```
  ///get请求有参数
  ///根据用户ID来获取用户信息
  void getRequestFunction2() async {
    ///用户id
    int userId =3;
    ///创建 dio
    Dio dio = new Dio();
    ///请求地址
    ///传参方式1
    String url = "http://192.168.0.1:8080/getUser/$userId";
    ///传参方式2 
    String url2 = "http://192.168.0.1:8080/getUser?userId=$userId";
    ///传参方式 3
    String url3 = "http://192.168.0.1:8080/getUser";

Map<String,dynamic> map = Map();
    map["userId"]= userId;
    ///发起get请求
    Response response = await dio.get(url3,queryParameters: map);

///响应数据
    Map<String,dynamic> data = response.data;
    /// 将响应数据解析为 UserBean
    UserBean userBean = UserBean.fromJson(data);
  }

}
````
### Dio post请求
#### Dio post 请求提交 FormData 表单数据

FormData 将提交的参数 name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接
也可以这样来描述:FormData 接口提供了一种表示表单数据的键值对的构造方式,通过FormData发出的请求编码类型被设为 "multipart/form-data"，而在网络请求访问中，通过 Content-Type 来记录这个值，可以理解为Content-Type 表示具体请求中的媒体类型信息。

而我们在实际开发中常用的 Content-Type如下
```
multipart/form-data
application/json     JSON数据格式
application/x-www-form-urlencoded 表单数据格式
```
下面我们将使用 dio 来发起一个post请求，提交参数的格式为 FromData
```
  void postRequestFunction() async {
    ///创建Dio
    Dio dio = new Dio();
    ///发送 FormData:
    FormData formData = FormData.fromMap({"name": "张三", "age": 22});
    String url ="http://192.168.200.68:8080/registerUser";
    ///发起 post 请求 如这里的注册用户信息
    Response response = await dio.post(url, data: formData);
    result = response.data.toString();
    setState(() {});
  }
```
在这里我们可以看到 Content-type 是 text/plain 而并不是我们上面所说的 multipart/form-data ，这是因为在通过Dio 的 FormData 封装参数时，会进行一步默认的设置如下图所示

#### Dio post 请求提交 json 数据
下面我们使用 dio 发起一个post请求，提交json格式的参数
```
  ///post请求发送json
  void postRequestFunction2() async{
    String url = "http://192.168.0.102:8080/registerUser2";
    ///创建Dio
    Dio dio = new Dio();
    ///创建Map 封装参数
    Map<String,dynamic> map = Map();
    map['userName']="小明";
    map['userAge']=44;

///发起post请求
    Response response =  await dio.post(url,data: map);

var data = response.data;
  }
```

我们可以看到 Content-Type 标识了传参方式是以 json 格式来发送的

##### 错误写法
```
      Dio dio = new Dio();
      response = await dio.post(
          'URL',
      queryParameters: {
        "name": "xiaoming",
        "age": "18",
      });
      print(response);
```
##### 正确写法1
```
response=await dio.post("/test",data:{"id":12,"name":"wendu"})
```
##### 正确写法2
```
      Dio dio = new Dio();
      response = await dio.post(
          'URL',
      data: {
        "name": "xiaoming",
        "age": "18",
      });
      print(response);

```

##### 正确写法3
```
      Dio dio = new Dio();
    ///创建Map 封装参数
    Map<String,dynamic> map = Map();
    map['name']='xiaoming';
    map['age']='18';
      response = await dio.post(
           'URL',
          data: map,
  );
      print(response);

```

### Dio 文件上传并实现进度监听
```
  ///手机中的图片
  String localImagePath ="/storage/emulated/0/Download/17306285.jpg";
  ///上传的服务器地址
  String netUploadUrl = "http://192.168.0.102:8080/fileupload";

///dio 实现文件上传
  void fileUplod() async{
    ///创建Dio
    Dio dio = new Dio();

Map<String ,dynamic> map = Map();
    map["auth"]="12345";
    map["file"] = await MultipartFile.fromFile(localImagePath,filename: "xxx23.png");
    ///通过FormData
    FormData formData = FormData.fromMap(map);
    ///发送post
    Response response = await dio.post(netUploadUrl, data: formData,
      ///这里是发送请求回调函数
      ///[progress] 当前的进度
      ///[total] 总进度
      onSendProgress: (int progress, int total) {
        print("当前进度是 $progress 总进度是 $total");
      },);
    ///服务器响应结果
    var data = response.data;

}
```
### Dio 文件下载并实现进度监听
```
  ///当前进度进度百分比  当前进度/总进度 从0-1
  double currentProgress =0.0;
  ///下载文件的网络路径
  String apkUrl ="";
  ///使用dio 下载文件
  void downApkFunction() async{
    /// 申请写文件权限
    bool isPermiss =  await checkPermissFunction();
    if(isPermiss) {
      ///手机储存目录
      String savePath = await getPhoneLocalPath();
      String appName = "rk.apk";

///创建DIO
      Dio dio = new Dio();

///参数一 文件的网络储存URL
      ///参数二 下载的本地目录文件
      ///参数三 下载监听
      Response response = await dio.download(
          apkUrl, "$savePath$appName", onReceiveProgress: (received, total) {
        if (total != -1) {
          ///当前下载的百分比例
          print((received / total * 100).toStringAsFixed(0) + "%");
          // CircularProgressIndicator(value: currentProgress,) 进度 0-1
          currentProgress = received / total;
          setState(() {

});
        }
      });
    }else{
      ///提示用户请同意权限申请
    }
  }
```
Android权限目前分为三种：正常权限、危险权限、特殊权限

>正常权限 直接在AndroidManifest中配置即可获得的权限。大部分权限都归于此。
危险权限，Android 6.0之后将部分权限定义于此。
危险权限不仅需要需要在AndroidManifest中配置，还需要在使用前check是否真正拥有权限，以动态申请。

### 更多
[早起的年轻人](https://juejin.cn/post/6844904081736089608 "早起的年轻人")

评论区

先去登录

flutter网络请求框架dio基本使用

相关推荐

评论区