09-文件和網絡請求

時間  2019-11-07
標籤 文件 網絡 請求 欄目 系統網絡 简体版
原文   原文鏈接

09-文件和網絡請求

文件操做

Dart的IO庫包含了文件讀寫的相關類，它屬於Dart語法標準的一部分，因此經過Dart IO庫，不管是Dart VM下的腳本仍是Flutter，都是經過Dart IO庫來操做文件的。node

APP目錄

Android和iOS的應用存儲目錄不一樣，PathProvider 插件提供了一種平臺透明的方式來訪問設備文件系統上的經常使用位置。該類當前支持訪問兩個文件系統位置：git

  • 臨時目錄: 可使用 getTemporaryDirectory() 來獲取臨時目錄； 系統可隨時清除的臨時目錄（緩存）。在iOS上，這對應於NSTemporaryDirectory() 返回的值。在Android上，這是getCacheDir())返回的值。
  • 文檔目錄: 可使用getApplicationDocumentsDirectory()來獲取應用程序的文檔目錄，該目錄用於存儲只有本身能夠訪問的文件。只有當應用程序被卸載時，系統纔會清除該目錄。在iOS上，這對應於NSDocumentDirectory。在Android上，這是AppData目錄。

引入PathProvider插件,
在pubspec.yaml文件中添加以下聲明：github

dependencies:
  path_provider: ^0.4.1

添加後，執行flutter packages get 獲取一下。web

import 'dart:io';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

class FileOperationRoute extends StatefulWidget {
  FileOperationRoute({Key key}) : super(key: key);

  @override
  _FileOperationRouteState createState() => new _FileOperationRouteState();
}

class _FileOperationRouteState extends State<FileOperationRoute> {
  int _counter;

  @override
  void initState() {
    super.initState();
    //從文件讀取點擊次數
    _readCounter().then((int value) {
      setState(() {
        _counter = value;
      });
    });
  }

  Future<File> _getLocalFile() async {
    // 獲取應用目錄
    String dir = (await getApplicationDocumentsDirectory()).path;
    return new File('$dir/counter.txt');
  }

  Future<int> _readCounter() async {
    try {
      File file = await _getLocalFile();
      // 讀取點擊次數（以字符串）
      String contents = await file.readAsString();
      return int.parse(contents);
    } on FileSystemException {
      return 0;
    }
  }

  Future<Null> _incrementCounter() async {
    setState(() {
      _counter++;
    });
    // 將點擊次數以字符串類型寫到文件中
    await (await _getLocalFile()).writeAsString('$_counter');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('文件操做')),
      body: new Center(
        child: new Text('點擊了 $_counter 次'),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}

經過HttpClient發起HTTP請求

Dart IO庫中提供了Http請求的一些類，咱們能夠直接使用HttpClient來發起請求。使用HttpClient發起請求分爲五步：json

1. 建立一個HttpClient
HttpClient httpClient = new HttpClient();

2.打開Http鏈接，設置請求頭
HttpClientRequest request = await httpClient.getUrl(uri);
這一步可使用任意Http method.
若是包含Query參數，能夠在構建uri時添加，如：
Uri uri=Uri(scheme: "https", host: "flutterchina.club", queryParameters: {
    "xx":"xx",
    "yy":"dd"
  });
經過HttpClientRequest能夠設置請求header，如：
request.headers.add("user-agent", "test");
若是是post或put等能夠攜帶請求體方法，能夠經過HttpClientRequest對象發送request body，如：
String payload="...";
request.add(utf8.encode(payload));

3.等待鏈接服務器
HttpClientResponse response = await request.close();
這一步完成後，請求信息就已經發送給服務器了，返回一個HttpClientResponse對象，它包含響應頭（header）和響應流(響應體的Stream)。

4.讀取響應內容
String responseBody = await response.transform(utf8.decoder).join();

5.請求結束，關閉HttpClient
httpClient.close();

Dio http庫

dio是一個強大的Dart Http請求庫，支持Restful API、FormData、攔截器、請求取消、Cookie管理、文件上傳/下載、超時等。數組

引入dio,
在pubspec.yaml文件中添加以下聲明：瀏覽器

dependencies:
  dio: ^x.x.x

添加後，執行flutter packages get 獲取一下。緩存

一個dio實例能夠發起多個http請求，通常來講，APP只有一個http數據源時，dio應該使用單例模式。安全

示例服務器

import 'package:dio/dio.dart';
Dio dio = new Dio();

//發起 GET 請求 :
Response response;
response=await dio.get("/test?id=12&name=wendu")
print(response.data.toString());

//發起一個 POST 請求:
response=await dio.post("/test",data:{"id":12,"name":"wendu"})

//發起多個併發請求:
response= await Future.wait([dio.post("/info"),dio.get("/token")]);

//下載文件:
response=await dio.download("https://www.google.com/",_savePath);

//發送 FormData:
FormData formData = new FormData.from({
   "name": "wendux",
   "age": 25,
});
response = await dio.post("/info", data: formData)

//經過FormData上傳多個文件:
FormData formData = new FormData.from({
   "name": "wendux",
   "age": 25,
   "file1": new UploadFileInfo(new File("./upload.txt"), "upload1.txt"),
   "file2": new UploadFileInfo(new File("./upload.txt"), "upload2.txt"),
     // 支持文件數組上傳
   "files": [
      new UploadFileInfo(new File("./example/upload.txt"), "upload.txt"),
      new UploadFileInfo(new File("./example/upload.txt"), "upload.txt")
    ]
});
response = await dio.post("/info", data: formData)

詳情能夠參考dio主頁

使用WebSockets

Http協議是無狀態的，只能由客戶端主動發起，服務端再被動響應，服務端沒法向客戶端主動推送內容，而且一旦服務器響應結束，連接就會斷開(見註解部分)，因此沒法進行實時通訊。WebSocket協議正是爲解決客戶端與服務端實時通訊而產生的技術，如今已經被主流瀏覽器支持，因此對於Web開發者來講應該比較熟悉了，Flutter也提供了專門的包來支持WebSocket協議。

發起WebSockets步驟:

