在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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
webpack4的迁移的使用方法
May 25 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
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP里的单例类写法实例
2015/06/25 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python Django使用forms来实现评论功能
2016/08/17 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
自我评价的正确写法
2013/09/19 职场文书
播音主持女孩的自我评价分享
2013/11/20 职场文书
校园安全检查制度
2014/02/03 职场文书
机关单位动员会主持词
2014/03/20 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
公司员工活动策划方案
2014/08/20 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
总经理助理岗位职责
2015/01/31 职场文书
荒岛余生观后感
2015/06/09 职场文书