Flutter學(xué)習(xí)指南（4）：Dart語(yǔ)言（2）---開(kāi)源網(wǎng)絡(luò)庫(kù)dio

dio 是dart 開(kāi)源的網(wǎng)絡(luò)庫(kù) ，基于dart語(yǔ)言 。使用簡(jiǎn)單，性能穩(wěn)定 。

一.dio的架構(gòu)

執(zhí)行流：

請(qǐng)求攔截器 >> 請(qǐng)求轉(zhuǎn)換器 >> 發(fā)起請(qǐng)求 >> 響應(yīng)轉(zhuǎn)換器 >> 響應(yīng)攔截器 >> 最終結(jié)果。

支持的功能：

http、FormData、攔截器、請(qǐng)求取消、Cookie管理、文件上傳/下載、超時(shí)、錯(cuò)誤處理、轉(zhuǎn)換器、代理。

二、 開(kāi)始實(shí)驗(yàn)

1. 引入包

知識(shí)點(diǎn)：
1.flutter有自己的包管理倉(cāng)庫(kù) Pub

  1. flutter可以引入 pub包，本地路徑包，git包 ，github包
  2. flutter核心庫(kù)不包含顏色，要使用 css_colors 第三方庫(kù)
  3. 要使用瀏覽器 要參考 url_launcher第三方庫(kù)

使用方法：

1.打開(kāi) pubspec.yaml 文件，然后在dependencies下添加dio: 2.1.x (表示最新版)


  1. 終端運(yùn)行
flutter packages get
終端顯示完成

3.在main.dart中引入開(kāi)始使用


main.dart

三.dio的使用

1. 自己準(zhǔn)備一個(gè)服務(wù)器接口 。(有接口的跳過(guò)不用自己搭建一個(gè)服務(wù)器了)

這里我是用swift語(yǔ)言自己在本機(jī)搭建一個(gè)PerfectSwift

不愿意研究的可以直接下面，有時(shí)間了寫(xiě)一個(gè)完整的swift服務(wù)器的教程

注：【】中表示輸入的命令

bogon:~ home$ 【 mkdir  /Users/chaoshen/SwiftServer 】
bogon:~ home$ 【 cd   /Users/chaoshen/SwiftServer 】
bogon:SwiftServer home$ 【 git clone https://github.com/PerfectlySoft/PerfectTemplate.git】
Cloning into 'PerfectTemplate'...
remote: Enumerating objects: 275, done.
remote: Total 275 (delta 0), reused 0 (delta 0), pack-reused 275
Receiving objects: 100% (275/275), 60.50 KiB | 160.00 KiB/s, done.
Resolving deltas: 100% (137/137), done.
bogon:SwiftServer home$ 【 cd PerfectTemplate 】
bogon:PerfectTemplate home$ 【 swift build】
省略編譯信息
bogon:PerfectTemplate home$【 .build/debug/PerfectTemplate】
[INFO] Starting HTTP server localhost on :::8181#表示啟動(dòng)了

成功之后瀏覽器輸入http://127.0.0.1:8181/
有界面出現(xiàn)就是成功了。 PerfectTemplate/main.swift 更改文件可以更改接口

終端【ctrl + c】 停止運(yùn)行
進(jìn)入目錄查看一下

如果你是用xcode開(kāi)發(fā) ，隨意位置建立一個(gè)文件夾 【cd】/終端【swift package generate-xcodeproj
】，建立一個(gè)server服務(wù)器項(xiàng)目一直使用xcode寫(xiě)就可以了。
vccode 寫(xiě)app xcode寫(xiě)服務(wù)器是不是不要太爽啊????????

holle world是個(gè)頁(yè)面web接口 。業(yè)務(wù)接口返回json那種怎么寫(xiě) 。
將下面代碼覆蓋main.swift,重新啟動(dòng)服務(wù)器接口就可以請(qǐng)求了。

如果你不了解服務(wù)器編寫(xiě)/ 現(xiàn)在還不建議你用xcode編寫(xiě)，因?yàn)闀?huì)有大坑，每次增加文件或者刪除文件都要重新編譯，【打包】Xcode工程

2. 刪除test文件夾 以及里面的文件 ，刪除 main.dart的所有內(nèi)容 ，寫(xiě)一個(gè)簡(jiǎn)單的例子運(yùn)行一下
2.1get接口獲取
import 'package:dio/dio.dart';

void main() => getHttp(); ##主函數(shù)入口 

void getHttp() async {  ## 異步處理
  try {   ##不崩潰處理 
    Response response = await 
    Dio().get("http://192.168.1.107:8181/getDatas");
    print("我很帥" + response.toString());
  } catch (e) {
    print("我不帥" + e.toString());
  }
}
2.2post接口獲取
import 'package:dio/dio.dart';

void main() => getHttp(); ##主函數(shù)入口 

void getHttp() async {  ## 異步處理
  try {   ##不崩潰處理 
    Response response = await 
    Dio().post("http://192.168.1.107:8181/getDatas",data:{"id":12,"name":"wendu"});
    print("我很帥" + response.toString());
  } catch (e) {
    print("我不帥" + e.toString());
  }
}
2.3 多個(gè)接口

future 參見(jiàn)文章 

response= await Future.wait([dio.post("/mobile"),dio.get("/token")]);
2.4 下載文件

我們下載一張圖片試試

import 'dart:async';
import 'dart:io';
import 'package:dio/dio.dart';

