Flutter第十三章-----获取web端数据和web端跨域
一.获取web端数据在上节课的基础上处理了接收到的数据和类型转换为渲染到UI上之前做好充分的准备import package:dio/dio.dart; import package:flutter/cupertino.dart; import package:flutter/material.dart; void main(ListString args) { runApp(MainPage()); print(成功进入主程序调用MainPage函数); } class MainPage extends StatefulWidget { MainPage({Key? key}) : super(key: key); override _MainPageState createState() _MainPageState(); } class _MainPageState extends StateMainPage { override void initState() { // TODO: implement initState super.initState(); _getChannels(); print(成功调用_getChannels); } ListMapString, dynamic _list []; void _getChannels() async { //async和await实现异步能够接收到get发送后返回的请求 DioUtils util DioUtils(); //实例化DioUtils类的对象 print(在_getChannels中成功实例化对象); Responsedynamic result await util.get(channels); MapString, dynamic res result.data as MapString, dynamic; //强制类型转换存储接收到的数据一定是一个键为字符串、值任意类型的 Map List data res[data][channels] as List; //处理接收到的数据只读取data中的channels中的内容 _list data.castMapString, dynamic() as List MapString, dynamic ; //cast声明元素类型但cast返回的是Iterable所以后面用List再重新转换回来 setState(() {}); print(_list); } override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Text(内容), appBar: AppBar(title: Text(频道管理)), ), ); } } //封装一个工具类 class DioUtils { final Dio _dio Dio(); //表示_dio这个内部变量是Dio类型且只能赋值一次Dio()是dio三方库自带的构造函数这里相当于实例化了一个_dio对象。 DioUtils() { // _dio.options.baseUrl htps://tgeek.itheima.net/v1_0/; // // _dio.options.connectTimeout Duration(seconds: 10); //连接超时 // _dio.options.sendTimeout Duration(seconds: 10); //发送超时 // _dio.options.receiveTimeout Duration(seconds: 10); //接收超时 _dio.options ..baseUrl https://geek.itheima.net/v1_0/ //..简洁写法连续赋值写法 ..connectTimeout Duration(seconds: 10) ..sendTimeout Duration(seconds: 10) ..receiveTimeout Duration(seconds: 10); _addInterceptor(); //调用封装好的拦截器方法 } void _addInterceptor() { //用函数封装拦截器方法 _dio.interceptors.add( //给_dio实例化对象添加拦截器 InterceptorsWrapper( onRequest: (options, handler) { handler.next(options); //表示通过了检查可以去往下一个拦截器或直接发送给服务器 // handler.reject(error); //表示不通过给你拦截住了 }, onResponse: (response, handler) { if (response.statusCode! 200 response.statusCode! 300) { //进行逻辑判断状态码是否合规进行放过或拦截决策 handler.next(response); return; } handler.reject( DioException(requestOptions: response.requestOptions), ); //拦截抛出异常 }, onError: (error, handler) { handler.reject(error); }, ), ); } //构造一个向外的get方法 FutureResponsedynamic get(String url, {MapString, dynamic? params}) { print(成功调用实例化对象util的get方法); return _dio.get(url, queryParameters: params); } }二.解决web端跨域问题默认情况下flutter运行web端加载网络资源会报跨域提示错误。1.flutter/packages/flutter tools/lib/src/web/chrome.dart如下图位置添加-disable-web-security,2.删除flutter/.bin/cache./下flutter tools.snaphot和flutter_tools.stamp3.执行flutter doctor-v然后重新运行项目
