Flutter: encapsulates the ‘native’ network layer and handles the single thread of Flutter

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The preface

Flutter is a single-threaded framework that uses Future + Dio to implement network encapsulation. It still occupies UI threads and can cause page operations to lag when invoked frequently.

Treatment scheme

Use BasicMessageChannel + Retrofit to encapsulate the native layer network plug-in and enable the child thread to request the network without using the UI thread.

use

Add reference

retrofit_plugin:
    git:
      url: https://github.com/liyufengrex/retrofit_plugin.git
      ref: 0.01.
Copy the code

Network configuration initialization:

void main() {
  NetWorkConfigBuild.init(); ///Initialize the network configurationrunApp(... Omit...). ; }Copy the code

import 'package:retrofit_plugin/retrofit_plugin.dart';

abstract class NetWorkConfigBuild {
  static void init() {
    NetWorkConfigManager.addDefault(NetWorkConfig(
      baseUrl: "http://api.wpbom.com/".// Public header
      headers: {
        "Authorization": "Bearer",
      },
      intercept: _Intercept(),
    ));

    NetWorkConfigManager.addConfig(
        "second",
        NetWorkConfig(
          baseUrl: "https://www.apiopen.top/", headers: {}, intercept: _Intercept(), )); }}///Filter, mainly used for log printing
class _Intercept extends NetworkIntercept {
  @override
  onResponse(Request request, Response response) {
    if (response.success) {
      print("log: ${request.toString()} - ${response.toString()}");
    } else {
      ///System error
      print("log-error: ${request.toString()} - ${response.toString()}"); }}}Copy the code

Each domainKey corresponds to a separate netWorkConfig configuration, and each configuration generates a separate Retrofit request instance. In the preceding example, two network configurations are added. The corresponding domainkeys are default and second respectively.

Creating a network request

Inherits RequestBaseLoader with a generic return value type

import 'package:retrofit_plugin/retrofit_plugin.dart';

class PostRequest extends RequestBaseLoader<String> {
  // The domainKey is overwritten to match the network layer configuration. If the domainKey is not overwritten, the network configuration whose domainKey is default is read by default
  @override
  String get domainKey => "second";

  @override
  Method get method => Method.Post;

  @override
  String get path => "likePoetry";

  @override
  Map<String.dynamic> get data => {
        "name": "Li bai"};@override
  Map<String.String> get header => {};

  @override
  Future<String> execute() {
    return request().then((value) {
      returnvalue.toString(); }); }}Copy the code

Using network request

_post() async {
    //PostRequest is a custom class (need to inherit RequestBaseLoader)
    PostRequest().execute().then((value) {
      setState(() {
        _data = value;
      });
    });
  }
Copy the code

Note: the android manifest file, application label need to add attributes: android: networkSecurityConfig = “@ XML/network_security_config”

Demo has been uploaded. For details, see github.com/liyufengrex… In the example.

Analysis of key code in plug-ins

The native layer does not convert data types and returns strings directly

mRetrofitBuilder.addConverterFactory(ScalarsConverterFactory.create());
mRetrofitBuilder.addConverterFactory(GsonConverterFactory.create());
Copy the code

Retrofit dynamically fills parameters

 @POST
    fun doPost(
        @Url url: String.@HeaderMap headers: Map<String.String>,
        @Body params: Map<String.@JvmSuppressWildcards Any>
    ): Observable<String>

    @GET
    fun doGet(
        @Url url: String.@HeaderMap headers: Map<String.String>,
        @QueryMap(encoded=false) params: Map<String.@JvmSuppressWildcards Any>
    ): Observable<String>

Copy the code

Use BasicMessageChannel for this fragmented and continuous interaction

class RetrofitPlugin : FlutterPlugin.BasicMessageChannel.MessageHandler<Any> {... Override fun onMessage(message: Any? , reply: BasicMessageChannel.Reply<Any> ) { message? .let { val mapParams = itas Map<String, Any>
            val method = mapParams["method"] as String  // separate post get
            val baseUrl = mapParams["baseUrl"] as String // Get the Retrofit instance from baseUrl
            val pathUrl = mapParams["pathUrl"] as String
            val headers = mapParams["headers"]
            val params = mapParams["params"]
            doRequest(
                method = method,
                baseUrl = baseUrl,
                pathUrl = pathUrl,
                headers = headers as Map<String.String>,
                params = params as Map<String, Any>,
                reply = reply
            )
        }
    }

    private fun doRequest(
        method: String,
        baseUrl: String,
        pathUrl: String,
        headers: Map<String.String>,
        params: Map<String, Any>,
        reply: BasicMessageChannel.Reply<Any>
    ) {
        mRequestLoader.doRequest(
            method,
            baseUrl,
            pathUrl,
            headers,
            params,
            object : IRequestResult {
                override fun onSuccess(data: String) {
                    reply.reply(createResult(true, data))
                }

                override fun onError(msg: String) {
                    reply.reply(createResult(false, msg))
                }
            })
    }
    // Return the same format
    private fun createResult(success: Boolean, data: String): HashMap<String, Any> {
        var result = HashMap<String, Any>()
        result["success"] = success
        result["data"] = data
        return result
    }
}
Copy the code

The dart layerchannelencapsulation

class NativeRequestTool {
  // The BasicMessageChannel name should correspond to the native end
  static const BasicMessageChannel _messageChannel =
      const BasicMessageChannel('retrofitRequest', StandardMessageCodec());

  static Future<Response> doRequest(Request param) async {
    // We normalize the parameter type to map
    return_messageChannel .send(param.toJson()) .then((value) => Response.fromNative(value)); }}// We specify the parameter transfer model paradigm
class Request {
  final String method;
  final String baseUrl;
  final String pathUrl;
  final Map<String.String> headers;
  final Map<String.dynamic> params;

  Request({
    this.method,
    this.baseUrl,
    this.pathUrl,
    this.headers,
    this.params,
  }) : assert( baseUrl ! =null, pathUrl ! =null,); HashMap<String.dynamic> toJson() {
    return new HashMap<String.dynamic> ().. ['method'] = method .. ['baseUrl'] = baseUrl .. ['pathUrl'] = pathUrl .. ['headers'] = headers ?? {}
      ..['params'] = params ?? {}; }}// We specify the callback model paradigm
class Response {
  final bool success;
  final String data; //data returns the result of the request

  Response({this.success, this.data});

  factory Response.fromNative(dynamic result) {
    return Response(
      success: result['success'],
      data: result['data']); }}Copy the code

Dart layer Network call layer encapsulation

import 'dart:collection';
import 'dart:convert' as JSON;
import 'channel/message_channel_tool.dart';
import 'retrofit_plugin.dart';

///Call the native network library
abstract class RequestBaseLoader<T> {
  ///Request the path
  String get path;

  /// Post 或者 Get
  Method get method;

  ///NetConfig key
  String get domainKey => null;

  ///Post the participation
  Map<String.dynamic> get data => HashMap();

  ///header
  Map<String.String> get header => HashMap();

  NetWorkConfig _getConfig() {
    return NetWorkConfigManager.getConfig(domainKey: domainKey);
  }

  ///Obtaining domain name Address
  String _getBaseUrl() {
    return _getConfig().baseUrl;
  }

  ///The interceptor
  NetworkIntercept get intercept => _getConfig().intercept;

  ///Get the request header
  Map<String.String> _getHeaders() {
    Map<String.String> headers = _getConfig().headers;
    if (headers == null) {
      headers = Map(a); }if(header ! =null && header.length > 0) {
      header.forEach((key, value) {
        headers.putIfAbsent(key, () => value);
      });
    }
    return headers;
  }

  ///Gets the request pass parameter
  Map<String.dynamic> _getParams() {
    return data ?? {};
  }

  Request _createReq() {
    return Request(
      method: method == Method.Post ? "Post" : "Get",
      baseUrl: _getBaseUrl(),
      pathUrl: path,
      headers: _getHeaders(),
      params: _getParams(),
    );
  }

  ///The request result is MAP
  Future<Map<String.dynamic>> request() async {
    Request _request = _createReq();
    Response response = await NativeRequestTool.doRequest(_request);
    // Add response interceptor
    if(intercept ! =null) {
      intercept.onResponse(_request, response);
    }
    if (response.success) {
      Map<String.dynamic> result;
      try {
        result = JSON.jsonDecode(response.data);
      } catch (_) {
        result = {"response": response.data};
      }
      return result;
    } else {
      throw Exception(response.data);
    }
  }

  Future<T> execute();
}

enum Method {
  Post,
  Get,
}
Copy the code

abstract class NetWorkConfigManager {
  static HashMap<String, NetWorkConfig> _configs = HashMap();

  static void addDefault(NetWorkConfig config) {
    addConfig("default", config);
  }

  static void addConfig(String key, NetWorkConfig config) {
    _configs.putIfAbsent(key, () => config);
  }

  static NetWorkConfig getConfig({String domainKey}) {
    var config = _configs[domainKey];
    return config == null ? _configs["default"] : config; }}class NetWorkConfig {
  final String baseUrl;
  final Map<String.String> headers;
  final NetworkIntercept intercept;

  NetWorkConfig({
    this.baseUrl,
    this.headers,
    this.intercept,
  });
}
Copy the code

///Network request interceptor
abstract class NetworkIntercept {
  onResponse(Request request, Response response);
}
Copy the code

The plugin code has been uploaded: retrofit_plugin