在vue项目中promise解决回调地狱和并发请求的问题


Posted in Javascript onNovember 09, 2020

场景需求:

需要同时请求5个接口

都请求成功后执行下一步操作

解决方法:

定义一个变量i=5,请求成功一个接口,让i?,直到i=0时执行下一个操作,否则不执行

axios.all 并发请求,.then(axios.spread(function(callback1, callback2)){})

promise.all 并发请求,.then(function([callback1, callback2]){})

1、回调地狱:

函数作为参数层层嵌套

代替的为.then的链式操作

2、promise.all并发请求

引入接口

import {getSellerDetail} from '../../api/seller'

import {getMemberCardInfo} from '../../api/pay_online/index'

数据处理

1. 创建一个Promise实例,获取数据

2. 并把数据传递给处理函数resolve和reject

3. promise在声明时就执行了

created(){
  if (this.$route.query.type){
    this.type = this.$route.query.type;
    this.sellerId = this.$route.query.targetId;
    this.initApi()
  }
},
methods: {
  initApi(){
    `// 商户信息`
    let SellerDetailApi = new Promise((resolve, reject) => {
      getSellerDetail(this.sellerId).then( res => {
        resolve(res)  // resolve(res.data)
      }).catch( err => {
        reject(res)
      })
    })
    `// 会员卡信息`
    let MemberCardInfoApi = new Promise((resolve, reject) => {
      getMemberCardInfo(this.sellerId, this.payMoney).then( res => {
        resolve(res) // resolve(res.data)
      }).catch( err => {
        reject(res)
      })
    })
    `// Promise的all方法,等数组中的所有promise对象都完成执行`
    Promise.all([SellerDetailApi, MemberCardInfoApi]).then( res => {
      this.loading = false;
      // 商户信息
      this.detail = res[0].data.detail;
      this.sellerPic = this.detail.picture;
      this.sellerName = this.detail.name;
      this.discount = this.detail.discount;
      // 会员卡信息
      this.cardDetail = res[1].data;
      this.balance = this.cardDetail.balance; //余额
      this.rechargeTip = this.cardDetail.rechargeTip; // 付款金额提示充值
    }).catch( err => {
      console.log(err)
    })
  }
}

3、接口返回:

promise.all中console.log(res) 返回的是数组接口返回

在vue项目中promise解决回调地狱和并发请求的问题

4、注意:

Promise.all 缺陷 如果其中某个任务出现异常(reject),所有任务都会挂掉,Promise直接进入 reject 状态至catch回调。

Promise.allSettled 无论一个任务正常或者异常,都会返回对应的的状态,可以解决上述问题

补充知识:vue项目中Promise同步请求

1.js中定义Promise

export function wxLogin() {
 let pResult = new Promise((resolve, reject) => {
 uni.login({
  provider: 'weixin',
  success: (res) => {
  console.log('login success:', res);
  // return res;
  setTimeout(function() {
   resolve(res);
  }, 3000);
  },
  fail: (err) => {
  console.log('login fail:', err);
  reject(err);
  }
 });
 }).catch(res => {
 console.log(666, res);
 })
 return pResult;
}

2.vue文件中使用

import {login,wxLogin} from '@/common/login.js'
 
  (async () => {
  //获取授权状态
  console.log(1111,"111")
  let aaa = await wxLogin();
  console.log(3333,"3333");
  console.log(4444,aaa);
  })()

以上这篇在vue项目中promise解决回调地狱和并发请求的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Date对象使用总结
May 14 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
vue 中的动态传参和query传参操作
Nov 09 #Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 #Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 #Javascript
原生JavaScript实现五子棋游戏
Nov 09 #Javascript
Nuxt的动态路由和参数校验操作
Nov 09 #Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
JS实现炫酷轮播图
Nov 15 #Javascript
You might like
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
2011/07/26 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python的pycurl包用法简介
2015/11/13 Python
python使用turtle库绘制树
2018/06/25 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
python实现顺时针打印矩阵
2019/03/02 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
JAVA高级程序员面试题
2013/09/06 面试题
社区交通安全实施方案
2014/03/22 职场文书
委托书范文
2014/04/02 职场文书
2015年元旦活动总结
2014/05/09 职场文书
国庆节演讲稿
2014/05/27 职场文书
综艺节目策划方案
2014/06/13 职场文书
医德考评自我评价
2014/09/14 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android