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到底是甚麼?

API

Goolgle 上面說API是要叫做應用程式介面，mmm...甚麼鬼XDXD

API 其實是一個應用程式之間的郵差，舉個例子:
今天假設你是一個金牌特務，當你接收到總部的消息時候就要去出任務了，今天每當總部接受到有壞份子時候就會 --> 傳請求協助的指令給你 --> 然後你收到這個指令之後 --> 出任務

這個例子裏面，傳出請求協助的這個指令就是API，當特務收到總部的需求，就會出任務。而出任務就是你想要的結果。

HTTP

HTTP 是一種 protocol，也就是一種對於要求跟回應的規範、協定。

舉個例子，當我們今天要從client(你的電腦上)點選Google Chrome，接下來他就會傳送一個要求 (要求看到Google Page) 到Google 的server，Google伺服器拿到他這個想看網頁的請求之後，就會回傳Google Home Page (HTML)給我。

在client & Server 這一來一往的發送要求+接受要求的規範，就是我們的HTTP本人啦!!

GET

當我今天發送的請求是要獲得資料，就是一個GET

POST

如果今天我這個請求有包含新增資料，就會是POST

vue-resource

這是一個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
  });

七大API

在vue-resource裡面除了 GET，POST之外，還有其他五個不太常用但也很重要的API methods

1. get(url, [config])
2. post(url, [body], [config])
3. head(url, [config])
4. delete(url, [config])
5. jsonp(url, [config])
6. put(url, [body], [config])
7. patch(url, [body], [config])

url: 就是定義Request要送到哪裡~
   body: 就是要傳送出去的data
   config: 一些vue-resource提供的功能

POST 在我們專案的例子

剛剛給了很多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也好!

最後~ 大家周末愉快