axios是甚麼?

axios是一個套件可以用來簡化XMLHttpRequest的一個套件

以下是XMLHttpRequest取的資料的範例

let xhr = new XMLHttpRequest()
xhr.open('get','[取得資料的網址](https://hexschool.github.io/ajaxHomework/data.json)',true)
xhr.sned(null)
xhr.onload = functoin(){
console.log(xhr.responseText)
}

XMLHttpRequest範例
一共使用了6行程式碼

接著來看看axios

axios.get('https://hexschool.github.io/ajaxHomework/data.json').
then(function(response){console.log(response.data)
})

一共使用了3行程式碼就把東西給撈回來
axios範例

要如何使用axios呢?

推薦使用axios的cdn，不用安裝而且使用快速

axios套件連接

1.點選上面的連結後
複製有CDN的任意一行程式碼如下圖

2.把程式碼貼到
自己的js載入前如下圖

3.用chrom打開載入axios的網頁，按f12，點選console後輸入console.log(axios);如果由成功載入就會出現如下圖的內容。

非同步觀念

先看看下面撈資料並用console.log()顯示資料的範例

let result ='';
axios.get('https://hexschool.github.io/ajaxHomework/data.json').
then(function(response){console.log(response.data[0].name+'撈回來的資料')
result = response.data[0].name
})
 
console.log(result+'result內的資料')

axios非同步範

結果如下圖

會發現怎麼明明有撈到資料，為甚麼result會沒資料

原因是axios在執行的時候需要等待伺服器回傳資料，這個時候就會繼續往下執行程式碼，因為往下執行程式碼的時候資料來沒撈回來，所以result自然是空的

要如何處理非同步呢?

那該怎麼辦呢??可以使用以下範例解決

let result ='';
axios.get('https://hexschool.github.io/ajaxHomework/data.json').
then(function(response){console.log(response.data[0].name+'撈回來的資料')
result = response.data[0].name
renderData()
})
 
function renderData(){
console.log(result+'result內的資料')
}

結果如下圖

另外寫一個函式，先註冊在chorm中，等到資料撈回來的時候再呼叫函式執行，就可處理非同步的問題了

人生幹話-偷吃不擦嘴的老闆愛將

那位出差的熱心幹部後來怎麼了嗎?有到美國去嗎?結果是出差期間蒐集多餘的發票報帳，虛報公帳，剛開始他仗著他是老闆愛將這一點對他給的發票不會查細項，後來膽子就大了，被發現的原因是每次出差的時間、住宿地點行程都是固定的，但是花費卻越來越多甚至後期的出差費用是初期出差的2-3倍，會計發現的問題之後才把以前的發票一張張對，從發票來看，幹部的一餐都吃了兩份食物、同一時段住了兩個房間與租兩輛車，什麼東西都是雙倍，當然有鬼阿。老闆想要放過這件事情各種幫找理由，說應該是要招待客人才會有兩倍的花費，最後財務經理說了用來報公帳的發票中有大量育嬰用品的發票才讓老闆無法護航下去。據說後來美國分公司雇用了一個生技大佬，不過那個大佬幹了半年就離職了，離職信的最後是重複了三次，生物技術的發展的基石是誠信，看到離職信的截圖我笑翻。