  1. 鏈接到WebSocket服務器

web_socket_channel package 提供了咱們須要鏈接到WebSocket服務器的工具.

該package提供了一個WebSocketChannel容許咱們既能夠監聽來自服務器的消息，又能夠將消息發送到服務器的方法。

在Flutter中，咱們能夠建立一個WebSocketChannel鏈接到一臺服務器：

final channel = new IOWebSocketChannel.connect('ws://echo.websocket.org');

  1. 監聽來自服務器的消息

如今咱們創建了鏈接，咱們能夠監聽來自服務器的消息，在咱們發送消息給測試服務器以後，它會返回相同的消息。

咱們如何收取消息並顯示它們？在這個例子中，咱們將使用一個StreamBuilder Widget來監聽新消息， 並用一個Text Widget來顯示它們。

new StreamBuilder(
stream: widget.channel.stream,
builder: (context, snapshot) {
return new Text(snapshot.hasData ? '${snapshot.data}' : '');
},
);
工做原理
WebSocketChannel提供了一個來自服務器的消息Stream 。

該Stream類是dart:async包中的一個基礎類。它提供了一種方法來監聽來自數據源的異步事件。與Future返回單個異步響應不一樣，Stream類能夠隨着時間推移傳遞不少事件。

該StreamBuilder Widget將鏈接到一個Stream， 並在每次收到消息時通知Flutter從新構建界面。

  1. 將數據發送到服務器

爲了將數據發送到服務器，咱們會add消息給WebSocketChannel提供的sink。

channel.sink.add('Hello!');
工做原理
WebSocketChannel提供了一個StreamSink，它將消息發給服務器。

StreamSink類提供了給數據源同步或異步添加事件的通常方法。

  1. 關閉WebSocket鏈接

在咱們使用WebSocket後，要關閉鏈接：

channel.sink.close();

import 'package:flutter/material.dart';
import 'package:web_socket_channel/io.dart';

class WebSocketRoute extends StatefulWidget {
  @override
  _WebSocketRouteState createState() => new _WebSocketRouteState();
}

class _WebSocketRouteState extends State<WebSocketRoute> {
  TextEditingController _controller = new TextEditingController();
  IOWebSocketChannel channel;
  String _text = "";


