詳解在Flutter中如何使用dio

2022-04-18 16:00:50

初始化 Dio

您可以建立一個單獨的類，其中包含用於執行網路操作的方法。這有助於將功能邏輯與使用者介面程式碼分開。

為此，請建立一個新的檔案：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 伺服器的基本 URL：

import 'package:dio/dio.dart';

class DioClient {
  final Dio _dio = Dio();

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

  // TODO: Add methods
}

現在，我們可以定義執行網路請求所需的方法。

定義 GET 請求

我們將定義一個通過傳遞一個從 API 檢索單個使用者資料的方法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;
}

上述方法有效，但如果這裡有任何編碼錯誤，應用程式會在您執行時崩潰。

一種更好、更實用的方法是用塊包裝方法：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;
}

在這個例子中，我們還設定了User可為空的，以便在出現任何錯誤時，伺服器將返回null而不是任何實際的使用者資料。

為了顯示使用者資料，我們必須構建HomePage類。建立一個名為home_page.dart的新檔案並向其中新增以下內容：

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類內部，DioClient首先範例化。然後，在build方法內部， FutureBuilder用於檢索和顯示使用者資料。CircularProgressIndicator獲取結果時將顯示。

定義 POST 請求

您可以使用 POST 請求將資料傳送到 API。讓我們嘗試傳送請求並建立一個新使用者。

首先，我將定義另一個模型類，因為這個 JSON 資料的屬性將與之前定義的User模型類不同，用於處理我們必須傳送的使用者資訊：

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類中指定用於建立新使用者的方法：

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物件作為引數，然後將其傳送到API的端點。它返回一個帶有新建立的使用者資訊和建立日期和時間的響應。/users

定義 PUT 請求

您可以使用 PUT 請求更新 API 伺服器中存在的資料。

要在類中定義用於更新使用者的新方法DioClient，我們必須將更新的UserInfo物件與id要應用更新的使用者的一起傳遞。

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;
}

上面的程式碼將向端點傳送一個 PUT 請求/users/<id>以及UserInfo資料。然後它返回更新的使用者資訊以及更新的日期和時間。

定義 DELETE 請求

您可以使用 DELETE 請求從伺服器中刪除一些資料。

在DioClient類中定義一個新方法，用於通過傳遞使用者的來從 API 伺服器中刪除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您可以在內部定義它BaseOptions並在範例化時傳遞一次，而不是每次都傳遞端點Dio。

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

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

此方法還提供各種其他自定義設定——在同一個範例中，我們為請求定義了connectTimeout和receiveTimeout。

上傳檔案

Dio 使上傳檔案到伺服器的過程變得更加簡單。它可以同時處理多個檔案上傳，並有一個簡單的回撥來跟蹤它們的進度，這使得它比http包更容易使用。

您可以使用FormDataDio輕鬆地將檔案上傳到伺服器。以下是向 API 傳送影象檔案的範例：

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 請求、響應錯誤之前攔截它們catchError。在實際場景中，攔截器可用於使用JSON Web Tokens (JWT)進行授權、解析 JSON、處理錯誤以及輕鬆偵錯 Dio 網路請求。

您可以通過重寫回撥執行攔截：onRequest，onResponse，和onError。

對於我們的範例，我們將定義一個簡單的攔截器來記錄不同型別的請求。建立一個名為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 請求觸發的各種回撥，併為每個回撥新增了一個列印語句，用於在控制檯中記錄請求。

Dio在初始化期間新增攔截器：

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

偵錯控制檯中記錄的結果將如下所示：

結論

在 Flutter 中使用 Dio網路感覺簡直不要太爽，它可以優雅地處理許多邊緣情況。Dio 可以更輕鬆地處理多個同時發生的網路請求，同時具有高階錯誤處理能力。它還允許您避免使用http包跟蹤任何檔案上傳進度所需的樣板程式碼。您還可以使用 Dio 包進行各種其他高階自定義，這些自定義超出了我們在此處介紹的內容。

以上就是詳解在Flutter中如何使用dio的詳細內容，更多關於Flutter使用dio的資料請關注it145.com其它相關文章！