Flutte实用并流行的HTTP请求库dio

Dio

    • 一. 安装
    • 二. Dio APIS
        • 1. BaseOptions 基础配置
        • 2. 请求类型的别名
        • 3. RequestOptions 请求配置
        • 4. Response 和 DioError
        • 5. Interceptors 拦截器
        • 6. 取消请求
        • 7.Proxy 代理
    • 三. 具体例子
        • 1. post
        • 2. 配合Future等待多个请求执行完毕
        • 3. 下载文件
        • 4. 设置Options中的responseType来控制响应的类型
        • 5. 上传文件
        • 6. 更改请求头

一. 安装

在 pubspec.yaml 文件下添加,版本可以自行选择
dependencies:
	dio: ^3.0.9

ctrl+s 保存  或者终端执行 flutter pub get安装依赖

二. Dio APIS

1. BaseOptions 基础配置

// 导入
import 'package:dio/dio.dart';
// 根据自身需求进行配置 不需要的可以不用配置 有默认值
Dio dio=new Dio(BaseOptions(
    method:"post",   //请求方式
    connectTimeout:1000, // 连接超时时间
    receiveTimeout:2000, // 接收超时时间
    sendTimeout:3000,    // 发送超时时间
    // 基础Url 后面的请求都是在这个基础上添加
    baseUrl:"http://127.0.0.1:4200", 
    // 在url后面进行拼接传递的参数
    queryParameters:{"name":"zs","age":20},
    // 自定义字段
    extra:{"sport":"run"},
    // 设置请求头
    headers:{"Content-Type":"application/json"},
    // 其实就是请求头中的一部分被单独拎出来
    // 用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式、什么编码读取这个文件
    contentType:"text/plain;charset=UTF-8",
    // 返回值的类似 ResponseType是个枚举 可以查看其属性 此处设置为json类型
    responseType: ResponseType.json,
    // 有效状态 status为状态码 可以根据状态码决定是否有效
    // 返回true则为有效 可以接收服务器传递的数据
    // 返回false则无效 发送错误 不接收服务器数据
    validateStatus:(status){
      print(status);
      return true;
    },
    // 允许重定向
    followRedirects: true,
    // 最大重定向次数
    maxRedirects : 5,
    ));

2. 请求类型的别名

// 基本用法为:
dio.get(url).then((value)=>{
	// 这里的value为Response类型 待会会详解
})
dio.get()       // get请求
dio.post()      // post请求
dio.put()       // put请求
dio.delete()    // delete请求
dio.head()      // head请求
dio.put()       // put请求
dio.patch()     // patch请求
dio.download()  //  下载文件

3. RequestOptions 请求配置

这是具体不同的请求中使用的配置,会覆盖基础配置BaseOptions
基本和BaseOptions一致

4. Response 和 DioError

try {
	dio.request("/test").then((value) => {
		// 这里的value是Response类型 常用属性有
		// data		 	 响应数据
		// Headers   	 响应头   Headers类型
		// request   	 请求配置 RequestOptions类型
		// isRedirect    是否重定向
		// statusCode    状态码
		// statusMessage 状态信息
	   print(value.data);
	})
}on DioError catch(e) { 
    // 响应信息,它可能是空的  如果请求不能到达http服务器,例如,发生DNS错误,网络是不可用的。
	if(e.response) {
        print(e.response.data)
        print(e.response.headers)  
        print(e.response.request)
    } else{
        print(e.request)
        print(e.message)
    }
    // 除了 response 还有
    // message 错误信息
    // type 错误类型
    	// CONNECT_TIMEOUT  连接超时
    	// RECEIVE_TIMEOUT  接收超时
    	// RESPONSE         状态码错误
    	// CANCEL           请求取消
    	// DEFAULT          默认错误
}

5. Interceptors 拦截器

