美文网首页
vue中同时请求两个接口,把接口返回的数据前端组合

vue中同时请求两个接口,把接口返回的数据前端组合

作者: 含羞草恋上梦昙花 | 来源:发表于2023-12-04 17:45 被阅读0次

通俗易懂直接上代码:
先了解下promise

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})
 
let p2 = new Promise((resolve, reject) => {
  resolve('success')
})
 
let p3 = Promse.reject('失败')
 
Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})
 
Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了,打出 '失败'
})

实际中调用代码使用:

getDate(){
      let p1 = new Promise(resolve => {
           request.projectChartCalculationWork().then(({ r }) => {  //调用后台接口
                    resolve(r)
                })
           })
      let p2 = new Promise(resolve => {
            request.formInterfacesPrdOperatingNum_kl({}).then(({ r }) => {
                    resolve(r)
                })
            })
       Promise.all([p1, p2]).then(res => {
            console.log(res[0])  // P1结果
            console.log(res[1])  // P2结果    
        })

}

注意:错误返回reject需要自己加上

相关文章

  • 异步promise

    请求两个接口A,B,接口B的数据以来A接口的返回值,所以B需要等A接口返回后再发送请求

  • js笔记四十三之json操作及DOM回流

    json介绍 后台 -> 提供一个数据请求的接口,前端通过接口地址可以请求到后台的数据 前端 -> 前端得到数据后...

  • 感觉快到服务分层的时候了

    我们一个服务是管理后端,前端vue,和数据接口一起打包发布,业务把数据通过数据接口投递给我们。平时请求量小的时候没...

  • ajax+接口文档

    1. 初始化接口 接口功能 前端把cars数据传给后端 URL /init HTTP请求方式 POST 请求参数 ...

  • Vue3-将流数据转换为文件并实现自动下载

    具体需求:后端接口返回流数据,前端根据接口拿到的流数据转换为excel表格后端接口返回数据示例: 注意:流数据可以...

  • 下载文件异常流程机制

    后端使用服务提供文件流,控制层调用服务接口,组装成想要的文件格式,返回给前端; 前端使用vue请求读取blob格式...

  • 接口测试用例设计

    (1)接口请求参数组合形式,决定了接口的不同返回结果。而接口协议对于接口的每个请求参数及其值都有要求,故这就是第一...

  • svg-captcha前后端使用

    前端请求获取验证码接口,后端生成返回给前端,同时存入session前端填写验证码,提交后和后端session里面存...

  • http请求-自定义

    1.网络请求框架 实现 1.线程管理类 单例实现 2.请求的接口 3.请求的返回接口 4.请求的数据返回接口 5....

  • 资料收集

    1,ie上的接口请求 304是前端缓存还是后端数据缓存2,vue monted 和 updated 内...

网友评论

      本文标题:vue中同时请求两个接口,把接口返回的数据前端组合

      本文链接:https://www.haomeiwen.com/subject/gekrgdtx.html