在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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 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
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP实现微信发红包程序
2015/08/24 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
老生常谈js数据类型
2017/08/03 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python标准库内置函数complex介绍
2014/11/25 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
会计专业自荐信
2014/06/03 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
通知范文怎么写
2015/04/16 职场文书
中学政教处工作总结
2015/08/13 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
七年级作文之秋游
2019/10/21 职场文书