dio.interceptors.add(InterceptorsWrapper(
    // 如何使用? 只需要根据参数的类型 看看这个参数中有哪些属性 就可以知道如何根据需求操作属性 以下为简单的例子
    onRequest:(RequestOptions options) async {
     // 此处代码在请求前执行 在这里可以对请求进行各种修改
     // 如 设置请求头 应用:可以用于携带token
     options.headers['token']="token";
     // url方式携带参数 options中的属性基本都可以操作 可以根据需要来修改
     options.queryParameters={"sprot":"run"};
	
	 // lock和unlock的使用
	 // 1.使用lock锁定拦截器 使拦截器处于类似暂停的状态
	 dio.interceptors.requestLock.lock(); // 简写 dio.lock()
	 // 2. 使用unlock解锁拦截器,拦截器可以继续往下运行
	 // 这里使用定时器 两秒后解锁
	 Timer(new Duration(seconds: 2),(){
       print("解锁拦截器");
       dio.interceptors.requestLock.unlock();  // 简写  dio.unlock();
     });
     // 正常返回
     return options; 
     // 如果需要拒绝 则
     // return dio.reject("拒绝");
    },
    onResponse:(Response response) async {
     // 在接收响应数据前指定的代码 可以对response进行各种修改
	 // 可以操作返回的数据 如进行拼接
	 response.data="服务器返回的数据:"+response.data;
     return response;
    },
    onError: (DioError e) async {
	 // 发送错误时执行
	 // 修改错误信息
	 e.error="My Error!!";
     return  e;
    }
));

6. 取消请求

// 创建一个CancelToken的实例对象
CancelToken token = CancelToken();
// 发送请求时 绑定这个对象
dio.get(url1, cancelToken: token);
dio.get(url2, cancelToken: token);
// 执行cancel()函数 即可取消请求 取消类似于报错
token.cancel("取消时报错的信息");

7.Proxy 代理

(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate=(client){
  client.findProxy=(uri){
    // 由这个url代理dio中请求中的url 基本上就是替换了url
    return "PROXY localhost:666";
  };
};

三. 具体例子

1. post

// data传递参数
// data和queryParameters的区别:
// data是隐藏的 queryParameters是拼接在url后面的
dio.post("/test", data: {"name":"Rob"},queryParameters: {
            "age":22
          }).then((value=>{ 
	print(value);
}));

2. 配合Future等待多个请求执行完毕

// 这个用于当后续的操作需要多个网络请求的结果时可以使用
Future.wait([dio.post("/task1"), dio.get("/task2")]).then((value)=>{
	// 这里的代码会在上面两个请求结束后才执行
});

3. 下载文件

// urlPath为下载的地址   savePath为文件保存的地址
// 这个可以配合path_provider进行使用 
// path_provider是文件系统相关的插件
dio.download(urlPath, savePath).then((value) => {null});

4. 设置Options中的responseType来控制响应的类型

// 响应类型为流(Stream)
Response<ResponseBody> rs = await Dio().get<ResponseBody>(url,
 options: Options(responseType: ResponseType.stream),
);
print(rs.data.stream); 
// 响应类型为字节(bytes)
Response<List<int>> rs = await Dio().get<List<int>>(url,
 options: Options(responseType: ResponseType.bytes), 
);
print(rs.data); 

5. 上传文件

// 上传文件其实也是post的类型 只是对传递的data使用FormData进行操作 类似于前端的表单 不仅可以传输文件 也可以传输普通对象/Map
// 方法一:将Map类型转换成FormData类型
var formData=FormData.fromMap({
    "name": "Rob",
    "age": 22,
    //                                    文件路径      文件名
    "file": await MultipartFile.fromFile("./index.txt",filename: "simpleFile.txt"),
    "files": [
      await MultipartFile.fromFile("./index.txt",filename: "MultiFile1.txt"),
      await MultipartFile.fromFile("./index.txt",filename: "MultiFile2.txt"),
    ]
});
// 方法二: 
var formData = FormData();
formData.files.addAll([
  MapEntry(
    "files",
     MultipartFile.fromFileSync("./upload.txt",
        filename: "upload1.txt"),
  ),
  MapEntry(
    "files",
    MultipartFile.fromFileSync("./upload.txt",
        filename: "upload2.txt"),
  ),
]);
response = await dio.post("/getFile", 
			data: formData,
			// 传输进度事件       已发送     总共
			onSendProgress: (int sent, int total) {
				print("$sent $total");
			}
);

6. 更改请求头

// 默认情况下,Dio将请求数据(字符串类型除外)序列化为JSON。 
// 可以根据需求进行修改,如修改为以application / x-www-form-urlencoded格式发送数据
// 方法一:基础配置时即设置 dio的请求都变成这个类型
dio.options.contentType= Headers.formUrlEncodedContentType;
// 方法二:发送请求时设置 单个请求为这个类型 别的请求还是默认JSON
dio.post("/index",
	options: Options(contentType:Headers.formUrlEncodedContentType)
);

你可能感兴趣的:(Flutter)