首先记得后端需要进行跨域配置,尤其是debug的时候。
一、简单实现
1.html包,HttpRequest类。
var req = html.HttpRequest();
req.setRequestHeaders(String key,String value)//设置自定义header
req.open('post', 'url');
req.onLoadEnd.listen((event) {
//此处为收到响应时触发的代码块,可直接从外部传入回调方法————Function类
});
req.send('data');
//发送数据
2.http包,要在pubspec.yaml添加依赖,http。
var req = Request('post', Uri.parse('url'));
req.body='';//传入字符串
//req.bodyBytes=;可传入字节数组,此处类型是List<int>
req.headers.addAll(headers);//可加入自定义headers
req.send().then((value) => null);
3.dio框架,要在pubspec,yaml添加依赖。
简单使用示例
static Future<Response> register(String username,String password) async{
try{
return await Dio().post(Url,data:
{'username':username,'password':password});//Map or String
}catch(e){
print(e);
return null;
}
}
个人比较推荐用第三种方法,因为Dio已经是封装的比较好用的一个框架,比http也更方便好用。
二、BaseOptions
dio框架提供的一个类,可以把请求方法和自定义首部等信息包装在里面重复使用,使用时,只需要在构造dio对象时作为参数传入即可。使用了带有baseUrl的options后,dio发送请求时只需要传入整体url剩余的部分即可。
static BaseOptions _options = BaseOptions(
method: "get",
baseUrl: _baseUrl,
headers: {
"token":_token,
});
var dio = Dio(_options);
_options.headers[key]=value;//可以直接设置headers
三、form-data格式上传数据示例
try{
FormData formData = FormData.fromMap({
'username':username,
'password':password,
'timer':timer
});
var dio = Dio();
return await dio.post("url",data: formData).timeout(Duration(seconds: 3));
}catch(e){
print(e);
return null;
}
timeout是设置超时。
如果文章出现问题,欢迎各位读者在评论区斧正。
笔者Flutter for Web的第二篇已经发布,附上跳转链接