Flutter-網絡請求

本文轉載自查看原文 2019-11-15 17:46 596 Flutter

Flutter 請求網絡的三種方式

flutter 請求網絡的方式有三種，分別是 Dart 原生的網絡請求 HttpClient、第三方網絡請求 http以及 Flutter 中的 Dio。我們可以比較一下這三種網絡請求方式，然后封裝為我們方便請求網絡的工具類。

Dart 原生的網絡請求 HttpClient

實現 Dart 獲取網絡數據的請求，一般我們需要以下幾個步驟：

原生的網絡請求時不需要修改 pubspec.yaml 文件的，我們只需要在使用的地方引入所需包就可以了

導入

import 'dart:convert';
import 'dart:io';

void _httpClient() async{
      //創建一個HttpClient
      HttpClient httpClient = new HttpClient();
      //攜帶參數的請求
      /*Uri uri=Uri(scheme: "https", host: "flutterchina.club", queryParameters: {
        "userName":"chen",
        "password":"123456"
      });*/
      var url = 'http://47.100.106.80:8080/Test/all';
      //打開Http連接，設置請求頭
      HttpClientRequest request = await httpClient.getUrl(Uri.parse(url));
      //設置請求的 header
      request.headers.add("user-agent", "test");
      request.headers.add("Authorization", "LKSJDLFJSDLKJSLKklsdj");
      //等待連接服務器
      HttpClientResponse response = await request.close();
      //讀取響應內容
      if (response.statusCode == HttpStatus.ok) {
        var data = await response.transform(Utf8Decoder()).join();
        print(data);
      }
      //斷開連接
      //httpClient.close();
    }

第三方HTTP

添加依賴

http: ^0.11.0

導入包

import 'package:http/http.dart' as http;

get請求

//異步加載數據
    void _getRequest() async {
      //下面為具體網址，需要自己修改
      String url = "http://47.100.106.80:8080/Test/all";
      var client = http.Client();
      http.Response response = await client.get(url);
      setState(() {
        final data = json.encode(response.body);
        print('data:'+data);
      });
    }
    
    //初始化狀態
    @override
    void initState() {
      super.initState();
      _getRequest();
    }

post

//異步加載數據
    void _postRequest() async {
      String url = "http://47.100.106.80:8080/Test/add";
      var client = http.Client();
      var params = Map<String,String>();
      params['name'] = '測試數據';

      http.Response response = await client.post(url,body:params);
      setState(() {
        final data = json.encode(response.body);
        print(data);
      });
    }

Flutter 發布的 dio

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

添加依賴

dependencies:
  dio: ^1.0.9

導入

import 'package:dio/dio.dart';

get請求

void getRequest() async {
      Dio dio = new Dio();
      var response = await dio.get("http://47.100.106.80:8080/Test/all");
      final data = response.data.toString();
      print(data);
    }

post請求

void postRequest() async {
      var dio = new Dio();
      var response = await dio.post("http://47.100.106.80:8080/Test/add", data:{"name":"name1","account":"測試數據212312"});
      final data = response.data.toString();
      print(response);
      print(data);
    }

參考：https://www.jianshu.com/p/3080e0b81cf4

Dio 網絡請求框架封裝

日志信息攔截

Dio 和 okhttp 一樣，都會有一個請求攔截器和響應攔截器，通過攔截器，我們可以在請求之前或響應之后做一些同意的預處理。例如我們發起請求前查看我們請求的參數和頭部，響應的時候，我們可以查看返回來的數據。

Dio dio = new Dio(); // 添加攔截器 if (Config.DEBUG) { dio.interceptors.add(InterceptorsWrapper( onRequest: (RequestOptions options){ print("\n================== 請求數據 =========================="); print("url = ${options.uri.toString()}"); print("headers = ${options.headers}"); print("params = ${options.data}"); }, onResponse: (Response response){ print("\n================== 響應數據 =========================="); print("code = ${response.statusCode}"); print("data = ${response.data}"); print("\n"); }, onError: (DioError e){ print("\n================== 錯誤響應數據 ======================"); print("type = ${e.type}"); print("message = ${e.message}"); print("stackTrace = ${e.stackTrace}"); print("\n"); } )); }

如果我們想要移除攔截器，那么我們可以將其設置為 null

dio.interceptor.request.onSend=null; dio.interceptor.response.onSuccess=null; dio.interceptor.response.onError=null;

token 添加

    // 頭部添加 token 驗證 headers["Authorization"] = "token lskjdlklsjkdklsjd333"; option.headers = headers; ///超時 option.connectTimeout = 15000; try { Response response = await dio.request(url, data: params, options: option); } on DioError catch (e) { // 請求錯誤處理 }

自動生成 dart 的 json 實體類插件 FlutterJsonBeanFactory

