Flutter入门06----Dart异步操作和网络请求

• 在Dart中处理耗时操作(网络请求，文件读取)，采用的的处理方式为单线程 + 事件循环，而在OC，Java中采用的是多线程；

阻塞式调用与非阻塞式调用

• 其是操作系统中的概念；
• 其关注的是程序在等待调用结果时的状态；
• 阻塞式调用：在调用结果返回之前，当前线程会被挂起，调用线程只有在得到调用结果之前才能继续执行；
• 非阻塞式调用：调用执行之后，当前线程不会停止执行，只需要过一段时间来检查一下有没有结果返回即可；

Dart事件循环

• 事件循环：其将需要处理的一系列事件(包括点击事件，IO事件，网络事件)放在一个事件队列中，然后不断的从事件队列中取出事件，并执行其对应需要执行的代码块，直到事件队列清空为止；

Dart的异步操作

• Dart的异步操作有三种，分别为：Future，async和await；

Future

• 案例代码：-- 常规用法

import 'dart:io';

main(List<String> args) {
  print("main start");

  //发送一个网络请求 耗时操作
  var futurn = getNetworkData();

  //需要在futurn中回调函数有返回结果，才会执行下面的回调函数
  futurn.then((String value) {
    print(value);
  }).catchError((error) {
    print("---$error---");
  }).whenComplete(() {
    print("执行完毕");
  });

  print("main end");
}

//模拟一个网络请求
//futurn包裹网络请求 -- 耗时操作
//1.只要有返回结果，那么就执行Future对应的then的回调函数；
//2.如果没有返回结果(有错误信息)，需要在Future回调中抛出一个异常；
Future<String> getNetworkData() {
  return Future<String>(() {
    sleep(Duration(seconds: 3));
    return "Hello World!!";
    // throw Exception("error");
  });
}

• Future中的耗时操作，不会阻塞当前线程，当前线程依然可以执行其他任务；
  -Future中的函数包裹网络请求 -- 耗时操作；

• Future中的函数有返回结果，那么就执行Future对应的then的回调函数；

• Future中的函数没有返回结果(有错误信息)，需要在Future回调中抛出一个异常，然后Future会捕获到异常；

• whenComplete，Future中的耗时操作执行完成时，会调用；

• 案例代码：-- 链式调用

import 'dart:io';

main(List<String> args) {
  print("main start");

  Future(() {
    //1.发送的第一次请求
    sleep(Duration(seconds: 3));
    return "第一次的结果";
  }).then((value) {
    print(value);
    //2.发送第二次请求
    sleep(Duration(seconds: 3));
    // return "第二次的结果";
    throw Exception("第二次网络请求 抛出异常");
  }).then((value) {
    print(value);
    //3.发送第三次请求
    sleep(Duration(seconds: 3));
    return "第三次的结果";
  }).then((value) {
    print(value);
  }).catchError((error) {
    print(error);
  });

  print("main end");
}

• 发送三次网络请求，后面的请求依赖与前面请求的结果；

• 案例代码：-- 其他Api演练

main(List<String> args) {
  Future(() {
    return "Hello World!!!";
  }).then((value) {
    print(value);
  });

  Future.value("哈哈哈").then((value) {
    print(value);
  });

  Future.error("错误信息").catchError((error) {
    print(error);
  });

  //延迟
  Future.delayed(Duration(seconds: 3), () {
    return "Hello Flutter";
  }).then((value) {
    return "Hello World!!";
  }).then((value) {
    print(value);
  });
}

await 与 async

• 其可以用同步的代码格式，去实现异步的调用过程，且通常一个async函数会返回一个Future；
• 案例代码：

import 'dart:io';

main(List<String> args) {
  print("main start");

  getData();

  print("main end");
}

void getData() async {
  //链式调用
  var res1 = await getNetworkData("SF");
  print(res1);
  var res2 = await getNetworkData(res1);
  print(res2);
  var res3 = await getNetworkData(res2);
  print(res3);
}

//异步函数
//1.await必须在async函数中才能使用
//2.async函数返回的结果必须是一个Future
Future getNetworkData(String str) {
  return Future(() {
    sleep(Duration(seconds: 3));
    return "Hello World!!" + str;
  });
}

• await必须在async函数中才能使用；
• async函数返回的结果必须是一个Future；

多核CPU的利用

Isolate

• Dart是单线程的，这个线程有自己可以访问的内存空间以及需要运行的事件循环；
• 我们可以将这个空间系统称之为是一个Isolate；
• 例如Flutter中就有一个Root Isolate，负责运行Flutter代码，比如UI渲染，用户交互等等；
• 在Isolate中，资源隔离做的非常好，每个Isolate都有自己的事件循环与事件队列，Isolate之间之间不共享任何资源，只能依靠消息机制进行通信，因此也就没有资源抢占问题，但是如果只有一个Isolate，那么意味着我们只能永远利用一个线程，这对于多核CPU来说，是一种资源的浪费；

