CHUPCCA

解題報告

0%

Flutter 014 - 怎麼串接API ( Http )

發表於 更新於 分類於 Disqus：

前言

Ya, http 套件可以讓你串接API，你可以利用他來做HTTP請求，是一個很ㄅㄧㄤˋ的工具喔。

完整程式碼

安裝

1
2
3
4
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

IOS & Android 設定

你需要打開IOS和Android的設定檔來開啟一些限制。

IOS檔案

路徑/ios/Runner/Info.plist。

1
2
3
4
5
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>

Android檔案

路徑/android/app/src/main/AndroidManifest.xml。

1
android:usesCleartextTraffic="true"

創建一個API

在這裡我使用JSON Server來當做測試的API，安裝完json-server後你可以修改db.json來編輯你的API格式。

1
$ json-server --watch db.json
1
2
3
4
5
6
7
8
9
{
  "auth": [
    {
      "id": 1,
      "username": "json-server",
      "password": "asdasdlmasdmlasklmklmsad"
    }
  ]
}

建立資料模型

不管是傳送還是接收都希望資料的格式是固定的，若為不固定的資料格式可能會導致APP有錯誤。可以利用Quicktype來生成我們的API模型(推薦新手)，又或者自己新增一個Class再用快捷鍵(mac: command+. |win: control+.)來生成，不過這個需要自己先定義好。

API 接口管理

第一步我們一樣先創建一個API結構，要注意的是Android的模擬器接口是http://10.0.2.2:3000，IOS的接口是localhost:3000，而後面的port可以以自行修改(如果你的Local API Port是500就改500)。

1
2
3
4
5
6
7
8
9
10
11
12
13
/// Android calls the http://10.0.2.2:3000/auth endpoint.
///
/// IOS calls the http://localhost:3000/auth endpoint.
abstract class ApiDataSource {
  /// Create new user.
  Future<String> createUser(User body);

  /// Get user info id, username, passowrd
  Future<String> getUser(int id);

  /// Update user data
  Future<String> updateUser(int id, User body);
}

實作API

先創建一個domain(使用的API)和client(http請求)，然後再對class名稱點擊快捷鍵，生成API框架。

1
2
3
4
class UserRepository implements ApiDataSource {
  final client = http.Client();
  final String domain = "http://localhost:3000";
}

Http 常用三種請求

用這三個請求來實作創建使用者、取得使用者資料和更新使用者資料。

  • POST：用於提交指定資源的實體，通常會改變伺服器的狀態(創建新資料)。
  • GET：用於請求只應用於取得資料(取得資料)。
  • PUT：用於取代指定資料請求(修改已存在資料)。

實作功能

我就以POST來做範例，首先使用client.post做POST請求，接著把使用者的資料模型轉成json的格式送出，請求成功後就可以得到response，你可以得到回應的資訊，完成後就可以用按鈕觸發了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@override
Future<String> createUser(User body) {
  return _createUser(
    Uri.parse('$domain/auth'),
    body,
  );
}

Future<String> _createUser(
  Uri url,
  User body,
) async {
  try {
    final response = await client.post(
      url,
      headers: {
        'Content-Type': 'application/json',
      },
      body: body.toJson(),
    );
    if (response.statusCode == 200) {
      return response.body;
    } else {
      return response.body;
    }
  } catch (e) {
    return e.toString();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
TextButton(
  child: Text(
    "POST",
    style: TextStyle(fontSize: 30),
  ),
  onPressed: () {
    userRepository.createUser(
      User(
        username: "username",
        password: "password",
      ),
    );
  },
),