// In this example we download a image and listen the downloading progress.
main() async {
  var dio = new Dio();
  dio.interceptors.add(LogInterceptor());
  // This is big file(about 200M)
//   var url = "http://download.dcloud.net.cn/HBuilder.9.0.2.macosx_64.dmg";

  var url =
      "https://cdn.jsdelivr.net/gh/flutterchina/flutter-in-action@1.0/docs/imgs/book.jpg";

 // var url = "https://www.baidu.com/img/bdlogo.gif";
 // await download1(dio, url, "./example/book1.jpg");
  await download1(dio, url, (HttpHeaders headers)=>"./example/book1.jpg");
  //await download2(dio, url, "./example/book2.jpg");
}

Future download1(Dio dio, String url, savePath) async {
  try {
    await dio.download(
      url,
      savePath,
      onReceiveProgress: showDownloadProgress,
    );
  } catch (e) {
    print(e);
  }
}

Future download2(Dio dio, String url, String savePath) async {
  try {
    Response response = await dio.get(
      url,
      onReceiveProgress: showDownloadProgress,
      //Received data with List<int>
      options: Options(
        responseType: ResponseType.bytes,
        followRedirects: false,
      ),
    );
    print(response.headers);
    File file = new File(savePath);
    var raf = file.openSync(mode: FileMode.write);
    // response.data is List<int> type
    raf.writeFromSync(response.data);
    await raf.close();
  } catch (e) {
    print(e);
  }
}

void showDownloadProgress(received, total) {
  if (total != -1) {
    print((received / total * 100).toStringAsFixed(0) + "%");
  }
}
2.5 后面都嘗試一下可以干什么

四. json字符串的反序列化

1.中文官網(wǎng)介紹

注意：

使用 dart:convert ,flutter 禁止運(yùn)行時(shí)反射

  1. 單個(gè)無(wú)依賴(lài)的model 可以使用 JSON.decode()
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() =>
    {
      'name': name,
      'email': email,
    };
}

調(diào)用

Map userMap = JSON.decode(json);
var user = new User.fromJson(userMap);

print('Howdy, ${user.name}!');
print('We sent the verification link to ${user.email}.');
  • 一個(gè)User.fromJson 構(gòu)造函數(shù), 用于從一個(gè)map構(gòu)造出一個(gè) User實(shí)例 map structure
  • 一個(gè)toJson 方法, 將 User 實(shí)例轉(zhuǎn)化為一個(gè)map.
2. 在大中型項(xiàng)目中使用代碼生成, 例如，json_serializable和built_value這樣的庫(kù)。

我們以 json_serializable 為例子來(lái)研究，引入包
json_serializable package

2.1 引入
需要在pubspec.yaml添加三個(gè)依賴(lài)，它們分別是："son_annotation" "build_runner" 和 "json_serializable"。

dependencies:
  # Your other regular dependencies here
  json_annotation: '>=2.1.0 <2.3.0'  # json反序列化json_serializable需要

dev_dependencies:
  # Your other dev_dependencies here
  build_runner: ^1.0.0  # #創(chuàng)建.g.dart   json反序列化json_serializable需要
  json_serializable: '2.1.0 <2.3.0'  # json反序列化json_serializable需要

注意yaml文件的縮進(jìn)要求很?chē)?yán)格，與python類(lèi)似

2.2 環(huán)境配置
根目錄運(yùn)行

flutter packages pub run build_runner build #利用build_runner設(shè)置環(huán)境依賴(lài)
flutter packages pub run build_runner watch #當(dāng)創(chuàng)建模型文件時(shí)自動(dòng)創(chuàng)建 “.g.dart”文件

注意：watch 命令不取消會(huì)一直運(yùn)行，只要?jiǎng)?chuàng)建就會(huì)生成一個(gè).g.dart 文件 ,ctrl + C 終端取消。 也可以每次都build 重新生成 。 需要重新生成的可以刪除.g.dart文件，重新build 命令。

2.3 創(chuàng)建模型文件
Person.dart文件

/**Person model class */

import 'package:json_annotation/json_annotation.dart';

part 'Person.g.dart';
///標(biāo)志class需要實(shí)現(xiàn)json序列化功能
@JsonSerializable()
///里面有兩個(gè)屬性 name和id
class Person extends Object {
  String name;
  int id;

///通過(guò)JsonKey重新定義參數(shù)名
  @JsonKey(name: "details_id")
  int detailsId;

  /// 構(gòu)造函數(shù)
  Person(this.name, this.id, this.detailsId);

/// _$HomeModelFromJson 這個(gè)函數(shù)在.g.dart中，命名就是類(lèi)名+FromJson
/// 直接寫(xiě)就行 報(bào)錯(cuò)也沒(méi)關(guān)系 生成.g.dart文件之后就好了
  factory Person.fromJson(Map<String, dynamic> json) => _$PersonFromJson(json);
}

五.錯(cuò)誤處理

1.出現(xiàn)錯(cuò)誤信息： Program ended with exit code: 0

解決方法 ：

sudo lsof -i -P | grep -i "listen"   # 查看所有監(jiān)聽(tīng)信息  ，找到占用端口的  【pid】 ，會(huì)卡一會(huì)查詢(xún)中 ，進(jìn)程名字是PerfectTe

kill 【pid】 # pid 是上命令中查到的進(jìn)程id

WARNING: CocoaPods requires your terminal to be using UTF-8 encoding.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容