flutter-web利用dart js 库发起http request
初学flutter,初学前端,尝试在dart中直接使用HttpClient时,直接报出Platform not supported,查资料发现他还不支持浏览器。 通过查阅资料发现可以借助axios 与 dart:js 之间的互相调用来实现。目前还不清楚有没有其它更好的方式。实例代码:
main.dart:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import 'package:flutter/material.dart' ; import 'dart:js' ; void callJS(){ context[ 'console' ].callMethod( 'log' , [ '开始调用' ]); JsObject(context[ 'getDartCall' ], [ 'http://*****.com' , '{ID: 1234 , Name: "Hunter"}' ]); } void jsCallBack(resData){ / / 结果回调 print (resData); } void main() { / / 定义回调方法 context[ 'jsCallBack' ] = jsCallBack; runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super (key: key); @override _MyHomePageState createState() = > new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { var spacer = new SizedBox(height: 32.0 ); return new Scaffold( body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'Dart 与 JS 互相调用实例' ), new Text( '发起调用' ), spacer, new RaisedButton( onPressed: (){ callJS(); }, child: new Text( '发起调用' ), ), ], ), ), ); } } |
在web下的index.html里面需要引入对应的js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <! DOCTYPE html> < html > < head > < meta charset="UTF-8"> < meta content="IE=Edge" http-equiv="X-UA-Compatible"> < meta name="description" content="A new Flutter project."> <!-- iOS meta tags & icons --> < meta name="apple-mobile-web-app-capable" content="yes"> < meta name="apple-mobile-web-app-status-bar-style" content="black"> < meta name="apple-mobile-web-app-title" content="sharebook"> < link rel="apple-touch-icon" href="icons/Icon-192.png"> <!-- Favicon --> < link rel="shortcut icon" type="image/png" href="favicon.png"/> < title >sharebook</ title > < link rel="manifest" href="manifest.json"> </ head > < body > <!-- This script installs service_worker.js to provide PWA functionality to application. For more information, see: https://developers.google.com/web/fundamentals/primers/service-workers --> < script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js" type="application/javascript"></ script > < script > if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('flutter_service_worker.js'); }); } function getDartCall(reqUrl, arg){ resResult = ''; axios({ method: 'get', url: reqUrl, params: arg }) .then(function(response) { resResult = response.data; jsCallBack(resResult); }).catch(function(erroe){ //请求失败回调 jsCallBack(erroe); }); } </ script > < script src="main.dart.js" type="application/javascript"></ script > </ body > </ html > |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探