Dog api and fake people api
API :
Application Programming Interface
性質：外掛服務
使用過電商ＡＰＰ, 通常會結合其他服務, 如：google map
Uber_eat 結合google map API 地圖.
假設
Uber_eat , 也要一個自己專屬的Map地圖工具,
雇用摩托車‘上裝載攝影設備然後去個地方運送並繪製專屬地圖ＡＰＰ
非常耗費資源和錢.
所以乾脆一點直接使用goole map API 嵌入到UberEat APP
DOM 也是ＡＰＩ
因為API是透過javascript 嵌入到html browser 執行
所以才能在HTML 與 CSS 之間運用Javascript 去操作.
Tool :
用Axios 去向來源取得資料
https://unpkg.com/axios/dist/axios.min.js。
目標檔案為 XXXX.js , 將此連結至於Html 的 之前
main.js 是自己的js檔
Chrome of DevTool :
幫助很清楚的知道, 從對方ＡＰＩ內傳過來什麼資料, 這些資料該如何運用.
Resource:
step1 :
refrence Document API form Resource Websit
Step 2 : 配合ＤＯＭ操作HTML 標籤
運用ＤＯＭ操作去改變HTML 標籤內容 , 將取得的資源圖片, 送到HTML裡
注意：原本的html <img class=”show” src=” ” alt””>
src=””. 是空的
原因是後續將透過ＤＯＭ將ＡＰＩ圖片丟進去.
html :
<body><h1>dog picture api lab</h1><button>get pictures</button><div><img class=”show” src=”” alt=””><! — show data here →</div></body>
DOM :
let button = document.querySelector(‘button’)let show = document.querySelector(‘.show’)
step 3. 運用AXIOS 與 ＡＰＩ之間的運做去得資料
axios.get(‘https://dog.ceo/api/breeds/image/random').then(response => {show.src = response.data.message}).catch(error => console.log(error))})
從直覺上去看 GET 取得資源位置： https://dog.ceo/api/breeds/image/random
然後回應 . then ( response =>{ 要做什麼？ })
實例分享：
https://codepen.io/barryyu/pen/dyGYbjX?editors=1111
點看看！裡面有兩個不同網站ＡＰＩ , 一個是隨機人物照片及資料
另一個是隨機狗照片.