Shulou(Shulou.com)05/31 Report--

This article mainly explains the "Flutter network request Dio library use and encapsulation method", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Flutter network request Dio library use and encapsulation method"!

The HttpClient built into the Dart language implements the basic operations related to network requests. However, the function of HttpClient itself is weak, and many common functions of network requests are not supported, so in the actual project, we use dio library to achieve network requests.

Note: the Flutter official website also recommends the use of Dio libraries in projects.

Dio document address: pub.dev address: dio | Dart Package

I. Project directory structure

Folder function components places the global common component router global routing management service management interface request and processes the returned data, complex function logic deals with storeprovider global state management utile tool class, such as interface request tool class, data persistence tool class, encryption and decryption tool class. Views interface management, realize the code logic of interface UI drawing II. Encapsulation idea:

1. Initialize the common configuration of network request uniformly in the DioRequest tool class, and realize request interceptor, response interceptor and error handling.

2. Uniformly manage interface requests in service, and process the returned data according to the actual needs. If you need to update UI or share the data globally, you can implement it with provider.

Add dependencies

Add the required third-party dependent libraries to the pubspec.yaml file

Dev_dependencies: flutter_test: sdk: flutter # The "flutter_lints" package below contains a set of recommended lints to # encourage good coding practices. The lint set provided by the package is # activated in the `analysis_ options.yaml` file located at the root of your # package. See that file for information about deactivating specific lint # rules and activating additional ones. Flutter_lints: ^ 1.0.0 # data request dio: ^ 4.0.4 IV. Simple implementation of network request

Create a new dio_request.dart file in the utils directory to implement the DioRequest network request tool class.

Import 'package:dio/dio.dart';/// dio Network request configuration Table Custom class DioConfig {static const baseURL =' http://117.34.71.31:8081/paas-admin'; / / Domain name static const timeout = 10000; / timeout} / / Network request tool class class DioRequest {late Dio dio; static DioRequest? _ instance; / / constructor DioRequest () {dio = Dio () Dio.options = BaseOptions (baseUrl: DioConfig.baseURL, connectTimeout: DioConfig.timeout, sendTimeout: DioConfig.timeout, receiveTimeout: DioConfig.timeout, contentType: 'application/json; charset=utf-8', headers: {}) / / request interceptor and responds to interceptor and error handling dio.interceptors.add (InterceptorsWrapper (onRequest: (options, handler) {print ("\ n = request data = ="); print ("url = ${options.uri.toString ()}"); print ("headers = ${options.headers}"); print ("params = ${options.data}"); return handler.next (options) }, onResponse: (response, handler) {print ("\ n = response data = ="); print ("code = ${response.statusCode}"); print ("data = ${response.data}"); print ("\ n"); handler.next (response);}, onError: (DioError e, handler) {print ("\ n = error response data = =") Print ("type = ${e.type}"); print ("message = ${e.message}"); print ("\ n"); return handler.next (e);}));} static DioRequest getInstance () {return _ instance? = DioRequest ();}} V. Implement login registration service

Create a new service directory under lib and a new login.dart file in the service directory.

Import 'dart:convert';import' package:cyber_security/utils/http.dart';class LoginService {/ / get user data center list static Future getDataCenter () async {var response = await DioRequest.getInstance () .dio.get ('/ getDataCenter'); var data = jsonDecode (response.toString ()); return data ['dataCenterList'] } / login interface static login (value) async {var response = await DioRequest.getInstance () .dio .post ('/ sys/login', queryParameters: value); var data = jsonDecode (response.toString ()); / / A pair of returned identity credentials are stored globally with persistent storage return data ['key'] } / / get permission list static menuNav () async {var response = await DioRequest.getInstance () .dio.get ('/ sys/menu/nav'); var data = jsonDecode (response.toString ()); return data ['key'];}} VI. Use the service service @ override void initState () {/ / TODO: implement initState super.initState () / / request user data center data LoginService.getDataCenter () .then ((value) {setState (() {_ dataCenterList = value;});}) Thank you for your reading. The above is the content of "the use and encapsulation method of Flutter network request Dio library". After the study of this article, I believe you have a deeper understanding of the use and encapsulation method of Flutter network request Dio library, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.