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 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
jQuery的框架介绍
May 11 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 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 定界符格式引起的错误
2011/05/24 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
DOM 事件流详解
2015/01/20 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
python中快速进行多个字符替换的方法小结
2016/12/15 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
七年级生物教学反思
2014/01/30 职场文书
班长自荐书范文
2014/02/11 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
预备党员入党感言
2015/08/01 职场文书