vue-resource调用promise取数据方式详解


Posted in Javascript onJuly 21, 2017

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

先来说说 vue-resource

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

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

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

  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

我现在的工作中,常用的就是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对象用于异步计算。

再简单介绍一下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
});

下面我们来直接使用:

假如我们请求下面这个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"
 }
}

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 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 传统的语法

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);
});

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。

将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);
  });

将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语法结合使用,真的很简单很清淅,在以后的工作中,如果遇到了其他的需求,再补上整理后内容。

希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
vue.js学习之递归组件
Dec 13 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 #Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 #Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 #Javascript
VUE中使用Vue-resource完成交互
Jul 21 #Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 #Javascript
js图片轮播插件的封装
Jul 21 #Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 #Javascript
You might like
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
Javascript 对象的解释
2008/11/24 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
Zabbix实现微信报警功能
2016/10/09 Python
Python检测生僻字的实现方法
2016/10/23 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
给老师的检讨书
2014/02/11 职场文书
太太口服液广告词
2014/03/20 职场文书
教师考核评语
2014/04/28 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2014年纪委工作总结
2014/12/05 职场文书
护士节慰问信
2015/02/15 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
MySQL学习之基础操作总结
2022/03/19 MySQL