1.引入vue-resource

  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-resource-1.3.4.js"></script>

注意：vue-resource依赖于 Vue，所以vue-resource一定要在Vue的后面。

方法列表：

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

选项：

参数类型描述
urlstring请求的目标URL
bodyObject, FormData, string作为请求体发送的数据
headersObject作为请求头部发送的头部对象
paramsObject作为URL参数的参数对象
methodstringHTTP方法 (例如GET，POST，...)
timeoutnumber请求超时（单位：毫秒） (0表示永不超时)
beforefunction(request)在请求发送之前修改请求的回调函数
progressfunction(event)用于处理上传进度的回调函数 ProgressEvent
credentialsboolean是否需要出示用于跨站点请求的凭据
emulateHTTPboolean是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT，PATCH和DELETE请求。
emulateJSONboolean设置请求体的类型为application/x-www-form-urlencoded

响应：

通过如下属性和方法处理一个请求获取到的响应对象：

属性类型描述
urlstring响应的URL源
bodyObject, Blob, string响应体数据
headersHeader请求头部对象
okboolean当HTTP响应码为200到299之间的数值时该值为true
statusnumberHTTP响应吗
statusTextstringHTTP响应状态
方法类型描述
text()约定值以字符串方式返回响应体
json()约定值以格式化后的json对象方式返回响应体
blob()约定值以二进制Blob对象方式返回响应体

例子：
get请求：

this.$http.get('/get').then(function (result) {
            // 通过 result.body 拿到服务器返回的成功的数据
            // console.log(result.body)
          })

post请求：

this.$http.post('/post', {}, { emulateJSON: true }).then(result => {
            console.log(result.body)
          })

注意：通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式

JSON请求

this.$http.jsonp('/jsonp').then(result => {
            console.log(result.body)
          })

标签: Vuejs

添加新评论