vue-resource的使用

• 安裝

npm i vue-resource --save-dev

• 引入

import Vueresource from 'vue-resource'

• 註冊

Vue.use(Vueresource)

• 使用

// 便捷方法
this.$http.get({url:'api/index', headers:{Authorization:'Basic Yxsdlfjui'}})
.them((data) => {
    // 請求成功
}, (error) => {
    // 請求失敗
})

// 底層方法
Vue.http({
    url:'api/index2',
    method: 'POST',
    data: {
        param: 1
    }
})
.then((data) => {
    // 請求成功
}, (error) => {
    // 請求失敗
})

• 便捷方法

便捷方法是對底層方法的封裝

this.$http.get(url,{data},{opation})

• 參數
  • url: 字符串, 請求地址
  • data: 對象或者字符串
  • opation: 對象, 傳入的對象來控制請求
• 返回的response對象
  • data(對象或者字符串): 服務器返回的數據, 已用JSON.parse解析
  • ok(布爾值): 當HTTP響應碼在200-299區間是true, 表示響應成功
  • status(數值): HTTP響應碼
  • statusText(字符串): HTTP響應狀態文本描述
  • headers(函數): 響應頭信息
• 返回Promise對象
  執行HTTP調用後會返回一個Promise對象, 該對象提供了then, catch, finally註冊回調函數

var promise = this.$http.post('api/index');
promise.this(function(response){
    // 成功回調
}, function(error){
    // 失敗回調
})

promise.catch(function(error){
    // 失敗回調
})
promise.finally(function(){
    // 失敗或者成功後都會執行此函數
})
// 全部回調函數的`this`都指向組件實例

• JSONP請求
  • 設置methos的值爲JSONP便可
  • this.$http.jsonp()也能夠
• 修改發給服務器端的數據類型

默認狀況下, 發送給服務器請求頭的Content-Type爲application/json

有時咱們須要將數據提交爲指定的類型

1 . 全局headers配置

Vue.http.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

2 . 實例配置

this.$http.post(
    'api/index',
    // 成功回調
    function(data, status, request) {
        if(status === 200) {
            // 成功
        }
    },
    // 實例配置
    {
        headers: {
            'Content-Type':'multipart/form-data'
        }
    }
)

實力配置優先於全局配置