异步接口同步调用(Vue)

614 阅读1分钟

第一步,参考axios二次封装

第二步,第一个函数

    async 函数1(){
        const res=await 接口函数({确定要传入的参数})
    }

第三步,第一个函数

    async 函数2{
        const res=await 函数1的接口函数
        所需接口函数({
            参数1:res.所需函数1的接口函数某个字段
        }).then((response)=>{
            console.log(response)
        })
    }

另一种非常特殊情况一般用不到---promise和async/await结合使用

第一数

async 函数名(){
    try{
        await new Promise((resolve,reject)=>{
            接口函数({所需参数}).then((req)=>{
                resolve()
            })
        }
    }catch(e){
       console.log("异常结果")
    }

}

第二个函数

    函数2(){
        this.函数1().then(id=>{
             接口函数({
                 参数名:id.接口函数1下的字段名
             }).then((req)=>{
                 console.log(req)
             })
        })
    }

promise和async/await相同点不同点

  • 相同点 promise和async/await都是优化异步编程体验的解决方案
  • 不同点
  1. promise是应用层解决方案,promise只能异步的处理错误
  2. async/await是语言层解决方案,是promise的补充,通过try/catch同步的处理错误
  3. promise常用于函数封装中,async/await常用在函数中
  4. promise链式调用相当于新的回调地狱,不能统一的处理异常,promise本身是同步函数,多个不会等待
  5. async/await的同步写法可读性更强,同时方便try-catch捕获异常,async/await有明确的先后关系