Vue中的vue-resource示例详解

什么是vue-resource

vue-resource是一个Vue.js插件，用于通过XHR实用RESTful API。

安装和引用

安装：

npm install vue-resource --save

引用：

import VueResource from 'vue-resource'
Vue.use(VueResource)

基本示例

需要在Vue实例中引用this.$http，下面是一个获取数据的简单示例：

methods: {
  fetchData () {
    this.$http.get('/api/data')
      .then(response => {
        // success callback
      }, response => {
        // error callback
      })
  }
}

其中，.get()是请求的方法，/api/data是请求的URL。

带参数示例

我们可以在get请求中带上参数，下面例如在获取用户列表时带上分页参数：

methods: {
  fetchList (page) {
    this.$http.get(`/api/list?page=${page}`)
      .then(response => {
        // success callback
      }, response => {
        // error callback
      })
  }
}

带Header示例

我们可以为请求设置Header，如下例中为请求添加JWT Token：

methods: {
  fetchDataWithHeader () {
    this.$http.get('/api/data', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })
      .then(response => {
        // success callback
      }, response => {
        // error callback
      })
  }
}

post请求示例

发送post请求可以使用this.$http.post()方法，如下示例：

methods: {
  postData () {
    this.$http.post('/api/data', {
      name: 'test',
      age: 18
    })
      .then(response => {
        // success callback
      }, response => {
        // error callback
      })
  }
}

全局设置

我们可以在Vue实例中设置全局Header、Url等配置，在每个请求中都生效，示例如下：

Vue.http.options.root = 'https://www.example.com/api'
Vue.http.headers.common['Authorization'] = `Bearer ${token}`

全局配置中，设置了API的根路径和JWT Token Header。

至此，我们简单介绍了vue-resource的使用方法和示例，希望对您有所帮助。