iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 18
0
Modern Web

JavaScript初心者ノ研究日記。系列 第 18

十八日目:JavaScript axiosノ章

おはー(U 'ᴗ' U)✧ 我是 SONYKO 。
中秋節快樂~ ♪

MHW 黑龍今日登場 ✧
還沒發文只能邊看實況邊打文章a 我。

https://ithelp.ithome.com.tw/upload/images/20201001/201295062ia0gMF5l3.png 

中秋節我們聯想到烤肉串、串... 串接、axios!
我們今天就講axios 吧(牽強)
 
axios 日本唸成 阿哭西歐蘇(゜д゜;)


⑅ 前言

在十一日目 講物件時曾提到「 JavaScript 就是一堆物件 」、
今天我們在瀏覽器的console 上打 window(BOM的源頭)
可以看到它也是物件。
同樣地、 axios 也是以物件的形式去撈取資料的⑅

BOM 的可以參考 ◟꒰⑅•ᴗ•⑅꒱◞ from 馬格蕾特的冒險者日誌

 


⑅ AJAX? axios?

他們是做什麼用的呢?

昨天forEach 的我們有從OPENDATA 摳資料下來對吧
這個做法有一個致命點、它沒有「 即時更新 」的能力。

今天店有可能會搬家 或開新的店 或倒閉
所以我們應該要「 即時更新資料的方式,用JS 去撈遠端伺服器資料 」。
這件事就是 AJAX 、axios 的任務之一哩 ✧

⑅ 情境二:
https://ithelp.ithome.com.tw/upload/images/20201001/201295068txjtOd3GJ.png

大家應該都有註冊帳號,然後網站跟你說「此帳號已被使用」的經驗
這個究竟是怎麼做到的? 他就是使用了AJAX 的技巧。
流程大概是這樣 ↓

  • JavaScript 可以透過瀏覽器發送資訊給伺服器,去問他有沒有這個帳號。
  • 伺服器回應你說:這個有重複、不能用!
    收到一段字串後,在網頁上顯示這段文字。就是我們圖片看到的紅紅那串。

AJAX 可以在不用重整網頁,去跟後端伺服器去撈各種的資料。

  


⑅ AJAX axios 他們是一樣的東西嗎?

他們都是JavaScript 常用的請求方法,目前主要有4 種請求方法:

  • jQuery ajax
  • XMLHttpRequest
  • fetch
  • axios

那他們有什麼差別呢? 可以參照這篇文章 —— 由前端request 的幾種方法

⑅ 為什麼選擇axios ?

  1. vue.js 的作者建議大家使用 axios 作為請求工具、
    加上 axios 的使用方法非常之簡單,只要引入套件即能使用。
  2. 使用方法跟 ajax 相似,但相當輕量只有13kb 。
    我們今天單純想使用 ajax 而已卻要將整個 jQuery 引入,專案會變得很大。
    如果axios 可以做到跟ajax 一樣的事,又比他還輕量的話,大家也就理所當然選擇 axios 。
  3. 隨著框架興起、ES規範越來越完善。
    jQuery 在未來的路變得越來越窄,所以目前ajax 也處於衰退階段。

⑅ 結論:
    axios:現在是我的時代、顆顆。

 


⑅ axios 服用方法

使用axios 前必須先載入他的套件。

這邊附上axios 的 github 、github 裡面有講到 axios 的各種用法

 

✧ 開始使用 axios

最簡單的方法:貼上cdn 就可以開始使用了~

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

  

✧ 圖解:向伺服器請求資料

當我們執行axios 時,就是在執行上面( 透過JS請求資料 )的箭頭。
https://ithelp.ithome.com.tw/upload/images/20201001/20129506AEL6kkkw8Y.png

⑅ 用 axios get 資料 !

⑅ axios . get 語法

axios.get('http:// 網址')
.then(function(res){
	console.log(res)
})

這邊函式括號中的 res 跟 forEach 括號裡的 item 一樣,你要打什麼參數名都ok 。
但比較常看到 response 或 res ,就是 回傳 的意思。

 

大家應該可以抓到一點感覺,翻成中文就是: axios . 取得 (網址) . 然後 ( 回傳資料 )

  • 網址:貼上你要取得的 資料的 網址。
  • res:伺服器回傳給你的資料 ( 物件格式 ) 。

 


⑅ axios 不過就是個物件

來分解看看 axios ,為什麼開頭說 JS 都是物件,axios 也不例外是個物件。

今天我們要取物件的値該怎麼取?

var cat = {
	name : 'miumiu' ,
	age : 10 ,
	kg : 4 ,
}

cat.name   // 'miumiu'

沒錯, 我們會用 物件名. 屬性 去取得値。
 

