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,
      ),
    );
  }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335