在 Android 開發中，有 GsonFormat 這個插件來講 json 數據自動轉化成 Bean；那么在 Flutter 中也有類似的插件可以生產序列化的實體類的插件：FlutterJsonBeanFactory

step 1：下載插件 FlutterJsonBeanFactory，安裝完成后重啟

Setting -> Plugins -> Browse Respositories 中搜索 FlutterJsonBeanFactory

New -> dart bean class File from JSON

jsontobean.png

step 3：輸入實體類名及 json 格式的數據

format.png
step 4：最后生成的實體類：LoginEntity

class LoginEntity {
    String easemobpassword;
    String username;

    LoginEntity({this.easemobpassword, this.username});

    LoginEntity.fromJson(Map<String, dynamic> json) {
        easemobpassword = json['easemobPassword'];
        username = json['username'];
    }

    Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['easemobPassword'] = this.easemobpassword;
        data['username'] = this.username;
        return data;
    }
}

請求錯誤處理

Response response;
    try {
      response = await dio.request(url, data: params, options: option);
    } on DioError catch (e) {
      // 請求錯誤處理
      Response errorResponse;
      if (e.response != null) {
        errorResponse = e.response;
      } else {
        errorResponse = new Response(statusCode: 666);
      }
      if (e.type == DioErrorType.CONNECT_TIMEOUT) {
        errorResponse.statusCode = Code.NETWORK_TIMEOUT;
      }
      if (Config.DEBUG) {
        print('請求異常: ' + e.toString());
        print('請求異常 url: ' + url);
      }
      return new ResultData(Code.errorHandleFunction(errorResponse.statusCode, e.message, noTip), false, errorResponse.statusCode);
    }

其中 ResultData 是網絡結果處理的實體類

/**
 * 網絡結果數據
 * Created by chenjianrun
 * Date: 2018-07-16
 */
class ResultData {
  var data;
  bool result;
  int code;
  var headers;

  ResultData(this.data, this.result, this.code, {this.headers});
}

Code 是處理網絡錯誤的編碼，並將錯誤結果通過 eventbus 發送出去，一般我們可以在 main_pager 中注冊監聽這個事件。

///網絡請求錯誤編碼
class Code {
  ///網絡錯誤
  static const NETWORK_ERROR = -1;

  ///網絡超時
  static const NETWORK_TIMEOUT = -2;

  ///網絡返回數據格式化一次
  static const NETWORK_JSON_EXCEPTION = -3;

  static const SUCCESS = 200;

  static final EventBus eventBus = new EventBus();

  static errorHandleFunction(code, message, noTip) {
    if(noTip) {
      return message;
    }
    eventBus.fire(new HttpErrorEvent(code, message));
    return message;
  }
}

完成的網絡請求類：HttpRequest

import 'dart:io';

import 'package:dio/dio.dart';
import 'package:private_tutor/common/SpUtils.dart';
import 'package:connectivity/connectivity.dart';

import 'dart:collection';

import 'package:private_tutor/common/config/Config.dart';
import 'package:private_tutor/net/ResultCode.dart';
import 'package:private_tutor/net/ResultData.dart';

///http請求管理類，可單獨抽取出來
class HttpRequest {
  static String _baseUrl;
  static const CONTENT_TYPE_JSON = "application/json";
  static const CONTENT_TYPE_FORM = "application/x-www-form-urlencoded";
  static Map optionParams = {
    "timeoutMs": 15000,
    "token": null,
    "authorizationCode": null,
  };

  static setBaseUrl(String baseUrl){
    _baseUrl = baseUrl;
  }

  static get(url,param) async{
    return await request(_baseUrl+url, param, null, new Options(method:"GET"));
  }

  static post(url,param) async{
    return await request(_baseUrl+url, param, {"Accept": 'application/vnd.github.VERSION.full+json'}, new Options(method: 'POST'));
  }

  static delete(url,param) async{
    return await request(_baseUrl+url, param, null, new Options(method: 'DELETE'));
  }

  static put(url,param) async{
    return await request(_baseUrl+url, param, null, new Options(method: "PUT", contentType: ContentType.text));
  }

