同步發表到驢形筆記

誰都能負責呼叫API

在許多的情況，API總是會需要各種機密參數。這個時候如果讓網頁取得常常會導致許多的資安麻煩，所以這時候如果讓伺服器來負責呼叫API後再把結果回傳遊覽器就會安全很多！

這邊會呼叫空氣汙染API示範，首先引入套件"axios"（為什麼是axios？因為前後端都可以用很方便，後端其實有一個request的套件專門用來呼叫網頁或API！雖然被棄用了卻還是有極大的下載量，就可以知道他有多好用了！）

npm i axios --save

然後建立一個後端API讓前端呼叫，依序在"app.ts"建立路線藍圖然後建立API

src\server\app.ts

略
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var airRouter = require('./routes/air');
略
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/air', airRouter);
略

src\server\routes\air.ts

var express = require('express');
var router = express.Router();
var axios = require('axios');

/* GET users listing. */
router.get('/', async function(req, res, next) {
  let result = await axios.get('https://opendata.epa.gov.tw/webapi/api/rest/datastore/355000000I-000259?sort=SiteName&offset=0&limit=1000');
  res.json(result.data);
});

module.exports = router;

然後開啟伺服器(http://localhost:3000/air )，空汙資料取得速度會比較慢。所以請稍微等候（利用後端呼叫API的時候，偶爾會遇到前端可以但後端被拒絕的情況。這是正常的，因為伺服器發出的要求長的跟前端不一樣。解決部分這邊不討論，因為偽裝身分去拿資料很複雜...。基本上就是爬蟲方式啦）

這樣你的資料就利用後端伺服器幫你取得了！如果使用第三方API因為有許多第三方key不方便露在前端讓人看到，就可以利用後端處理完成再打資料丟回前端啦～！

下一篇會進行typescript的基本使用方法～！就能看懂別人的typescript語法拉！

githubday26