在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 相关文章推荐
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
浅谈React Native 中组件的生命周期
Sep 08 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
Ajax基础知识详解
2017/02/17 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
JS将unicode码转中文方法
2017/05/08 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
省三好学生申请材料
2014/01/22 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
员工工作表现评语
2014/04/26 职场文书
镇创先争优活动总结
2014/08/28 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
铁路安全反思材料
2014/12/24 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL