Vue-resource使用基础

vue-resource

如同jQuery里的$.ajax，用来和后端交互数据的。可以放在created或者ready里面运行来获取或者更新数据…

安装

在项目路径中使用如下命令进行安装

npm install vue-resource --save

引入

main.js中引入

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

Git传送门：https://github.com/pagekit/vue-resource/blob/master/README.md

文档传送门：http://www.doc00.com/doc/1001004eg

HTTP

一个vue实例提供this.$http服务发送http请求，请求方法的调用会返回一个响应进行处理。vue实例会自动绑定到该实例所有的函数回调上。

http方法传送门：https://github.com/pagekit/vue-resource/blob/master/docs/http.md

vue-resource的http服务可以在全局使用Vue.http或者在一个vue实例中使用this.$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])

使用例子：

POST方式

//新增数据操作
var data = vm.news;

this.$http.post(API.rootPath + "/news", data, {emulateJSON: false}).then((response) => {
  //console.log(response.body);
  if(response.body.status == 0) {
      vm.$message({
          message: '保存成功',
          type: 'success'
      });
      vm.diaAddStatus = false;

      this.initData();
  } else {
       vm.$message.error('保存失败');
  }
});

GET方式

//获取列表操作
this.loading = true;
this.$http.get(API.rootPath + "/news", {
  params: {
    offset: this.limit*(this.currentPage - 1), 
    limit: this.limit,
    searchKey: this.searchKey
  }
}).then((response)=>{
    if(response.body.status == 0) {
        if(response.body.data != null) {
            console.log(response.body.data);
            this.tableData = response.body.data.rows;
            this.total = response.body.data.total;
            //分割tags标签
        //   this.dynamicTags = this.company.tags.split(","); 

            this.loading = false;
        } else {
                this.$message({
                message: '没有数据',
                type: 'warning'
            });
        }
    }
});

DELETE方式

//删除数据的操作

this.$confirm('您确认要删除吗？')
.then(_ => {
    var vm = this;
    //查询出指定id的product，然后进入修改页面
    this.$http.delete(API.rootPath + "/news/" + id).then((response) => {
        console.log(response.body);
        if(response.body.status == 0) {
            this.$message({
                message: '删除成功',
                type: 'success'
            });
            this.initData();
        } else {
            this.$message.error('删除失败');
        }
    });                     
    done();
})
.catch(_ => {});

PUT方式

//冻结用户(修改用户状态)的函数操作

this.$confirm('要冻结此用户?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
}).then(() => {

    this.$http.put(API.users + "/" + id, {}, {params:{isActive: "-1"}, emulateJSON: true}).then((response) => {

        //返回值是0的时候表示成功,重新加载数据
        if(response.body.status == 0) {
            this.loadData();
        }
    }, (response) => {
        // error callback
    }); 
}).catch(() => {
    this.$message({
        type: 'info',
        message: '已取消'
    });
});

拦截器Interceptors

Interceptors能够在全局定义，用来在请求发送前对请求进行一些预处理。如果请求使用this.$http或this.$resource发送，则当前vue实例能够在拦截器中回调。

如下例子：

请求处理

Vue.http.interceptors.push(function(request, next) {

  // modify method
  request.method = 'POST';

  // modify headers
  request.headers.set('X-CSRF-TOKEN', 'TOKEN');
  request.headers.set('Authorization', 'Bearer TOKEN');

  // continue to next interceptor
  next();
});

请求和响应一块处理

Vue.http.interceptors.push(function(request, next) {

  // modify request
  request.method = 'POST';

  // continue to next interceptor
  next(function(response) {

    // modify response
    response.body = '...';

  });
});

返回一个响应并且组织请求发送

Vue.http.interceptors.push(function(request, next) {

  // modify request ...

  // stop and return response
  next(request.respondWith(body, {
    status: 404,
    statusText: 'Not found'
  }));
});

覆盖默认拦截器

所有的默认拦截器回调都能够覆写，去改变他们的行为。所有拦截器通过Vue.http.interceptor对象提供给外部，这些方法有：before, method, jsonp, json, form, header and cors.

Vue.http.interceptor.before = function(request, next) {

  // override before interceptor

  next();
};