詳解在Flutter中如何使用dio

更新時間：2022年04月18日 11:31:45 作者：大前端之旅

應(yīng)用程序開發(fā)的一個關(guān)鍵部分是優(yōu)雅地處理網(wǎng)絡(luò)請求。網(wǎng)絡(luò)返回的響應(yīng)可能包含意想不到的結(jié)果，為了獲得良好的用戶體驗，您需要提前處理邊緣情況。本文將詳細為大家介紹Flutter如何使用dio，需要的可以參考一下

初始化 Dio

您可以創(chuàng)建一個單獨的類，其中包含用于執(zhí)行網(wǎng)絡(luò)操作的方法。這有助于將功能邏輯與用戶界面代碼分開。

為此，請創(chuàng)建一個新的文件：dio_client.dart包含DioClient

class DioClient {
  // TODO: Set up and define the methods for network operations
}

您可以使用以下方法初始化 Dio：

import 'package:dio/dio.dart';

class DioClient {
  final Dio _dio = Dio();
}

定義 API 服務(wù)器的基本 URL：

import 'package:dio/dio.dart';

class DioClient {
  final Dio _dio = Dio();

  final _baseUrl = 'https://reqres.in/api';

  // TODO: Add methods
}

現(xiàn)在，我們可以定義執(zhí)行網(wǎng)絡(luò)請求所需的方法。

定義 GET 請求

我們將定義一個通過傳遞一個從 API 檢索單個用戶數(shù)據(jù)的方法id：

Future<User> getUser({required String id}) async {
    // Perform GET request to the endpoint "/users/<id>"
    Response userData = await _dio.get(_baseUrl + '/users/$id');

    // Prints the raw data returned by the server
    print('User Info: ${userData.data}');

    // Parsing the raw JSON data to the User class
    User user = User.fromJson(userData.data);

    return user;
}

上述方法有效，但如果這里有任何編碼錯誤，應(yīng)用程序會在您運行時崩潰。

一種更好、更實用的方法是用塊包裝方法：get()``try-catch

Future<User?> getUser({required String id}) async {
  User? user;
  try {
    Response userData = await _dio.get(_baseUrl + '/users/$id');
    print('User Info: ${userData.data}');
    user = User.fromJson(userData.data);
  } on DioError catch (e) {
    // The request was made and the server responded with a status code
    // that falls out of the range of 2xx and is also not 304.
    if (e.response != null) {
      print('Dio error!');
      print('STATUS: ${e.response?.statusCode}');
      print('DATA: ${e.response?.data}');
      print('HEADERS: ${e.response?.headers}');
    } else {
      // Error due to setting up or sending the request
      print('Error sending request!');
      print(e.message);
    }
  }
  return user;
}

在這個例子中，我們還設(shè)置了User可為空的，以便在出現(xiàn)任何錯誤時，服務(wù)器將返回null而不是任何實際的用戶數(shù)據(jù)。

為了顯示用戶數(shù)據(jù)，我們必須構(gòu)建HomePage類。創(chuàng)建一個名為home_page.dart的新文件并向其中添加以下內(nèi)容：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final DioClient _client = DioClient();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Info'),
      ),
      body: Center(
        child: FutureBuilder<User?>(
          future: _client.getUser(id: '1'),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              User? userInfo = snapshot.data;
              if (userInfo != null) {
                Data userData = userInfo.data;
                return Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Image.network(userData.avatar),
                    SizedBox(height: 8.0),
                    Text(
                      '${userInfo.data.firstName} ${userInfo.data.lastName}',
                      style: TextStyle(fontSize: 16.0),
                    ),
                    Text(
                      userData.email,
                      style: TextStyle(fontSize: 16.0),
                    ),
                  ],
                );
              }
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

在_HomePageState類內(nèi)部，DioClient首先實例化。然后，在build方法內(nèi)部， FutureBuilder用于檢索和顯示用戶數(shù)據(jù)。CircularProgressIndicator獲取結(jié)果時將顯示。

定義 POST 請求

您可以使用 POST 請求將數(shù)據(jù)發(fā)送到 API。讓我們嘗試發(fā)送請求并創(chuàng)建一個新用戶。

首先，我將定義另一個模型類，因為這個 JSON 數(shù)據(jù)的屬性將與之前定義的User模型類不同，用于處理我們必須發(fā)送的用戶信息：

import 'package:json_annotation/json_annotation.dart';

part 'user_info.g.dart';

@JsonSerializable()
class UserInfo {
  String name;
  String job;
  String? id;
  String? createdAt;
  String? updatedAt;

  UserInfo({
    required this.name,
    required this.job,
    this.id,
    this.createdAt,
    this.updatedAt,
  });

  factory UserInfo.fromJson(Map<String, dynamic> json) => _$UserInfoFromJson(json);
  Map<String, dynamic> toJson() => _$UserInfoToJson(this);
}

在DioClient類中指定用于創(chuàng)建新用戶的方法：

Future<UserInfo?> createUser({required UserInfo userInfo}) async {
  UserInfo? retrievedUser;

  try {
    Response response = await _dio.post(
      _baseUrl + '/users',
      data: userInfo.toJson(),
    );

    print('User created: ${response.data}');

    retrievedUser = UserInfo.fromJson(response.data);
  } catch (e) {
    print('Error creating user: $e');
  }

  return retrievedUser;
}

