iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 24
0
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 24

24 Ajax 、 JSON 與 axios (上)

前言

恭喜你來到這一天,我們要花幾天來學習最後的幾個觀念。在一開始的時候我曾經提過,JavaScript 主要有兩個功能:

(1)產生網頁動畫效果
(2)跟外部伺服器要資料

我們到現在為止,已經講了很多能讓網頁產生動畫效果的技術,現在是時候來談談如何跟外部伺服器要資料這件事了。

JSON

JSON 是一種資訊交換語言,後端可以把資料庫整成線上 JSON 格式,提供給前端做進一步的使用。他使用陣列與物件,分別列出不同的資料,與資料底下的細節。例如可能有六種房型,提供不同的內裝,那麼房型的部分會用陣列表示,房型各自的內裝則以物件表示。同時,正如下方所示,當你打開 JSON 時東西會全部擠成一團,因此可以安裝 JSON View 讓格式好看點。

取得 JSON 檔案後,把資料複製起來,為他宣告一個變數再把資料貼到後面。例如 var data = blablabla... 此時打 data 即可獲得物件的資訊。舉例來說我把 https://api.kcg.gov.tw/api/service/Get/b4dd9c40-9027-4125-8666-06bef1756092 用 JSON View 整好格式以後,貼到我的編輯器中。

當我想要取第一項的站名時,我就可以這樣打:
console.log(data.data.retVal[0].sna);

這樣打其實蠻長的,如果我要取很多資料就要重複打好幾次 data.data.retVal 。所以我也可以另外宣告一個變數,讓我不用每次都要打。例如像這樣:

let ubikedata = data.data.retVal;
console.log(ubikedata[0].sna);

別忘了之前提過,想要知道某筆陣列裡共有幾筆資料,只要寫 陣列名 + .length 就可以了,這邊我可以寫 console.log(ubikedata.length); 來知道這個 api 裡到底有幾個 ubike 站的資料。

什麼是 Ajax ?

每次都要把一大堆的 JSON 貼到編輯器其實是個很浩大的工程。有時我們不會把網頁內容放在網頁上,而是在需要時(例如點擊某標籤)才跟伺服器要求,用 js 和伺服器連線,取得資料。 Ajax 即是完成這樣目的的工具,能夠在不重整畫面的前提下便取得資料。

例如在 google 輸入搜尋字,會自動提示幾個可能符合你要打的問題,這些自動提示的字一開始並沒有出現在網頁上,而是根據你輸入的內容才跳出的。在你輸入後,也不需要做任何重新整理,資料就會及時跳出來。我們也能利用這樣去跟別人串 API 。

XMLHttpRequest

剛剛講完以後,你可能會立刻想到,那如果有個誰隨隨便便跑去偷我的資料怎麼辦。

其實要和別人串 API ,必須使用 XMLHttpRequest 發一個需求出去。對方的伺服器會先檢查一下他的 Access-Control-Allow-Origin 上有沒有你的名字(一種入場前檢查你有沒有在貴賓名單上的畫面),有才會把資料送給你。也可能會因為和別人的網站 API 不同源(如端口不同,一個是 Http 另一個是 Https),拿到 js 回傳的錯誤訊息。而負責規範不同源之間傳輸資料的叫跨來源資源共享 CORS。

必須提的是,有些人秉持著無私分享的想法(?),會把 Access-Control-Allow-Origin 設成 Access-Control-Allow-Origin:* ,代表所有人都能夠連上他。

那電腦又要如何知道資料準備好了呢?我們可以從 readyState 來判斷。當客戶端被建立,已產生出一個 XMLHttpRequest 但還沒被呼叫(還沒有連結要撈)時,會顯示 0 。被呼叫,但還沒把資料傳送過去會顯示 1 。之後則會逐步從 2 跑到 4 ,到 4 的時候代表全部都跑完了,有撈到資料,數據也完全接收。

什麼是 axios 又該如何使用?

前面已經講了很多,今天我想先講解相對比較簡單的 axios ,之後再深入去講如何使用 ajax 。

axios 是一種建立在 Ajax 上的套件,就像學 jQuery 時會用到的許多套件一樣,別人已經幫你寫好東西,只要安裝並使用他指定的語法,就能夠快速又簡單的達成目的。

首先,請搜尋 axios 。仔細看的話會發現這個網站已列出安裝教學,及相關使用語法了。所以我們這邊就直接結束本篇教學...沒啦開玩笑的。很簡單,請照他的只是把這句貼到你的程式碼。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用 codepen 的朋友們,請貼在 setting 的 js 喔!

