HTTP Request 一直以來都是一個很大的課題,他也牽扯到了API的概念,所以這篇基本上我們就要好好聊聊API是甚麼? Vue 要怎麼用到HTTP request?
其實我必須要跟大家說聲抱歉,我在https://ithelp.ithome.com.tw/articles/10236817 這篇時其實就有用到了HTTP Request的東西:
this.$http
.get("http://jsonplaceholder.typicode.com/posts")
.then(function(data) {
this.blogs = data.body.slice(0, 10);
});
能使用get
, post
就是因為我們有一個plugin 叫做vue-resorce。ㄟ不對啊?我們有裝過嗎? 不相信的話可以打開你的 main.js
:
import VueResource from "vue-resource";
Vue.use(VueResource);
答對,我之前有跟各位說到要這樣寫,但是沒有好好介紹這是甚麼XD。在這之前,我們先來了解一下API到底是甚麼?
Goolgle 上面說API是要叫做應用程式介面,mmm...甚麼鬼XDXD
API 其實是一個應用程式之間的郵差,舉個例子:
今天假設你是一個金牌特務,當你接收到總部的消息時候就要去出任務了,今天每當總部接受到有壞份子時候就會 --> 傳請求協助的指令給你 --> 然後你收到這個指令之後 --> 出任務
這個例子裏面,傳出請求協助的這個指令就是API,當特務收到總部的需求,就會出任務。而出任務就是你想要的結果。
HTTP 是一種 protocol,也就是一種對於要求跟回應的規範、協定。
舉個例子,當我們今天要從client(你的電腦上)點選Google Chrome,接下來他就會傳送一個要求 (要求看到Google Page) 到Google 的server,Google伺服器拿到他這個想看網頁的請求之後,就會回傳Google Home Page (HTML)給我。
在client & Server 這一來一往的發送要求+接受要求的規範,就是我們的HTTP本人啦!!
當我今天發送的請求是要獲得資料,就是一個GET
如果今天我這個請求有包含新增資料,就會是POST
這是一個Vue的HTTP插件,跟很多人會用到的ajax是一樣的,下載的方法非常簡單 (也是要用npm)
// https://github.com/pagekit/vue-resource
npm install vue-resource
然後你要在 src/main.js 裡面去import這個新的dependency
import VueResource from 'vue-resource'
Vue.use(VueResource)
接下來你就可以用到最基本的 GET,POST功能~
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// get body data
this.someData = response.body;
}, response => {
// error callback
});
在vue-resource裡面除了 GET,POST之外,還有其他五個不太常用但也很重要的API methods
get(url, [config])
post(url, [body], [config])
head(url, [config])
delete(url, [config])
jsonp(url, [config])
put(url, [body], [config])
patch(url, [body], [config])
url
: 就是定義Request要送到哪裡~body
: 就是要傳送出去的dataconfig
: 一些vue-resource提供的功能剛剛給了很多GET 例子,我們之前從外部資源拿那些blogs array也是用到GET Request達到的,(可以回去看一下code是不是比較有概念了?)。 那這邊我們可以就來舉一個POST的案例~
我們今天假設要能在部落格裡面發表文章,那我們要把文章發表之後儲存到database資料庫裡面,就會用到POST這個API請求!
post: function(){
this.$http.post('https://firebaseio.com/posts.json', this.blog).then(function(data){
this.submitted = true;
});
}
url
: 就是那串網址,代表他要POST到哪裡 (這邊指向一個firebase)
this.blog
: 就是你要新增上傳的POST (儲存在data(){blog: }裡面)
今天講到的這個POST,之後會應用在一個page叫做 AddBlog.vue裡面,所以先知道一下甚麼是API, HTTP, POST, GET也好!
最後~ 大家周末愉快