Vue.js vue-resource

1.安裝與引入

(1)在HTML文件中引入

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

(2)在腳手架中使用
安裝vue-resource

npm i vue-resource -S

在入口文件中引入

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

安裝引入以後會在vm對象和組件對象添加一個屬性$http

2.get方法

$http.get(url,option)
使用get傳遞參數時有2個方法：
(1)url拼接
(2)傳入配置對象,配置params屬性

<script>
export default {
    data(){
        return{
            baseUrl:"https://api.github.com/search/repositories",
        }
    },
    methods:{
        getMsg(){
            //拼接url傳遞參數
            var url = this.baseUrl + '?q=vue&sort=stars'
            this.$http.get(url).then(function(res){
                console.log(res)
            })
        },
        getMsg2(){
            //使用params傳遞參數
            var data = {q:'vue',sort:"stars"}
            this.$http.get(this.baseUrl,{params:data}).then(function(res){
                console.log(res)
            })
        },
    }
}
</script>

3.post方法

post 發送數據到後端，須要第三個參數 {emulateJSON:true}。
$http.post(url,objdata,{emulateJSON:true})

<script>
export default {
    data(){
        return{
            baseUrl:"https://api.github.com/search/repositories",
            baseUrl2:"http://127.0.0.1:4000/process_post",
        }
    },
    methods:{,
        postMsg(){
            var data = {q:'vue',sort:"stars"}
            this.$http.post(this.baseUrl2,data,{emulateJSON:true}).then(function(res){
                console.log(res)
            })
        },
    }
}
</script>

4.服務器返回的數據

服務器返回一個res對象，他有如下幾個屬性：
body：請求成功返回的數據
bodyText：請求成功返回的數據(字符串類型)
status：狀態碼 例如 200
statusText: 狀態碼文本信息 例如 "OK"
url：這次訪問的url
data：與body同樣

5.vue-resource 提供了 7 種請求 API(REST 風格)：

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

options 參數說明:
參數 | 類型 | 描述
-|-|-
url | string | 請求的目標URL |
body | object | 做爲請求體發送的數據 |
headers | object | 做爲請求頭部發送的頭部對象 |
params | object | 做爲URL參數的參數對象 |
method | string | HTTP方法 (例如GET，POST) |
timeout | number | 請求超時（單位：毫秒） (0表示永不超時) |
emulateJSON | boolean | 設置請求體的類型爲application/x-www-form-urlencoded |

向請求頭中添加token

<script>
export default {
    data(){
        return{
            baseUrl:"https://api.github.com/search/repositories",
            baseUrl2:"api/process_post",
        }
    },
    mounted(){
        window.localStorage.setItem("token","abcdefghijk")
    },
    methods:{
        getMsg(){
            //拼接url傳遞參數
            var url = this.baseUrl + '?q=vue&sort=stars'
            //將token添加到請求頭中
            this.$http.get(url,{headers:{"Authorization":window.localStorage.getItem("token")}}).then(function(res){
                console.log(res)
            })
        },
        getMsg2(){
            //使用params傳遞參數
            var data = {q:'vue',sort:"stars"}
            //將token添加到請求頭中
            this.$http.get(this.baseUrl,{params:data,headers:{"Authorization":window.localStorage.getItem("token")}}).then(function(res){
                console.log(res)
            })
        },
        postMsg(){
            var data = {q:'vue',sort:"stars"}
            //將token添加到請求頭中
            this.$http.post(this.baseUrl2,data,{headers:{"Authorization":window.localStorage.getItem("token")},emulateJSON:true}).then(function(res){
                console.log(res)
            })
        },
    }
}
</script>