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 版本]
Mar 20 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
JS实现星星海特效
Dec 24 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
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中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
Python对文件操作知识汇总
2016/05/15 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Python同时处理多个异常的方法
2020/07/28 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
工程管理专业毕业生自荐信
2014/01/24 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python