vue中promise的使用及异步请求数据的方法
下面给大家介绍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的使用及异步请求数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
今天在写vue项目时碰到的问题是怎么修改vue的网页图标,所以下面这篇文章主要给大家介绍了关于vue项目中更改名字和图标的简单实现,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-08-08
详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)
这篇文章主要介绍了Vue3 父组件调用子组件方法（$refs 在setup()、＜script setup＞ 中使用）,在 vue2 中 ref 被用来获取对应的子元素，然后调用子元素内部的方法，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
这篇文章主要给大家介绍了关于Vue项目中最新用到的一些实用小技巧，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
最近在学习vue,学习中遇到了一些感觉挺重要的知识点,感觉有必要整理下来,这篇文章主要给大家介绍了关于Vue.js中计算属性、监视属性与生命周期的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了Vue3中自定义指令的实践，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以了解一下2023-06-06
下面小编就为大家带来一篇vue获取DOM元素并设置属性的两种实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Element UI是一套基于Vue的桌面端组件库,封装好了很多常用的UI组件,下面这篇文章主要给大家介绍了关于vue中elementUI里面一些插件的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了详解基于mpvue微信小程序下载远程图片到本地解决思路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
如何使用el-table+el-tree+el-select动态选择对应值
小编在做需求时,遇到了在el-table表格中加入多条数据,并且每条数据要通过el-select来选取相应的值,做到动态选择,下面这篇文章主要给大家介绍了关于如何使用el-table+el-tree+el-select动态选择对应值的相关资料,需要的朋友可以参考下2023-01-01
Reflect可以操作对象使用， proxy可以代理对象，但没有找到为啥有时一定要在Proxy代理方法中使用Reflect，这篇文章主要介绍了vue3中的Proxy一定要用Reflect的原因解析,需要的朋友可以参考下2023-04-04
最新评论