betway必威-betway必威官方网站
做最好的网站

resource库发送请求获取数据,resource调用promise取数

用了好久的vue-resource,好像每一次使用的时候,都要去看一下上一次是怎么写的,具体的语法过不了多久又忘记了,甚至不知道其中的原理,只知道一些简单的使用,一会儿用ES6的语法,一会儿又用传统的语法,为了改变这种不良的习惯,并理清vue-resource使用promise取数据的原理,今天把这一块整理一下。

用了好久的vue-resource,好像每一次使用的时候,都要去看一下上一次是怎么写的,具体的语法过不了多久又忘记了,甚至不知道其中的原理,只知道一些简单的使用,一会儿用ES6的语法,一会儿又用传统的语法,为了改变这种不良的习惯,并理清vue-resource使用promise取数据的原理,今天把这一块整理一下。

数据获取 vue-resource

  • vue-resource
  • axios

单来说,vue-resource就像jQuery里的$.ajax,用来和后端交互数据的。可以放在created或者ready里面运行来获取或者更新数据...

先来说说 vue-resource

先来说说 vue-resource

vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。

vue-resource的优势和介绍,可以通过下面这个地址来了解。
Vue.js——vue-resource全攻略

vue-resource的API分别有以下这些:
http get
http jsonp
http post
http put
http delete
resource get
resource save
resource update
resource remove
inteceptor

我现在的工作中,常用的就是get和post。
引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。现在的项目中,基本上都是后者,因此在不同组件的beforeCreate或mounted钩子中取。

// 基于全局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);

在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。

vue-resource支持Promise API,Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。

vue-resource特点

vue-resource插件具有以下特点:

  1. 体积小
    vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。
  2. 支持主流的浏览器
    和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。
  3. 支持Promise API和URI Templates
    Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。
  4. 支持拦截器
    拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。拦截器在一些场景下会非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式。

vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。

再简单介绍一下Promise对象

ES6原生提供了Promise对象。所谓Promise对象,就是代表了未来某个将要发生的事件(通常是一个异步操作)。它的好处在于,有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象还提供了一整套完整的接口,使得可以更加容易地控制异步操作。Promise对象的概念的详细解释,请参考《JavaScript标准参考教程》。

ES6的Promise对象是一个构造函数,用来生成Promise实例。下面是Promise对象的基本用法。

var promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  // success
}, function(value) {
  // failure
});

vue-resource使用

1.引入vue-resource

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

vue-resource的优势和介绍,可以通过下面这个地址来了解。

下面我们来直接使用:

假如我们请求下面这个json文件:

// 请求成功
{
    "code": 0,
    "msg": "get member success",
    "content": {
        "plank_id": "1",
        "start_at": "1234567890",
        "status": "3",
        "members_num": 1,
        "members": [
            {
                "id": "14",
                "name": "",
                "avatar": "",
                "status": "3"
            }
        ]
    },
    "is_mobile_user": false,
    "jssdk": {
        "appId": "wxec4d172a4f73ee6f",
        "timestamp": "1490367697",
        "nonceStr": "58d534d1b536a",
        "signature": "d8d8ceb0f39ddeb3085fd197e5df5caddb1f1ba1"
    }
}

// 请求失败
{
  "code": 1,
  "msg": "错误信息",
  "content": "",
  "is_mobile_user": true,
  "jssdk": {
    "appId": "wxec4d172a4f73ee6f",
    "timestamp": "1487750749",
    "nonceStr": "58ad465dd5ba5",
    "signature": "4aa01f5a89ce79ee4c53249e0cdb84800f841004"
  }
}

基本语法

  • 引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。

// 基于全局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);

在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。

Vue.js——vue-resource全攻略

get 传统的写法

import {MessageBox} from 'mint-ui';
this.$http.get(dataUrl)
    .then(function (response) {   // 请求成功 
        let data = response.data;
        if (data.code === 0) {
            this.content = data.content;     // 取到数据
        } else {
            MessageBox('提示', data.msg);
        }
    }, function (response) {  // 请求失败 
        MessageBox('提示', response.data.msg);
    })

GET

  • 说明:发送JSONP的方式与get请求相同
const url = 'http://vue.studyit.io/api/getnewslist'
this.$http.get(url)
  .then(data => {
    console.log(data)
    console.log(data.body)
  })

vue-resource的API分别有以下这些:

