介绍, getClassify:, function (), {=,var that ;//大敌;使用承诺处理异步。
,this.updateKinds(),然后(function (), {
console.log才能(“获取分类结束!“);
that.updateAllContent才能();
,});
}, updateKinds ({提交,状态}),{
,return new 承诺(function (解决,,拒绝),{
,axios.get(& # 39;/广播/商店/get_classify& # 39;,, {
参数才能:{
,,席德:13729792
,,},
,})
,不要犹豫(function (响应),{
if 才能;(response.data.code ==, 130), {
提交才能(UPDATE_KINDS, response.data.data)
console.log才能(response.data.data);
解决()才能
,,}
,}).catch (function (错误),{
console.log才能(错误);
,});
以前,}); ar items =, state.items;
,function getItemPromise (id), {
,return new 承诺(function (解决,,拒绝),{
var 才能;content =, {
“isSingle"才能:,1,
“sbid"才能:,13729792,
“catalog3"才能:,身份证、
“offset"才能:,0,
“pageSize"才能:10
,,};
axios.post才能(& # 39;/广播/商品/get_goods_list_wechat& # 39;,, qs.stringify ({“data": JSON.stringify(内容)}))
,然后才能(function (响应),{
if 才能;(response.data.code ==, 626), {
for 才能;(let 小姐:=,0;,小姐:& lt;, response.data.data.length;,我+ +),{
提交才能(UPDATE_ALL_CONTENT, response.data.data[我]);
,,}
解决才能();
,,}
})才能.catch (function (错误),{
console.log才能(错误);
,,});
,});
以前,} , (UPDATE_ALL_CONTENT), (,,), {=,state.contentItems […state.contentItems,, Object.assign({},,项目);
}, ,//first 方法
,var promise =, getItemPromise ([0] .id项目)
,for (let j =, 1,, j & lt;, items.length;, j + +), {
,promise.then (function (), {
return 才能getItemPromise(项目[j] .id);
,})
以前,} var promise =, getItemPromise ([0] .id项目);
,promise.then (function (), {
,console.log (“1“,, window.performance.now ());
[1],return getItemPromise(项目.id);
,});
,promise.then (function (), {
,console.log (“2“,, window.performance.now ());
[2],return getItemPromise(项目.id);
,});
,promise.then (function (), {
,console.log (“3“,, window.performance.now ());
[3],return getItemPromise(项目.id);
,});
,promise.then (function (), {
,console.log (“4“,, window.performance.now ());
[4],return getItemPromise(项目.id);
,});
,promise.then (function (), {
,console.log (“5“,, window.performance.now ());
[5],return getItemPromise(项目.id);
,});
,promise.then (function (), {
,console.log (“6“,, window.performance.now ());
[6],return getItemPromise(项目.id);
以前,});
本篇文章为大家展示了怎么在vue中使用承诺异步请求数据,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强>实现思路
在商品页,钩创建子函数触发获取分类的http请求,请求到结果后,开始请求所有的具体商品并渲染。
<强>遇到的问题
?由于请求商品分类是异步的,怎么判断异步请求完成,也就是说请求具体商品的时机是什么时候。
?获取到所有的商品必须发送请求,请求时异步的,怎么保证能够按照顺序获取到。
<>强解决问题- - - - - -问题一
针对问题一,最好的方式还是使用承诺,大致实现如下:
其中getClassify是在创建时就会调用的,而updateKinds是行动中的方法,我们先看看行动中是怎么写的:
即返回一个承诺,当请求到数据,并且提交之后,我们就额可以解决()了,这样,就可以在然后中执行获取所有内容的方法了。
虽然实现起来比较简单,但是这个思想更好。
<强>解决问题- - - - - -问题二
在问题一中,我们看到解决之后就可以调用updateAllContent()了,那么这个应该怎么写呢?
首先可以确定的是:因为需要请求的分类不只一个,所以要使用承诺,并且一定要返回一个承诺,这样才能继续链式调用,其中一部分如下:
即调用这个函数,传入一个分类的id,然后就可以发送请求了,获取到数据之后,就把数据插入到内容的数组中,最后解决()还告诉之后可以执行了。
<强>注意:如何更新一个数组呢?
这样就相当于推了。
上面的这个函数的意义在于封装请求,那么对于请求多个时,如何做到呢?
我之前尝试了下面两种方法:
第一个
思路就是先请求第一个分类,然后循环,实际上和下面的效果是一样的:
