iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0

Http

使用 Http 通訊協定,發送網路請求存取網路上的資源在開發App是很基本的需求,今日我們練習使用氣象開放資料平臺的API,學習 Http 的呼叫方式吧。

氣象資料開放平臺

中央氣象局提供資料開放平臺,讓我們可以註冊後取得授權碼的情況下,可以透過 API 取得氣象的預報資料,相關的使用說明請參考這邊

取得授權碼後,我們可以到這份API文件查找呼叫API種類以及相關參數設定。

dio

我們使用 dio 這個 Dart Http Library 處理 Http 請求,這個 Library 包裝好了許多強大的功能,例如請求配置、攔截器…。

因為氣象資料開放平臺的API需要授權碼的參數,為了方便使用我們使用Interceptor攔截器,在每次發送請求時可以幫我們自己加上授權碼的參數

import 'package:dio/dio.dart';

class AuthInterceptor extends Interceptor {
  final _authorization = "CWB-EF74EB83-4EB4-45C8-99BC-D9960CF17698";

  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    var params = options.queryParameters = Map.from(options.queryParameters);

    if (params['Authorization'] == null) {
      params['Authorization'] = _authorization;
    }

    options.queryParameters = params;

    // print("[PATH] => ${options.uri}");

    return super.onRequest(options, handler);
  }
}

我們使用 Weather API 類別包裝 Dio 的使用方式

import 'package:dio/dio.dart';
import './interceptors/auth_interceptor.dart';

class WetherAPI {
  late Dio _dio;

  WetherAPI() {
    var options = BaseOptions(
      baseUrl: "https://opendata.cwb.gov.tw/api/v1/rest/datastore",
      connectTimeout: 5000,
      receiveTimeout: 3000,
    );
    var dio = Dio(options);

    dio.interceptors.add(AuthInterceptor());

    this._dio = dio;
  }

  Future<Map<String, dynamic>> fetch(String service,
      {Map<String, dynamic>? parameters}) async {
    try {
      var res = await _dio.get(service, queryParameters: parameters);
      return res.data;
    } catch (e) {
      print(e.toString());
      return {};
    }
  }
}

接下來我們就可以根據需求按照 API 文件的參數設定取得氣象資料

swagger_weather

https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-D0047-061?locationName=中正區&Authorization=CWB-EF74EB83-4EB4-45C8-99BC-D9960CF17698

    var params = {"locationName": "中正區"};

    var data = await WetherAPI().fetch("/F-D0047-061", parameters: params);

回傳資料:

weather_json

程式碼


上一篇
Flutter體驗 Day 20-Provider
下一篇
Flutter體驗 Day 22-Model
系列文
Flutter / Dart 跨平台App開發體驗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言