這將一個UserInfo對象作為參數(shù)，然后將其發(fā)送到API的端點。它返回一個帶有新創(chuàng)建的用戶信息和創(chuàng)建日期和時間的響應(yīng)。/users

定義 PUT 請求

您可以使用 PUT 請求更新 API 服務(wù)器中存在的數(shù)據(jù)。

要在類中定義用于更新用戶的新方法DioClient，我們必須將更新的UserInfo對象與id要應(yīng)用更新的用戶的一起傳遞。

Future<UserInfo?> updateUser({
  required UserInfo userInfo,
  required String id,
}) async {
  UserInfo? updatedUser;

  try {
    Response response = await _dio.put(
      _baseUrl + '/users/$id',
      data: userInfo.toJson(),
    );

    print('User updated: ${response.data}');

    updatedUser = UserInfo.fromJson(response.data);
  } catch (e) {
    print('Error updating user: $e');
  }

  return updatedUser;
}

上面的代碼將向端點發(fā)送一個 PUT 請求/users/<id>以及UserInfo數(shù)據(jù)。然后它返回更新的用戶信息以及更新的日期和時間。

定義 DELETE 請求

您可以使用 DELETE 請求從服務(wù)器中刪除一些數(shù)據(jù)。

在DioClient類中定義一個新方法，用于通過傳遞用戶的來從 API 服務(wù)器中刪除id用戶。

Future<void> deleteUser({required String id}) async {
  try {
    await _dio.delete(_baseUrl + '/users/$id');
    print('User deleted!');
  } catch (e) {
    print('Error deleting user: $e');
  }
}

選擇和定義您的請求頭

baseUrl您可以在內(nèi)部定義它BaseOptions并在實例化時傳遞一次，而不是每次都傳遞端點Dio。

為此，您需要進行Dio如下初始化：

final Dio _dio = Dio(
  BaseOptions(
    baseUrl: 'https://reqres.in/api',
    connectTimeout: 5000,
    receiveTimeout: 3000,
  ),
);

此方法還提供各種其他自定義設(shè)置——在同一個示例中，我們?yōu)檎埱蠖x了connectTimeout和receiveTimeout。

上傳文件

Dio 使上傳文件到服務(wù)器的過程變得更加簡單。它可以同時處理多個文件上傳，并有一個簡單的回調(diào)來跟蹤它們的進度，這使得它比http包更容易使用。

您可以使用FormDataDio輕松地將文件上傳到服務(wù)器。以下是向 API 發(fā)送圖像文件的示例：

String imagePath;

FormData formData = FormData.fromMap({
  "image": await MultipartFile.fromFile(
    imagePath,
    filename: "upload.jpeg",
  ),
});

Response response = await _dio.post(
  '/search',
  data: formData,
  onSendProgress: (int sent, int total) {
    print('$sent $total');
  },
);

攔截器

您可以在使用then處理 Dio 請求、響應(yīng)錯誤之前攔截它們catchError。在實際場景中，攔截器可用于使用JSON Web Tokens (JWT)進行授權(quán)、解析 JSON、處理錯誤以及輕松調(diào)試 Dio 網(wǎng)絡(luò)請求。

您可以通過重寫回調(diào)運行攔截：onRequest，onResponse，和onError。

對于我們的示例，我們將定義一個簡單的攔截器來記錄不同類型的請求。創(chuàng)建一個名為Logging從Interceptor以下擴展的新類：

import 'package:dio/dio.dart';

class Logging extends Interceptor {
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    print('REQUEST[${options.method}] => PATH: ${options.path}');
    return super.onRequest(options, handler);
  }

  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    print(
      'RESPONSE[${response.statusCode}] => PATH: ${response.requestOptions.path}',
    );
    return super.onResponse(response, handler);
  }

  @override
  void onError(DioError err, ErrorInterceptorHandler handler) {
    print(
      'ERROR[${err.response?.statusCode}] => PATH: ${err.requestOptions.path}',
    );
    return super.onError(err, handler);
  }
}

在這里，我們覆蓋了由 Dio 請求觸發(fā)的各種回調(diào)，并為每個回調(diào)添加了一個打印語句，用于在控制臺中記錄請求。

Dio在初始化期間添加攔截器：

final Dio _dio = Dio(
    BaseOptions(
      baseUrl: 'https://reqres.in/api',
      connectTimeout: 5000,
      receiveTimeout: 3000,
    ),
  )..interceptors.add(Logging());

調(diào)試控制臺中記錄的結(jié)果將如下所示：

結(jié)論

在 Flutter 中使用 Dio網(wǎng)絡(luò)感覺簡直不要太爽，它可以優(yōu)雅地處理許多邊緣情況。Dio 可以更輕松地處理多個同時發(fā)生的網(wǎng)絡(luò)請求，同時具有高級錯誤處理能力。它還允許您避免使用http包跟蹤任何文件上傳進度所需的樣板代碼。您還可以使用 Dio 包進行各種其他高級自定義，這些自定義超出了我們在此處介紹的內(nèi)容。

以上就是詳解在Flutter中如何使用dio的詳細內(nèi)容，更多關(guān)于Flutter使用dio的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: