[Vue.js] 安裝axios對後端傳送Request (GET/POST/PUT/DELETE)

安裝指令

npm install axios

使用方式

import axios from 'axios'
// use axios in your project
// ...

1. GET

[URL] 字串、API位址
[HEADER] dict，例如：{'Content-Type': 'multipart/form-data'}。
[PARAM] dict，例如：{'id': '1'}，等同於?id=1。

axios.post('[URL]', {headers:[HEADER], params: [PARAM]})
    .then(response => {
        console.log(response);
    })
    .catch(err => {
        console.log(err.response);
    });

2. POST

[DATA] 資料

axios.get('[URL]', [DATA], {headers:[HEADER]})
    .then(response => {
        console.log(response);
    })
    .catch(err => {
        console.log(err.response);
    });

3. PUT

格式與post相同

axios.put('[URL]', [DATA], {headers:[HEADER]})
    .then(response => {
        console.log(response);
    })
    .catch(err => {
        console.log(err.response);
    });

4. DELETE

axios.delete('[URL]', {headers:[HEADER], data:[DATA]})
    .then(response => {
        console.log(response);
    })
    .catch(err => {
        console.log(err.response);
    });

與 vue-resource 比較不同的是error handling，API回應中通常包含http_statsu、body、data等，success handling回傳的就是標準的回應，但error handling放在response這個key裡面。舉例要取得http_status，在success handling裡是response[http_status]，但error handling是err.response[http_status]。