https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js

好了之後當然就可以開始看他的使用教學。會發現他的語法非常直觀,例如我們剛剛一直想做的功能用這句話就完成了:
axios.get("url").then(function(參數){要執行什麼});

其中參數可以自己命名。

趕緊實際寫寫看吧!我們可以使用這裡來尋找練習用的 api 。

axios.get('https://api.kcg.gov.tw/api/service/Get/b4dd9c40-9027-4125-8666-06bef1756092')
    .then(function(response){
    console.log(response.data);
    });

應該不是很難,你可能頂多會想,為什麼是 console.log(response.data); 而不是 console.log(response); 而已。那就讓我們打打看 console.log(response); ,看打完以後 console 面板實際會長怎樣:

你會發現回傳回來的東西,的確是包在 data 裡面。所以雖然有 response 這個參數,但他僅為物件,資料還是要在 data 裡才找的到。因此如果要直接取抓到的資料,那就必須打 response.data 才行。另外上面的 statusText 則會跳出是否 ok , status 後面的數字也會反應是否正確抓到資料,例如 200 是有抓到、 404 是找不到等等。

另外這裡還有一個細節要注意,那就是 console.log 必須放在括弧裡才行。什麼意思呢?假如我這樣寫:

var data;
var response;
axios.get('https://api.kcg.gov.tw/api/service/Get/b4dd9c40-9027-4125-8666-06bef1756092')
    .then(function(response){
    	data = response.data;
    });
console.log(response.data);

會跑出 Cannot read property 'data' of undefined 。因為一開始宣告的 data 是 undefined ,要等對方回傳才會收到資料,但有時回傳需要跑一陣子,這時程式會直接去走下面的 cnosole.log 導致依然顯是為 undefined 。要解決這個方法就必須將 console.log 的式子放在括弧外,讓他非得執行括弧的內容後才顯示。

當然 axios 還有許多功能值得學習,這邊我就不一一列出。

應用:Youbike2.0 清單

讓我們實際抓取 Youbike2.0 API 試寫下面的網頁畫面!

這六百多筆即時的租借狀況,是抓取這個 API 並運用 axios 完成的。記得要先載入 axios 該載入的東西,也別忘了用 JSON View 整理一下格式,找到 API 裡會需要用到的站名、地址、總車輛、剩餘數量分別叫做什麼喔!

  • html
<h1>YouBike2.0 高雄租借清單</h1>
<h3>共有 <span class = stationNum></span> 筆</h3>
<ul class = stationList></ul>
  • js
let stationList = document.querySelector(".stationList");
let stationNum = document.querySelector(".stationNum");
let ubikedata;

axios.get('https://api.kcg.gov.tw/api/service/Get/b4dd9c40-9027-4125-8666-06bef1756092')
  .then(function (response) {
    console.log(response); 
    if(response.request.readyState === 4 && response.status === 200){ //有load完才跑下面
    	ubikedata = response.data.data.retVal;
    	getList();
    }else{ 
    	console.log("error"); //萬一沒load完就跑下面顯示錯誤提示
    }
});

let str="";
let str2="";

function getList(){
	ubikedata.forEach(function(item){
    	let content = `<li>
    		        	${item.sna}:${item.ar},總車位共有${item.tot}個,還有${item.sbi}台車可借
    				  </li>`
        str2+= content;
	})

	str = ubikedata.length;

	stationNum.innerHTML = str;
	stationList.innerHTML = str2;
}

上面我有多放一句 if(response.request.readyState === 4 && response.status === 200){...}else{...} ,因為我在寫的時候,可能是 api 資料多要 load 比較久。為了確保他真的全部都跑完了才去跑下面的程式,所以我多寫了這個判斷式。

會寫之後,你也可以挑戰看看新增更多的功能,例如新增一個下拉的排列選擇器,讓使用者可以依照地址或車子剩餘的數量排列。逐漸一步一步優化這個網站唷!

學習與參考資料

JS 學徒特訓班教學影片及練習題 26/28/29 關
AJAX 筆記:https://medium.com/%E9%A6%AC%E6%A0%BC%E8%95%BE%E7%89%B9%E7%9A%84%E5%86%92%E9%9A%AA%E8%80%85%E6%97%A5%E8%AA%8C/js-ajax-%E7%AD%86%E8%A8%98-b9a57976fa60


上一篇
23 window.location 與 .split()
下一篇
25 Ajax 、 JSON 與 axios (下)
系列文
花三十天找到 JavaScript 沙漠中的綠洲31

尚未有邦友留言

立即登入留言