那這個 axios . get 不外乎就是 一個叫 axios 的物件 . 一個叫 get 的屬性

再近一步看 get ( url ) ,看到括號會想到 ... function 函式 !
所以說 get 這個屬性裡面裝的是一個函式。 所以他會長成像這樣:

var axios = {
  get : function(url){
		conosole.log(`我的網址是:${url}`)
	}
}

上面程式碼如果輸入 axios . get ( ' https://www.google.com ' ) 
console 結果就會得到  我的網址是 :https://www.google.com  

所以我們看到套件不需要感到害怕,它就只是個物件而已(U 'ᴗ' U)✧

 


⑅ 用 OPEN DATA 來練習使用 axios

⑅ 一樣用這個資料練習 ( ^ω^ )

記得要先引入axios 的 cdn !

let url = 'https://data.kcg.gov.tw/dataset/a98754a3-3446-4c9a-abfc-58dc49f2158c/resource/48d4dfc4-a4b2-44a5-bdec-70f9558cd25d/download/yopendata1070622opendatajson-1070622.json'
axios.get(url)
.then(function(res){
		console.log(res)
})

console.log ( res ) 可以得到以下結果:
https://ithelp.ithome.com.tw/upload/images/20201001/20129506lkLPwEavad.png

⑅ statusText 回傳 ok 就表示有成功撈到資料哩!

今天我們主要要撈的資料物件 會放在 data 裡面,因此我們也可以這樣寫:

axios.get(url)
.then(function(res.data){
		// 這才是我們真正要的値 !!!!
})

⑅ 如果今天我們撈的網址有錯誤 or 沒這筆資料就會跳紅色錯誤
https://ithelp.ithome.com.tw/upload/images/20201001/20129506kGBQCE0toI.png

  • status:200 ( 表示成功取得資料 )
  • status:404( 無此資料 )

撈資料時都會回傳status ,告訴你取得資料的結果。如果今天遇到其他奇奇怪怪的數字 google 一下應該都找得到!


⑅ 檢查資料能不能撈取的網站

我們在網路上找OPEN DATA 練習其實會發現,不是每一個網址都能撈得到
所以我們可以用「這個網站」來檢査資料能不能撈取。

在 Server 的 Remote URL 貼上你想撈取的網址 按 Send Request 就行哩 ♩♩

 

⑅ 成功
   可以在 XHR status 的地方看到他寫 200
https://ithelp.ithome.com.tw/upload/images/20201001/201295069wXQkSo8sj.png
 
⑅ 失敗
   XHR status 顯示 400
https://ithelp.ithome.com.tw/upload/images/20201001/20129506vuBWJ3GkUH.png

 

axios 的介紹到這邊 ₍ᐢ⑅• •⑅ᐢ₎

當然不是說學了axios 就不學 AJAX 辣
畢竟要依專案需求去看要用什麼請求方式 ♫

 

AJAX 的文章之後再來寫  じゃあね♡

 


୨୧(U 'ᴗ' U) SONYKO的 前端日文小教室 ♡

 

⑅ 開頭講的 axios 日本人念  阿哭西歐司。
⑅ AJAX 念 啊傑哭斯。

 

然後日本的賞月是月見( Tsu Ki Mi )
他們的中秋節是每年日本舊曆的8月15日。

會準備 月見糰子 和 芒草 來祭祀。阿好像沒有在吃月餅的。
 

以上豆知識 (U 'ᴗ' U)⑅
 

⑅ 今日の単語

音檔
(口誤:是第十八天)
 

 日本語   平仮名   中・英   羅馬拼音
 読み込み   よみこみ   讀取   Yo Mi Ko Mi
 ライブラリ      資料庫   Rai Bu Ra Ri
 取得   しゅとく   取得、撈取資料   Syu Toku
 通信を行う   つうしんをおこなう   進行連線、連接   Tsu Shin o O Ko Na U
 簡潔   かんけつ   簡潔的   Kan KeTsu

 
 
⑅ 句子翻譯

原文:
axios とは
HTTP通信を超簡単に行うことができるJavaScriptライブラリ。
HTTP通信と言うと用途がわかりづらいが、主にJSONの取得に利用されることが多い。

  • とは:OO是
  • JavaScriptライブラリ:JS資料庫
  • 用途がわかりづらい:用途較難理解
  • 主に:主要

中文:
axios 是什麼
是一個可以超簡易連接HTTP的JS資料庫。
說連接HTTP可能很難理解他的用途、但主要用在取得JSON格式資料較多。
 


上一篇
十七日目:JavaScript ES6 forEachノ章
下一篇
十九日目:JavaScript for迴圈 for文ノ章
系列文
JavaScript初心者ノ研究日記。30

尚未有邦友留言

立即登入留言