vue中promise的使用及异步请求数据的方法


Posted in Javascript onNovember 08, 2018

下面给大家介绍vue中promise的使用

promise是处理异步的利器,在之前的文章《ES6之promise》中,我详细介绍了promise的使用, 在文章《js动画实现&&回调地狱&&promise》中也提到了promise的then的链式调用, 这篇文章主要是介绍在实际项目中关于异步我遇到的一些问题以及解决方法,由此来加深对promise的进一步理解。

背景

进入商品页,商品页的左侧是分类,右侧是具体的商品,一旦进入商品页,就把所有分类的商品请求出来,注意: 必须要按照顺序。

实现思路

在商品页, created 钩子函数触发获取分类的http请求,请求到结果后,开始请求所有的具体商品并渲染。

遇到的问题

•由于请求商品分类是异步的, 怎么判断异步请求完成, 也就是说请求具体商品的时机是什么时候。
•获取到所有的商品必须发送请求,请求时异步的,怎么保证能够按照顺序获取到。

解决问题 --- 问题一

针对问题一,最好的方式还是使用promise,大致实现如下:

getClassify: function () {
 var that = this;
 // 使用promise处理异步。
 this.updateKinds().then(function () {
  console.log("获取分类结束!");
  that.updateAllContent();
 });
 },

其中getClassify是在created时就会调用的,而updateKinds是actions中的方法,我们先看看actions中是怎么写的:

updateKinds ({commit, state}) {
 return new Promise(function (resolve, reject) {
 axios.get('/bbg/shop/get_classify', {
  params: {
  sid: 13729792
  } 
 })
 .then(function (response) {
  if (response.data.code == 130) {
  commit(UPDATE_KINDS, response.data.data)
  console.log(response.data.data);
  resolve()
  }
 }).catch(function (error) {
  console.log(error);
 });
 });

即返回一个promise,当请求到数据,并且commit之后,我们就额可以resolve()了,这样,就可以在then中执行获取所有内容的方法了。

虽然实现起来比较简单,但是这个思想更好。

解决问题 --- 问题二

在问题一中,我们看到resolve之后就可以调用updateAllContent() 了,那么这个应该怎么写呢?

首先可以确定的是: 因为需要请求的分类不只一个,所以要使用promise, 并且一定要返回一个promise,这样才能继续链式调用,其中一部分如下:

ar items = state.items;
 function getItemPromise(id) {
 return new Promise(function (resolve, reject) {
  var content = {
  "isSingle": 1,
  "sbid": 13729792,
  "catalog3": id,
  "offset": 0,
  "pageSize": 10
  };
  axios.post('/bbg/goods/get_goods_list_wechat', qs.stringify({"data": JSON.stringify(content)}))
  .then(function (response) {
  if (response.data.code == 626) {
  for (let i = 0; i < response.data.data.length; i++) {
  commit(UPDATE_ALL_CONTENT, response.data.data[i]);
  }
  resolve();
  }
  }).catch(function (error) {
  console.log(error);
  });
 });
 }

即调用这个函数,传入一个分类的id,然后就可以发送请求了,获取到数据之后,就把数据插入到 内容的数组中, 最后resolve()还告诉then可以执行了。

  注意: 如何更新一个数组呢?

[UPDATE_ALL_CONTENT] (state, item) {
 state.contentItems = [...state.contentItems, Object.assign({}, item)];
 },

这样就相当于push了。

 上面的这个函数的意义在于封装请求,那么对于请求多个时,如何做到呢?

  我之前尝试了下面两种方法:

FIRST

// first method
 var promise = getItemPromise(items[0].id)
 for (let j = 1; j < items.length; j++) {
 promise.then(function () {
  return getItemPromise(items[j].id);
 })
 }

 思路就是先请求第一个分类,然后循环,实际上和下面的效果是一样的:

var promise = getItemPromise(items[0].id);
 promise.then(function () {
 console.log("1", window.performance.now());
 return getItemPromise(items[1].id);
 });
 promise.then(function () {
 console.log("2", window.performance.now());
 return getItemPromise(items[2].id);
 });
 promise.then(function () {
 console.log("3", window.performance.now());
 return getItemPromise(items[3].id);
 });
 promise.then(function () {
 console.log("4", window.performance.now());
 return getItemPromise(items[4].id);
 });
 promise.then(function () {
 console.log("5", window.performance.now());
 return getItemPromise(items[5].id);
 });
 promise.then(function () {
 console.log("6", window.performance.now());
 return getItemPromise(items[6].id);
 });

问题: 通过这样的方法最终请求的数据是可以请求到的,但是顺序并没有按照我们预想的思路来执行,因为这样的执行方式会在getItemPromise执行之后就立即同时执行后面几个then,所以最终得到的顺序是不能确定的。

方法二:

// second method
 var somePromise = getItemPromise(items[0].id);
 for (let k = 1; k < items.length; k++) {
  somePromise = somePromise.then(function () {
  return getItemPromise(items[k].id);
 });
 }

 这种方法的结构类似于下面这样:

getItemPromise(items[0].id)
 .then(function () {
 console.log("1", window.performance.now());
 return getItemPromise(items[1].id);
 })
 .then(function () {
 console.log("2", window.performance.now());

 return getItemPromise(items[2].id);
 })
 .then(function () {
 console.log("3", window.performance.now());

 return getItemPromise(items[3].id);
 })
 .then(function () {
 console.log("4", window.performance.now());

 return getItemPromise(items[4].id);
 })
 .then(function () {
 console.log("5", window.performance.now());

 return getItemPromise(items[5].id);
 })
 .then(function () {
 console.log("6", window.performance.now());

 return getItemPromise(items[6].id);
 })
 .then(function () {
 console.log("7", window.performance.now());

 return getItemPromise(items[7].id);
 })
 .then(function () {
 return getItemPromise(items[8].id);
 })
 .then(function () {
 return getItemPromise(items[9].id);
 })
 .then(function () {
 return getItemPromise(items[10].id);
 })
 .then(function () {
 return getItemPromise(items[11].id);
 })

这样请求得到的顺序就是相同的了。 但是通过for循环,不论分类有多少,我们都可以请求到。

也就是说,通过链式调用的方式,即.then().then()这样才会在一个异步执行完之后执行下一个,值得注意。

下面看下vue 中promise 异步请求数据的方法

export function getTypes(type) {
 return listDictItems({ code: type }).then((res) => {
 if (res.code == 200) {
  let list = res.body;
  // console.log('list',list);
  return list;
 }
 })
};

组件中:

getTypes('EP_TYPE').then((data) => {console.log('data',data)});//成功

总结

以上所述是小编给大家介绍的vue中promise的使用及异步请求数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 #Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 #Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 #Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 #jQuery
基于React Native 0.52实现轮播图效果
Aug 25 #Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 #Javascript
微信小程序列表中item左滑删除功能
Nov 07 #Javascript
You might like
php学习笔记之面向对象编程
2012/12/29 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
载入进度条 效果
2006/07/08 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
对Django外键关系的描述
2019/07/26 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
简单了解python协程的相关知识
2019/08/31 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
《七颗钻石》教学反思
2014/02/28 职场文书
初三班主任寄语大全
2014/04/04 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
师德师风演讲稿
2014/05/05 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
南京南京观后感
2015/06/02 职场文书
学术会议开幕词
2016/03/03 职场文书
竞聘书的秘诀
2019/04/02 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python