vue-rsource的使用

  • 安装

    1
    npm i vue-resource --save-dev
  • 引入

    1
    import Vueresource from 'vue-resource'
  • 注册

    1
    Vue.use(Vueresource)
  • 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 便捷方法
    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注册回调函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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-Typeapplication/json

有时我们需要将数据提交为指定的类型

  1. 全局headers配置

    1
    Vue.http.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  2. 实例配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    this.$http.post(
    'api/index',
    // 成功回调
    function(data, status, request) {
    if(status === 200) {
    // 成功
    }
    },
    // 实例配置
    {
    headers: {
    'Content-Type':'multipart/form-data'
    }
    }
    )

实力配置优先于全局配置

坚持原创技术分享,您的支持将鼓励我继续创作!