Flutter-網絡請求

分类：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");
          },
          one rror: (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
  • step 2：创建实体类，在指定目录下：
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");
          },
          one rror: (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);
    }
  }
}

 




原文地址：https://www.cnblogs.com/ssjf/p/11868418.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Flutter Component动画的显和隐怎么实现
这篇文章主要讲解了“FlutterComponent动画的显和隐怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究...
flutter微信聊天输入框功能如何实现
这篇文章主要讲解了“flutter微信聊天输入框功能如何实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“f...
Flutter之Navigator的高级用法有哪些
本篇内容介绍了“Flutter之Navigator的高级用法有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处...
Flutter怎么使用Android原生播放器
这篇文章主要介绍“Flutter怎么使用Android原生播放器”，在日常操作中，相信很多人在Flutter怎么使用Android原生播放器问题上存在疑惑，小编查阅了各式资料，整...
Flutter开发的android端如何修改APP名称，logo，版本号
Flutter开发的android端如何修改APP名称，logo，版本号，具体的操作步骤：修改APP名称找到文件：android\\app\\src\\main\\AndroidManifest.xml
Flutter系列-flutter路由管理
Flutter路由管理初识路由概念一.路由管理1.1.Route1.2.MaterialPageRoute1.3.Navigator1.4.路由传值1.5 命名路由1.6.命名路由参数传递1.7.适配二、路由钩子三、onUnknownRoute四、结尾初识路由概念路由的概念由来已久，包括网络路由、后端路由，到现在广为流行的前端路由。无论路由的概念如何应用，它的核心是一个路由映射表。比如：名字 detail 映射到 DetailPage 页面等。有了这个映射表之后，我们就可以方便的根据名字来完成路由的转发
Flutter系列-搭建Flutter开发环境
前提：针对Android开发者（windows系统下），已安装Git，AndroidStudio(建议4.0+版本)一.下载Flutter SDK地址：https://flutter.dev/docs/development/tools/sdk/releases，在 Stable channel (Windows)里面下最新版本即可。Flutter的渠道版本会不停变动，请以Flutter官网为准。在中国，要想正常获取安装包列表或下载安装包，可能需要翻墙，也可以去Flutter github项目下去下载安
Flutter系列-Dart基础语法学习
一、变量变量是一个引用，根据Dart中“万物皆对象”原则，即变量存储的都是对象的引用，或者说它们都是指向对象。1.1.声明变量：//1.不指定类型var name = 'aaa';//2.明确指定类型String name = 'aaa';因为有类型推导，所以两种实现效果一样，官方推荐在函数内的本地变量尽量使用var声明。在变量类型并不明确的情况下，可以使用dynamic关键字//3.使用dynamic关键字dynamic name = 'aaa';1.2.默认值未初始化的变量
Flutter2.0运行在web上不同渲染器的问题
前言Flutter2.0发布不久，对web的支持刚刚进入stable阶段。初学几天，构建web应用时候碰到一些问题，比如中文显示成乱码，然后加载图片出现图片跨域问题：Failed to load network image...Trying to load an image from another domain?1.开启web端构建：使用下面这个命令才可以开启Web端构建的支持flutter config --enable-web提示我们：重新启动编辑器，以便它们读取新设置。2.重
Flutter打release包以及release包无法访问网络问题记录
一.Flutter打Android release包的步骤：1.为项目创建一个.jks签名文件（很简单，跳过）2.创建一个文件key.properties，直接复制下面key.properties位置如图：在里面输入一下内容：storePassword=iflytekkeyPassword=iflytekkeyAlias=teachingmachinestoreFile=E:/teacher/app/keys/TeachingMachine.jks输入你自己的passwork以及
React Native之Android原生通过DeviceEventEmitter发送消息给js
1 问题Android原生向js发消息,并且可以携带数据2 实现原理Android原生可以使用RCTEventEmitter来注册事件,然后这里需要指定事件的名字,然后在js那端进行监听同样事件的名字监听,就可以收到消息得到数据Android注册关键代码reactContext.getJSModule(DeviceEventManagerModule.RCT...
React Native之Flexbox布局和监测文本输入onChangeText
1 Flexbox布局1) flexDirection 可以决定布局的主轴,子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列2) justifyContent 决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式 有flex-start、center、flex-end、space-around...
React Native之通过createStackNavigator实现携带参数的页面与页面之间的跳转
1 实现的功能在网上看React Native文档,我特码就想实现一个页面到另外一个页面的跳转,然后另外一个页面怎么获取参数,特么没找到一个说清楚的,要么太复杂,要么说了不理解,下面是我自己写的一个App.js文件,实现一个Home页面跳到另外Details页面,并且携带了参数怎么在Details页面获取,就是这么简单粗暴.2 测试DemoApp.js文件如下...
React Native之最构建对象通过构造方法传递值然后再获取值
1 问题在一个文件构建一个对象,然后在另外一个文件里面new这个对象,通过构造方法传递参数,然后再获取这个参数2 测试代码Student.js文件如下'use strict';import React from 'react'import {NativeModules, NativeEventEmitter, DeviceEventEmitter,Ale...
React Native之内部方法常用几种写法和调用规则
1 简单部分代码export default class App extends Component&amp;lt;Props&amp;gt; { render() { return ( &amp;lt;View {styles.container}&amp;gt; &amp;lt;View {styles.welcome}&amp;gt; &amp;l...
React Native之通过DeviceEventEmitter发送和接收事件
1 怎么实现发送和接收事件理论上封装了Android原生广播的代码,需要注册和反注册,这里用DeviceEventEmitter实现//增加监听DeviceEventEmitter.addListener//取消监听//this.emitter.remove();这里可也可以通过安卓原生向页面js发送消息,可以参考我的这篇博客React Native之Android原生通过Dev...
React Native之组件(Component)生命周期学习笔记
1、Component介绍一般Component需要被其它类进行继承，Component和Android一样，也有生命周期英文图片如下2 具体说明1)、挂载阶段constructor()//构造函数,声明之前先调用super(props)componentWillMount()//因为它发生在render()方法前，因此在该方法内同步设置状态...
React Native之触摸事件(Touchable系列和onLongPress)
1 触摸事件普通点击我们可以使用onPress方法,我们可以使用Touchable 系列控件设计我们的按钮TouchableHighlight 背景会在用户手指按下时变暗TouchableNativeFeedback用户手指按下时形成类似墨水涟漪的视觉效果TouchableOpacity指按下时降低按钮的透明度，而不会改变背景的颜色TouchableWithoutFeedbac...
React Native之编译提示Only one default export allowed per module.
1 问题部分代码如下class HomeScreen extends React.Component { render() { return ( &amp;lt;View {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&amp;gt; &amp;lt;Text&amp;gt;Home Scre...
React Native之Props(属性)和State(状态)和简单样式简单使用
1 Props(属性)和State(状态)和简单样式简单使用App.js代码如下/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, {Component} from 'react';import {Pla...
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot