Vue.js——vue-resource

vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。

vue-resource使用

引入  npm install vue-resource -s

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

支持的HTTP方法

• 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对象

　　发送请求时的options选项对象包含以下属性：

参数	类型	描述
url	string	请求的URL
method	string	请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body	Object, FormDatastring	request body
params	Object	请求的URL参数对象
headers	Object	request header
timeout	number	单位为毫秒的请求超时时间 (0 表示无超时时间)
before	function(request)	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	function(event)	ProgressEvent回调处理函数
credentials	boolean	表示跨域请求时是否需要使用凭证
emulateHTTP	boolean	发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON	boolean	将request body以application/x-www-form-urlencodedcontent type发送

封装

2中封装方式择期所爱，自己写的封装，如果有问题，稍作修改

request(url,method,param) {
        let options = {
            url:url,
            method:method
        }
        let meArr = ['post','put','patch'];
        if(param){
            meArr.some(el =>el === method.toLowerCase()) ? options.body = param : options.params = param
        }
        return Vue.http(options)
    },

postRequest(url,data,callback) {
        return new Promise((resolve,reject)=>{
            Vue.http.post(
                url,
                data,
                {emulateJSON: true}
            )
            .then(callback)
            .catch((err)=>{
                reject(err)
            })
        })
    }

示例

import http from '../../common/response.js'

logo: function () {
      let loginUser = {
        name: this.login.name,
        pwd: this.login.pwd,
        text: this.login.text
      }
      let url = 'xxxx';
      http.request(url,'POST',loginUser).then(res=>{
        console.log(res)
      })
      .catch(err=>{
        console.log(err)
      })
    }