1.打开项目中pubspec.yaml 文件

2.找到dependencies(项目第三方框架管理) 添加 dio: ^3.0.9 具体格式：框架名称：^版本号

DIO 使用

void getHttp() async{//async 异步请求
 try {
//await 同步等待请求返回数据
   Response response = await Dio()
   .get("https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/dabaojian?name=长腿美女");
   print(response);
 } catch (e) {//异常处理
 } 
}

WeChatecdc46f5a476e1abc8419b2e8026e3b1.png

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController typeController = TextEditingController();
  String responseString = '未输入';
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(title: Text("美好人间")),
        body: SingleChildScrollView(
          child: Container(
            child: Column(
              children: <Widget>[
                TextField(
                  controller: typeController,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.all(10.0),
                    labelText: '美女类型',
                    helperText: '请输入类型',
                  ),
                  autofocus: false,
                ),
                RaisedButton(
                  onPressed: () {
                    this._choiceAction();
                  },
                  child: Text("选择完毕"),
                ),
                Text(
                  this.responseString,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  
void _choiceAction() {
    print('开始选择');
    if (typeController.text.toString() == '') {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(title: Text("美女类型不能为空")));
      return;
    }
    getHttp(typeController.text.toString()).then((value) {
      print(value);//这里就是调用网络请求之后返回的数据
      //这里必须调用setState方法才能更新TextFild的文字，直接赋值并不能动态改变页面
      setState(() {
        this.responseString = value['data']['name'];
      });
    });




  Future getHttp(String value) async {//返回值设置为Future  调用方法的时候就可以在方法后面添加.then(value){}方法
    try {
      var data = {'name': value};
      Response responseJson = await Dio().get(
          "https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/dabaojian",
          queryParameters: data);//参数可以在url后拼接，也可以按照此方法传参数（更灵活）
      print(responseJson);
      return responseJson.data;
    } catch (e) {
      print(e);
    }
  }
}

返回值设置为Future 调用方法的时候就可以在方法后面添加.then(value){}方法

 Future getHttp(String value) async 

//参数可以在url后拼接，也可以按照此方法传参数（更灵活）

Response responseJson = await Dio().get(
          "https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/dabaojian",
          queryParameters: data);//参数可以在url后拼接，也可以按照此方法传参数（更灵活）

1. then((value){方法体})这里就是调用网络请求之后的回调方法，上面说了网络请求方法返回的是Future，按照我的理解就是将返回值包装成了回调方法，value就是回调传回来的参数
2. 所有需要修改页面内容或者跟页面有关系的数据赋值 都必须用 setState 方法才能更新页面，直接赋值并不能动态改变页面

getHttp(typeController.text.toString()).then((value) {
      print(value);//这里就是调用网络请求之后返回的数据
      //这里必须调用setState方法才能更新TextFild的文字，直接赋值并不能动态改变页面
      setState(() {
        this.responseString = value['data']['name'];
      });

DIO 设置请求头

dio.options.headers = HttpHeaders;

请求头问题

const HttpHeaders = {
"Accept": "application/json, text/plain, */*",
"Accept-Encoding": "gzip, deflate, br",
"Accept-Language": "zh-CN,zh;q=0.9",
"Connection": "keep-alive",
"Content-Length": "64",
"Content-Type": "application/json",
"Cookie": "LF_ID=1590660209354-6272974-7542230; _ga=GA1.2.2130473270.1590660210; _gid=GA1.2.65926066.1590660210; GRID=a0e7ad5-3b1d6c9-7ea4bc9-48158ed; _gat=1; Hm_lvt_59c4ff31a9ee6263811b23eb921a5083=1590660210,1590717713; Hm_lvt_022f847c4e3acd44d4a2481d9187f1e6=1590660210,1590717713; gk_process_ev={%22count%22:1}; gksskpitn=cd7f6b24-542f-4e54-ba9d-7d24ddfc18d9; Hm_lpvt_59c4ff31a9ee6263811b23eb921a5083=1590717733; Hm_lpvt_022f847c4e3acd44d4a2481d9187f1e6=1590717733; SERVERID=1fa1f330efedec1559b3abbcb6e30f50|1590717733|1590717713",
"Host": "time.geekbang.org",
"Origin": "https://time.geekbang.org",
"Referer": "https://time.geekbang.org/?utm_source=pinpaizhuanqu&utm_medium=geektime&utm_campaign=guanwang&utm_term=guanwang&utm_content=0511",
"Sec-Fetch-Dest":" empty",
"Sec-Fetch-Mode":" cors",
"Sec-Fetch-Site":" same-origin",
"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36",
};