vue中promise的使用及异步请求数据的方法_vuepromise - CSDN文库

46 浏览量更新于2023-03-16 评论收藏 65KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue中中promise的使用及异步请求数据的方法的使用及异步请求数据的方法

主要介绍了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,

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38726407

粉丝: 20
资源: 955

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