  ///發起網絡請求
  ///[ url] 請求url
  ///[ params] 請求參數
  ///[ header] 外加頭
  ///[ option] 配置
  static request(url, params, Map<String, String> header, Options option, {noTip = false}) async {

    //沒有網絡
    var connectivityResult = await (new Connectivity().checkConnectivity());
    if (connectivityResult == ConnectivityResult.none) {
      return new ResultData(Code.errorHandleFunction(Code.NETWORK_ERROR, "", noTip), false, Code.NETWORK_ERROR);
    }

    Map<String, String> headers = new HashMap();
    if (header != null) {
      headers.addAll(header);
    }

    //授權碼
    if (optionParams["authorizationCode"] == null) {
      var authorizationCode = await getAuthorization();
      if (authorizationCode != null) {
        optionParams["authorizationCode"] = authorizationCode;
      }
    }

    headers["Authorization"] = optionParams["authorizationCode"];
    // 設置 baseUrl
    
    if (option != null) {
      option.headers = headers;
    } else{
      option = new Options(method: "get");
      option.headers = headers;
    }

    ///超時
    option.connectTimeout = 15000;

    Dio dio = new Dio();
    // 添加攔截器
    if (Config.DEBUG) {
      dio.interceptors.add(InterceptorsWrapper(
          onRequest: (RequestOptions options){
            print("\n================== 請求數據 ==========================");
            print("url = ${options.uri.toString()}");
            print("headers = ${options.headers}");
            print("params = ${options.data}");
          },
          onResponse: (Response response){
            print("\n================== 響應數據 ==========================");
            print("code = ${response.statusCode}");
            print("data = ${response.data}");
            print("\n");
          },
          onError: (DioError e){
            print("\n================== 錯誤響應數據 ======================");
            print("type = ${e.type}");
            print("message = ${e.message}");
            print("stackTrace = ${e.stackTrace}");
            print("\n");
          }
      ));
    }

    Response response;
    try {
      response = await dio.request(url, data: params, options: option);
    } on DioError catch (e) {
      // 請求錯誤處理
      Response errorResponse;
      if (e.response != null) {
        errorResponse = e.response;
      } else {
        errorResponse = new Response(statusCode: 666);
      }
      if (e.type == DioErrorType.CONNECT_TIMEOUT) {
        errorResponse.statusCode = Code.NETWORK_TIMEOUT;
      }
      if (Config.DEBUG) {
        print('請求異常: ' + e.toString());
        print('請求異常 url: ' + url);
      }
      return new ResultData(Code.errorHandleFunction(errorResponse.statusCode, e.message, noTip), false, errorResponse.statusCode);
    }

    try {
      if (option.contentType != null && option.contentType.primaryType == "text") {
        return new ResultData(response.data, true, Code.SUCCESS);
      } else {
        var responseJson = response.data;
        if (response.statusCode == 201 && responseJson["token"] != null) {
          optionParams["authorizationCode"] = 'token ' + responseJson["token"];
          await SpUtils.save(Config.TOKEN_KEY, optionParams["authorizationCode"]);
        }
      }
      if (response.statusCode == 200 || response.statusCode == 201) {
        return ResultData(response.data, true, Code.SUCCESS, headers: response.headers);
      }
    } catch (e) {
      print(e.toString() + url);
      return ResultData(response.data, false, response.statusCode, headers: response.headers);
    }
    return new ResultData(Code.errorHandleFunction(response.statusCode, "", noTip), false, response.statusCode);
  }

  ///清除授權
  static clearAuthorization() {
    optionParams["authorizationCode"] = null;
    SpUtils.remove(Config.TOKEN_KEY);
  }

  ///獲取授權token
  static getAuthorization() async {
    String token = await SpUtils.get(Config.TOKEN_KEY);
    if (token == null) {
      String basic = await SpUtils.get(Config.USER_BASIC_CODE);
      if (basic == null) {
        //提示輸入賬號密碼
      } else {
        //通過 basic 去獲取token，獲取到設置，返回token
        return "Basic $basic";
      }
    } else {
      optionParams["authorizationCode"] = token;
      return token;
    }
  }
}

使用示例

/// 登錄 model
class LoginModel{
    // 手機號碼登錄
  static phoneLogin(String phone,String verifyCode) async{
    ResultData response = await HttpRequest.post(Address.phoneLogin, {"phoneNum" : phone,"captcha":verifyCode});
    if(response != null && response.result){
        PhoneLoginEntity phoneLoginEntity = PhoneLoginEntity.fromJson(json.decode(response.data));
        return new DataResult(phoneLoginEntity, true);
    }else{
      return new DataResult(null, false);
    }
  }

    // 獲取驗證碼
  static getVerifyCode(String phone) async{
    ResultData response = await HttpRequest.get("${Address.getVerifyCode}?phone=${phone}", null);

//    var response = await HttpRequest.get(Address.getVerifyCode, {"phone":phone});
    if(response != null && response.result){
      VerifyCodeEntity entity = VerifyCodeEntity.fromJson(response.data);
      return new DataResult(entity, true);
    }else{
      return new DataResult(null, false);
    }
  }
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 flutter-路由 flutter-延時執行 flutter-開發總結 flutter-超出部分隱藏 Flutter-自繪組件CustomPaint 【Android學習專題】網絡通信篇：Socket TCP（簡易聊天室） flutter-狀態管理（Provider） flutter-初識（基礎語法） flutter-全局監聽路由 Flutter-常用插件庫