flutter for web.(一)HTTP post请求的几种实现方式以及Dio包中BaseOptions和FormData的使用。

首先记得后端需要进行跨域配置,尤其是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的第二篇已经发布,附上跳转链接

flutter for web.(二)Http post请求实现Multipart/form-data形式上传文件icon-default.png?t=L892https://blog.csdn.net/qq_24296235/article/details/120260661

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值