ChingFeng
Sep 9, 2018 · 2 min read

VueJs Ajax篇-Axios(一)

Request Data

►Axios小幫手(https://github.com/axios/axios

透過axios套件取得JSON格式資料

語法:

axios.[Http動作]('url')
.then(function (response) {
成功執行區塊
})
.catch(function (error) {
發生錯誤區塊
})
.then(function () {
成功或失敗執行區塊
});
Http動作:
1.get
2.post
3.put
4.delete

►資料產生區(http://api.adviceslip.com/

透過api.adviceslip網站提供的Random advice API取得資料展示

◉應用

=【Html】=
— — — — — — — — — — — —
<div id="app">
<h2>Advice of the day</h2>
<p>{{advice}}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
— — — — — — — — — — — —
=【VueJs】=
— — — — — — — — — — — —
new Vue({
el: '#app',
data:{
advice: 'loading...'
},
created(){
axios.get('http://api.adviceslip.com/advice')
.then(response => {
this.advice = response.data.slip.advice
})
.catch(error => {
this.advice = 'There was an error: ' + error.message
})
}
});

Object實戰

學習歷程紀錄

ChingFeng

Written by

叢林般的世界,一步步邁向未知的未來,迴盪迷途的工程師…

Object實戰

學習歷程紀錄

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade