Flutter网络请求之dio的初步使用

一 、dio 简介

dio 是一个国产巨佬写的一个Flutter的网络请求库，写这篇的文章的时候更新到3.x版本了。这里是他的 官方中文 使用链接：dio
按照原作者所说：

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...

二 、基本使用方法

1. 添加依赖

dependencies:
  dio: ^3.0.9  // 请使用pub上3.0.0分支的最新版本

我这里这个时候的是一个3.0.9版本，这里的 ^符号，表示3.多的库比如说3.1.1啥的，也能更新下来。

2. 基本使用

dio的原作者给了我们一个简单的例子

import 'package:dio/dio.dart';
void getHttp() async {
  try {
    Response response = await Dio().get("http://www.****.com");
    print(response);
  } catch (e) {
    print(e);
  }
}

我们基础的使用，请求一个URL，这里就直接是 Dio().get("http://www.****.com")。这样就可以通过get方式来请求我们的链接。

三 、项目实际使用方法

在我们项目中，我们当然不能直接使用 Dio().get("http://www.****.com")这样的方法，那样的话如果以后我们要更换网络请求的库的话，我们要修改的地方，就会非常的多。类似的问题，曾经在iOS开发的历史上出现过一次。最初的时候iOS的开发者大多使用的是一个叫 ASI的库，但是在过了几年的时候，这个库不在维护了。这时候，我们就会去找一个新的网络库来代替他。当时如果我们有500个文件中都直接使用 ASI，我们就需要改动500个地方。这样的体力和眼力消耗，实在是太惊人了。所以，我们一般会自己创建一个专门的 网络管理的类NetworkManager。在NetworkManager里，我们把调用方法抽取出一个基础的方法，使用的时候，基于这个基础的方法来调用。这样，我们就能很方便的去进去使用和维护。

• 创建一个基础的文件http_request.dart文件

import 'package:dio/dio.dart';
const String BASEURL = "https://www.****.com";

class HTTPConfig {
    static const baseURL = BASEURL;
    static const timeout = 1000;
}
class LYHttpRequest {
    static final BaseOptions options = BaseOptions(
            baseUrl: HTTPConfig.baseURL, connectTimeout: HTTPConfig.timeout);
    static final Dio dio = Dio(options);

    static Future request(String url,
            {String method = 'get', Map params, Interceptor inter}) async {
        // 1.请求的单独配置
        final options = Options(method: method);

        // 2.添加第一个拦截器
        Interceptor dInter = InterceptorsWrapper(
                onRequest: (RequestOptions options) {
                    // 1.在进行任何网络请求的时候, 可以添加一个loading显示

                    // 2.很多页面的访问必须要求携带Token,那么就可以在这里判断是有Token

                    // 3.对参数进行一些处理,比如序列化处理等
                    print("拦截了请求");
                    return options;
                },
                onResponse: (Response response) {
                    print("拦截了响应");
                    return response;
                },
                onError: (DioError error) {
                    print("拦截了错误");
                    return error;
                }
        );
        List inters = [dInter];
        if (inter != null) {
            inters.add(inter);
        }
        dio.interceptors.addAll(inters);

        // 3.发送网络请求
        try {
            Response response = await dio.request(url, queryParameters: params, options: options);
            return response.data;
        } on DioError catch(e) {
            return Future.error(e);
        }
    }
}

• 创建一个主页homepage使用的home_request.dart文件

import 'network_manager.dart';
class HomeRequest {
    static requestMovieList(int start) async {
        // 1.构建URL
        final movieURL = "https://douban.uieee.com/v2/movie/top250?start=$start&count=20}";
        // 2.发送网络请求获取结果
        final result = await LYHttpRequest.request(movieURL);

        print("result is $result");
    }
}

这个时候我们就可以使用我们创建的类来直接调用我们的方法了。

• 使用
  在主页，我们搞一个按钮，点击这个按钮，我们就请求我们的方法

class LYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("hello 大眠兽"),
        ),
        body: Center(
          child: RaisedButton(
              child: Text("请求数据"),
              onPressed: () {
                HomeRequest.requestMovieList(0);
              }
          ),
        )
    );
  }
}

主页显示.png

打印数据.png

这样，我们的dio的初步使用就完成了。下一篇文章来写dio的进阶使用。

其他文章

• Flutter星级评选，星级，星级排行