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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
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
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php自定义分页类完整实例
2015/12/25 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
django中模板的html自动转意方法
2018/05/27 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
python 调用js的四种方式
2021/04/11 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python