美文网首页
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需要自己加上

    相关文章

      网友评论

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

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