This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Small dishes built a few basic small pages, now need to add the business logic, which is essential to use the network request; Flutter provides dart. IO mode for network requests. Both the request mode and the example are explained clearly, and the usage of Flutter is simple. However, many of the examples written by The authors directly use the native HTTP requests commonly used in Dart, and Dishes also tried them.

Integrated application of

  1. Yaml add HTTP dependency HTTP: ^0.11.3+17 after package get synchronization;

2. Introduce HTTP in the specific DART file;import ‘package:http/http.dart’ as http;This is an interesting way to define import as HTTP, and then you can use HTTP in your file, or any other name. 3. HTTP request operations are most commonly used in daily lifepost/getThe request,postParameter passing is required in the requesturl 和 body(key-value pair), passthenMethod to receive returned content;getThe main incoming in the requesturlParameters can also be passed to request headers such as Accept, which also passesthenMethod receives the returned content; Side testreadRequest mode andgetBasically the same way, except for the return of the content of the operation is different,getThe total content returned by thereadThe content returned is directly the data contentreadMethod is more suitable for requesting file content.

A POST request
var url = "https://example.com/api/login?"; http.post(url, body: {' password ':' e10adc3949ba59abbe56e057f20f883e ', 'mobile', '13333333333'}), then ((response) {print (" post way - > status: ${response.statusCode}"); Print (" Post ->body: ${response. Body}"); });Copy the code

A GET request
http.get('https://example/getUserBaseInfo?sid=cs&user=13333333333')
    .then((onValue) {
        print("get方式->status: ${onValue.statusCode}");
        print("get方式->body: ${onValue.body}");
    }
);
Copy the code

The READ request
http.read('https://example/getUserBaseInfo? Sid =cs&user=13333333333'),headers: {"Accept": "application/json"}). Then ((onValue) {print("read mode ->$onValue"); });Copy the code

Asynchronous processing

When it comes to network requests, Flutter must be handled asynchronously. Flutter provides convenient asynchronous operation methods async + await; Execute time-consuming methods that do not require long operation first and then perform time-consuming operations in await execution; The tip is to use async and await modes in pairs, with await executing within async methods.

login() async { await http.post(url, body: {' password ':' e10adc3949ba59abbe56e057f20f883e ', 'mobile', '13333333333'}), then ((response) {print (" post way - > status: ${response.statusCode}"); Print (" Post ->body: ${response. Body}"); }); } // Call the login method login();Copy the code

The test source

login() async { await http.post('https://example.com/api/login?', body: { 'password': 'e10adc3949ba59abbe56e057f20f883e', 'mobile': _phonecontroller.text }).then((response) { if (response.statusCode == 200) { router.navigateTo(context, '/home/${response.body}'); } else { showDialog<Null>( context: context, barrierDismissible: false, child: new AlertDialog( title: New Text(' warm prompt ', style: new TextStyle(color: color.black54, fontSize: 18.0,),), content: new Text(' you entered the username password does not exist! '), Actions: <Widget>[new FlatButton(onPressed: () {navigator.pop (context);}, child: new Text(' confirm ')),],); }}); } onTap() { login(); }Copy the code

Xiao CAI has not been in touch with Flutter for a long time, and there are still many unclear and ununderstood aspects. I hope to point out more if there are wrong aspects.

Source: Little Monk A Ce