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 保存文件到本地实现方法
Nov 29 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
Sea.JS知识总结
May 05 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
createObjectURL方法实现本地图片预览
Sep 30 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
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python解析树及树的遍历
2016/02/03 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
python中update的基本使用方法详解
2019/07/17 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
培训演讲稿范文
2014/01/12 职场文书
新领导上任欢迎词
2014/01/13 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
个人廉政承诺书
2015/04/28 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS