全国咨询热线:18720358503

公众号抽奖小程序制作_vue中promise的使用及异步请

类别:企业动态 发布时间:2021-01-08 浏览人次:

vue中promise的使用及异步请求数据的方法     Zhu   这篇文章主要介绍了vue中promise的使用及异步请求数据的方法,文章给大家较详细的介绍了遇到的问题及解决方法,需要的朋友可以参考下

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

promise是处理异步的利器,在之前的文章中,我详细介绍了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: 
 .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,mit之后,我们就额可以resolve()了,这样,就可以在then中执行获取所有内容的方法了。

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

解决问题 --- 问题二

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

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

ar items = state.items;
 function getItemPromise(id) {
 return new Promise(function (resolve, reject) {
 var content = {
 "isSingle": 1,
 "sbid": ,
 "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的使用及异步请求数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


推荐阅读

公众号抽奖小程序制作_vue中promise的使用及异步请

vue中promise的应用及多线程恳求数据信息的方式 Zhu 下边给大伙儿详细介绍vue中promise的应用情况进到产品页,产品页的左边是归类,右边是实际的产品,一旦进到产品页,就把全部...

2021-01-08
微信小程序有多火_详解Angular中完成自界说组件的

详细说明Angular中完成自定部件的双重关联的二种方式 本文关键详细介绍了详细说明Angular中完成自定部件的双重关联的二种方式,对大伙儿的学习培训或是工作中具备一定的参照学...

2021-01-08
广州凡科互联网科技股份有限公司招聘销售代表

招聘人数:26职位信息1、利用电话进行公司产品的销售及推广; 2、负责公司产品信息的发布; 3、通过电话进行渠道开发和业务拓展; 4、按时完成销售任务。 ...

2021-01-08
广州凡科互联网科技股份有限公司招聘学习顾问

招聘人数:13职位信息【岗位职责】 1、按照校区招生目标,完成或超额完成个人招生计划; 2、负责学生、家长关于教育方面的咨询工作,并根据客户的需求提供专业的课程咨询和...

2021-01-08
广州凡科互联网科技股份有限公司招聘教务专员

招聘人数:4职位信息【主要工作内容】:1、负责校区的教学管理和服务;2、解决学员在学习过程中的问题;3、进行部分职业素质课程的讲授;4、进行毕业学员的就业回访和就业推荐工...

2021-01-08
广州凡科互联网科技股份有限公司招聘翻译专员

招聘人数:16职位信息岗位职责:1、负责日常俄语资料的审核及翻译,保证资料及翻译质量;2、海外代理商的日常管理与关系维护;3、监管代理商的服务质量,促进代理商业务,完成业...

2021-01-07
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信