get ES6的语法 直接用解构赋值和剪头函数的方式

import {MessageBox} from 'mint-ui';
this.$http.get(dataUrl)
    .then(({data:{code, content, jssdk, msg}}) => {   // 请求成功 
        if (data.code === 0) {
            this.content = content;     // 取到数据
        } else {
            MessageBox('提示', msg);
        }
    },  ({data:{msg}}) => {  // 请求失败 
        MessageBox('提示',msg);
    });

POST

// const url = 'http://182.254.146.100:8899/api/postcomment/17'
const url = 'http://vue.studyit.io/api/postcomment/17'
this.$http.post(url, {
  content: '完美!'
}, {
  emulateJSON: true
})
  .then(data => {
    console.log(data.body);
  })
  1. http get
  2. http jsonp
  3. http post
  4. http put
  5. http delete
  6. resource get
  7. resource save
  8. resource update
  9. resource remove
  10. inteceptor

post 传统的语法

let group_id = this.$route.params.id;
let data = {
      group_id: group_id,
      mobile: this.mobile,
      code: this.smsCode,
      name: this.memberName
};
import {MessageBox} from 'mint-ui';
this.$http.post(checkUrl, data)
    .then(function (response) { // 请求成功
        let data = response.data;
        if (data.code === 0) {
           this.content = data.content;   // 取到数据
        } else {
            MessageBox('提示', data.msg);
        }
}, function (response) {     // 请求失败
    MessageBox('提示', response.data.msg);
});

JSONP

const url = 'http://v.showji.com/Locating/showji.com2016234999234.aspx?m=13333333333&output=json&&timestamp='   (new Date() - 0)
this.$http.jsonp(url)
  .then(data => {
    console.log(data.body);
  })

我现在的工作中,常用的就是get和post。

post ES6的语法,直接用解构赋值和剪头函数的方式

let group_id = this.$route.params.id;
let data = {
      group_id: group_id,
      mobile: this.mobile,
      code: this.smsCode,
      name: this.memberName
};
import {MessageBox} from 'mint-ui';
this.$http.post(checkUrl, data)
    .then(({data:{code, content, jssdk, msg}}) => {   // 请求成功
        if (code === 0) {
           this.content = content;   // 取到数据
        } else {
            MessageBox('提示', msg);
        }
}, ({data:{msg}}) => {      // 请求失败
    MessageBox('提示',msg);
});

使用解构赋值和剪头函数可以让代码更简洁,使用起来更方便,我们在{data:{code, content, jssdk, msg}}中的数据,实际上是JS引擎把promise给你的参数结构了,因此,你可以直接取到。
需要注意的是,第一个“MessageBox('提示', msg);”中的msg和第二个“MessageBox('提示',msg);”中的msg不是同一个,第一个是成功的msg,第二个是失败的msg。

引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。现在的项目中,基本上都是后者,因此在不同组件的beforeCreate或mounted钩子中取。

将post请求方式改成get请求方式的语法(一)

拼接一个参数:

const checkUrl = 'plank-show/start?start_at='   (new Date()).valueOf();
this.$http.get(checkUrl)
     .then(({data:{code, content, jssdk, msg}}) => {
          if (code == 0) {
               MessageBox('提示', msg);
          } else {
               MessageBox('提示', msg);
         }
    }, ({data:{msg}}) => {
         MessageBox('提示', msg);
   });
// 基于全局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);

将post请求方式改成get请求方式的语法(二)

拼接多个参数:

let queryData = this.$route.query;
let dataUrl = "member/coach?group_id="   queryData.my_group_id   "&id="   queryData.cheer_id;
this.$http.get(dataUrl)
      .then(({data:{code, content, jssdk, msg}}) => {
          if (code === 0) {
               this.content = content;
          } else {
               MessageBox('提示', msg)
          }
     }, ({data:{msg}}) => {
           MessageBox('提示', msg);
     });

以上这些,基本上够我现在在项目中使用,使用多次之后,会发现将 vue-resource、promise、ES6语法结合使用,真的很简单很清淅,在以后的工作中,如果遇到了其他的需求,再补上整理后内容。

在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。

vue-resource支持Promise API,Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。

再简单介绍一下Promise对象

本文由betway必威发布于网页设计,转载请注明出处:resource库发送请求获取数据,resource调用promise取数

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。