  @override
  void initState() {
    //建立websocket鏈接
    channel = new IOWebSocketChannel.connect('ws://echo.websocket.org');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("WebSocket(內容回顯)"),
      ),
      body: new Padding(
        padding: const EdgeInsets.all(20.0),
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Form(
              child: new TextFormField(
                controller: _controller,
                decoration: new InputDecoration(labelText: 'Send a message'),
              ),
            ),
            new StreamBuilder(
              stream: channel.stream,
              builder: (context, snapshot) {
                //網絡不通會走到這
                if (snapshot.hasError) {
                  _text = "網絡不通...";
                } else if (snapshot.hasData) {
                  _text = "echo: "+snapshot.data;
                }
                return new Padding(
                  padding: const EdgeInsets.symmetric(vertical: 24.0),
                  child: new Text(_text),
                );
              },
            )
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _sendMessage,
        tooltip: 'Send message',
        child: new Icon(Icons.send),
      ),
    );
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      channel.sink.add(_controller.text);
    }
  }

  @override
  void dispose() {
    channel.sink.close();
    super.dispose();
  }
}

Json Model

因爲Flutter中禁用了Dart的反射功能，而正因如此也就沒法實現Json動態轉化Model的功能。具體作法就是，經過預約義一些與Json結構對應的Model類，而後在請求到數據後再動態根據數據建立出Model類的實例。
例如，咱們能夠經過引入一個簡單的模型類(Model class)來解決前面提到的問題，咱們稱之爲User。在User類內部，咱們有：

一個User.fromJson 構造函數, 用於從一個map構造出一個 User實例 map structure
一個toJson 方法, 將 User 實例轉化爲一個map.

user.dart

class User {
  final String name;
  final String email;

  User(this.name, this.email);

  User.fromJson(Map<String, dynamic> json)
      : name = json['name'],
        email = json['email'];

  Map<String, dynamic> toJson() =>
    <String, dynamic>{
      'name': name,
      'email': email,
    };
}

自動生成Model

儘管還有其餘庫可用，介紹一下官方推薦的json_serializable package包。 它是一個自動化的源代碼生成器，能夠在開發階段爲咱們生成JSON序列化模板，這樣一來，因爲序列化代碼再也不由咱們手寫和維護，咱們將運行時產生JSON序列化異常的風險降至最低。

在項目中設置json_serializable
要包含json_serializable到咱們的項目中，咱們須要一個常規和兩個開發依賴項。簡而言之，開發依賴項是不包含在咱們的應用程序源代碼中的依賴項，它是開發過程當中的一些輔助工具、腳本，和node中的開發依賴項類似。

pubspec.yaml

dependencies:
  # Your other regular dependencies here
  json_annotation: ^2.0.0

dev_dependencies:
  # Your other dev_dependencies here
  build_runner: ^1.0.0
  json_serializable: ^2.0.0

在您的項目根文件夾中運行 flutter packages get (或者在編輯器中點擊 「Packages Get」) 以在項目中使用這些新的依賴項.

以json_serializable的方式建立model類
讓咱們看看如何將咱們的User類轉換爲一個json_serializable。爲了簡單起見，咱們使用前面示例中的簡化JSON model。

user.dart

import 'package:json_annotation/json_annotation.dart';

// user.g.dart 將在咱們運行生成命令後自動生成
part 'user.g.dart';

///這個標註是告訴生成器，這個類是須要生成Model類的
@JsonSerializable()

class User{
  User(this.name, this.email);

  String name;
  String email;
  //不一樣的類使用不一樣的mixin便可
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);  
}

有兩種運行代碼生成器的方法：

一次性生成
經過在咱們的項目根目錄下運行:

flutter packages pub run build_runner build

這觸發了一次性構建，咱們能夠在須要時爲咱們的Model生成json序列化代碼，它經過咱們的源文件，找出須要生成Model類的源文件（包含@JsonSerializable標註的）來生成對應的.g.dart文件。一個好的建議是將全部Model類放在一個單獨的目錄下，而後在該目錄下執行命令。

持續生成

使用watcher可使咱們的源代碼生成的過程更加方便。它會監視咱們項目中文件的變化，並在須要時自動構建必要的文件，咱們能夠經過

flutter packages pub run build_runner watch

在項目根目錄下運行來啓動watcher。只需啓動一次觀察器，而後它就會在後臺運行，這是安全的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程