Isolate的创建

• 案例代码：

import 'dart:isolate';

main(List<String> args) {
  print("main start");
  //不会阻塞当前线程 
  Isolate.spawn(calc, 100);

  print("main end");
}

void calc(int count) {
  var total = 0;
  for (var i = 0; i < count; i++) {
    total += I;
  }
  print(total);
}

Isolate的通信机制

• 创建新的Isolate用于处理耗时操作，然后将耗时操作的结果告知Main Isolate(也就是默认开启的Isolate)；
• Isolate通过发送管道(SendPort)实现消息通信机制；
• 我们可以在启动并发Isolate时将Main Isolate的发送管道作为参数传递给它；
• 并在执行完毕时，可以利用这个管道给Main Isolate发送消息；
• 案例代码：

import 'dart:isolate';

main(List<String> args) async {
  print("main start");

  //1.创建管道
  ReceivePort port = ReceivePort();

  //2.创建Isolate
  Isolate isolate = await Isolate.spawn<SendPort>(foo, port.sendPort);

  //3.监听管道
  port.listen((message) {
    print(message);
    //关闭管道
    port.close();
    //Isolate销毁
    isolate.kill();
  });

  print("main end");
}

void foo(SendPort port) {
  return port.send("Hello World");
}

第三方网络请求库

• Dio的引入，如下所示：

image.png

• 在网络请求库Dio的基础上进行封装，创建了http_config.dart与http_request.dart两个文件，如下所示：

class HttpConfig {
  static const String baseUtl = "http://httpbin/org";
  static const int timeout = 5000;
}

import 'package:Fluter01/service/http_config.dart';
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';

class HttpReuquest {
  //基础配置
  static final BaseOptions baseOptions = BaseOptions(baseUrl: HttpConfig.baseUtl,connectTimeout: HttpConfig.timeout);
  //网络请求
  static final Dio dio = Dio(baseOptions);

  static Future<T> request<T>(String url,{String method = "get",Map<String,dynamic> params,Interceptor interceptor}) async{
    //配置 这里的option和上面代码中的baseOptions，Dio组件内部会自动帮我们合并的
    final options = Options(method: method);

    //全局拦截器
    Interceptor dInterceptor = InterceptorsWrapper(
        onRequest: (options){
          print("请求拦截");
          return options;
        },
        onResponse: (response) {
          print("响应拦截");
          return response;
        },
        onError: (error){
          print("错误拦截");
          return error;
        }
    );

    List<Interceptor> inters = [dInterceptor];

    //单独设置的拦截器
    if (interceptor != null){
      inters.add(interceptor);
    }

    dio.interceptors.addAll(inters);

    //发送网络请求
    try {
      Response response = await dio.request(url,queryParameters: params,options: options);
      return response.data;
    } on DioError catch(e) {
      return Future.error(e);
    }
  }
}

• 使用封装的网络请求类：

import 'package:flutter/material.dart';
import 'package:Fluter01/service/http_request.dart';

void main() => runApp(SFMyApp());

class SFMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SFHomePage());
  }
}

class SFHomePage extends StatefulWidget {
  @override
  _SFHomePageState createState() => _SFHomePageState();
}

class _SFHomePageState extends State<SFHomePage> {
  bool isShowFloatButton = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("基础widget")),
      body: SFHomeContent(),
      floatingActionButton: isShowFloatButton
          ? FloatingActionButton(
              child: Icon(Icons.arrow_upward),
              onPressed: () {

              },
            )
          : null,
    );
  }
}

class SFHomeContent extends StatefulWidget {
  @override
  _SFHomeContentState createState() => _SFHomeContentState();
}

class _SFHomeContentState extends State<SFHomeContent> {

  @override
  void initState() {
    super.initState();

    //发送网络请求
    // ///1.创建dio对象
    // final dio = Dio();
    // ///2.发送网络请求
    // dio.get("http://httpbin.org/get").then((value) {
    //   print(value);
    // });
    
    HttpReuquest.request("http://httpbin.org/get",params: {"name" : "liyanyan"}).then((value) {
      print(value);
    });
    
    
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener(
      onNotification: (ScrollNotification notification){
        if(notification is ScrollStartNotification){
          print("开始滚动");
        }else if (notification is ScrollUpdateNotification){
          print("正在滚动 -- 总区域:${notification.metrics.maxScrollExtent} 当前位置: ${notification.metrics.pixels}");
        }else if (notification is ScrollEndNotification){
          print("结束滚动");

        }
        return true;
      },
      child: ListView.builder(
        itemBuilder: (BuildContext ctx, int index) {
          return ListTile(
            leading: Icon(Icons.people),
            title: Text("联系人$index"),
          );
        },
        itemCount: 100,
      ),
    );
  }
}