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形式上传文件https://blog.csdn.net/qq_24296235/article/details/120260661