在Flutter中怎么使用dio

今天小編給大家分享一下在Flutter中怎么使用dio的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

初始化 Dio

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

為此，請(qǐng)創(chuàng)建一個(gè)新的文件：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ò)請(qǐng)求所需的方法。

定義 GET 請(qǐng)求

我們將定義一個(gè)通過(guò)傳遞一個(gè)從 API 檢索單個(gè)用戶數(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;
}

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

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

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

為了顯示用戶數(shù)據(jù)，我們必須構(gòu)建HomePage類(lèi)。創(chuàng)建一個(gè)名為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類(lèi)內(nèi)部，DioClient首先實(shí)例化。然后，在build方法內(nèi)部， FutureBuilder用于檢索和顯示用戶數(shù)據(jù)。CircularProgressIndicator獲取結(jié)果時(shí)將顯示。

定義 POST 請(qǐng)求

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

首先，我將定義另一個(gè)模型類(lèi)，因?yàn)檫@個(gè) JSON 數(shù)據(jù)的屬性將與之前定義的User模型類(lèi)不同，用于處理我們必須發(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類(lèi)中指定用于創(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;
}

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

定義 PUT 請(qǐng)求

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

要在類(lèi)中定義用于更新用戶的新方法DioClient，我們必須將更新的UserInfo對(duì)象與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;
}

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

定義 DELETE 請(qǐng)求

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

在DioClient類(lèi)中定義一個(gè)新方法，用于通過(guò)傳遞用戶的 來(lái)從 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');
  }
}

選擇和定義您的請(qǐng)求頭

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

為此，您需要進(jìn)行Dio如下初始化：

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

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

上傳文件

Dio 使上傳文件到服務(wù)器的過(guò)程變得更加簡(jiǎn)單。它可以同時(shí)處理多個(gè)文件上傳，并有一個(gè)簡(jiǎn)單的回調(diào)來(lái)跟蹤它們的進(jìn)度，這使得它比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 請(qǐng)求、響應(yīng)錯(cuò)誤之前攔截它們catchError。在實(shí)際場(chǎng)景中，攔截器可用于使用JSON Web Tokens (JWT)進(jìn)行授權(quán)、解析 JSON、處理錯(cuò)誤以及輕松調(diào)試 Dio 網(wǎng)絡(luò)請(qǐng)求。

您可以通過(guò)重寫(xiě)回調(diào)運(yùn)行攔截：onRequest，onResponse，和onError。

對(duì)于我們的示例，我們將定義一個(gè)簡(jiǎn)單的攔截器來(lái)記錄不同類(lèi)型的請(qǐng)求。創(chuàng)建一個(gè)名為Logging從Interceptor以下擴(kuò)展的新類(lèi)：

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 請(qǐng)求觸發(fā)的各種回調(diào)，并為每個(gè)回調(diào)添加了一個(gè)打印語(yǔ)句，用于在控制臺(tái)中記錄請(qǐng)求。

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

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

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

以上就是“在Flutter中怎么使用dio”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。