美文网首页
Promise结合async await 请求处理

Promise结合async await 请求处理

作者: Allen6879 | 来源:发表于2021-08-09 16:07 被阅读0次

    当一个接口需要依赖另一个接口的请求数据时

    1.将请求数据的接口设为同步,之后调另一个接口
    2.在请求数据接口的成功回调里调另一个接口。

    但是当一个接口需要依赖很多个接口的请求数据 或者 一个依赖另一个,另一个再依赖另一个 的情况该怎么解决呢?
    当然你可以按照单个接口依赖的方式层层嵌套,结果就是代码结构混乱,可读性差,性能差(一个需要依赖很多个的时候要把很多个设为同步)。
    因此,我们需要一种更优雅的异步回调处理方式--Promise
    直接上代码:

    //创建一个Promise实例,获取数据。并把数据传递给处理函数resolve和reject。需要注意的是Promise在声明的时候就执行了。

      var getData1 = () => {
        return new Promise(function(resolve,reject){
            $.ajax({
                type:"get",
                url:"index.aspx",
                success:function(data){
                    if(data.Status=="1"){
                        resolve(data.ResultJson)//在异步操作成功时调用
                    }else{
                        reject(data.ErrMsg);//在异步操作失败时调用
                    }
                }
            });
        })
      }
      var getData2 = () => {
        return new Promise(function(resolve,reject){
            $.ajax({
                type:"get",
                url:"index.aspx",
                success:function(data){
                    if(data.Status=="1"){
                        resolve(data.ResultJson)//在异步操作成功时调用
                    }else{
                        reject(data.ErrMsg);//在异步操作失败时调用
                    }
                }
            });
        })
      }
      var getData3 = () => {
        return new Promise(function(resolve,reject){
            $.ajax({
                type:"get",
                url:"index.aspx",
                success:function(data){
                    if(data.Status=="1"){
                        resolve(data.ResultJson)//在异步操作成功时调用
                    }else{
                        reject(data.ErrMsg);//在异步操作失败时调用
                    }
                }
            });
        })
      }
    

    场景一:先调用getData1,再调用getData2,再调用getData3 ...

    getData1().then(function(res){
    return getData2(res)
    }).then(function(res){
    return getData3(res)
    }).then(function(res){
    console.log(res)
    }).cache(function(error){
    console.log(error)
    })
    
    

    场景二:getData3的执行依赖getData1和getData2

    //Promise的all方法,等数组中的所有promise对象都完成执行

    Promise.all([getData1,getData2]).then(function([ResultJson1,ResultJson2]){
        //这里写等这两个ajax都成功返回数据才执行的业务逻辑
      getData3()
    })
    

    或结合 async await 使用

      async function fun(){
         let a = await  getData1();
       let b = await  getData2();
       let c = await  getData3();
       
      }
    

    优点:这样的代码分工非常明确,ajax就是拿数据的,.then .catch方法就是处理业务逻辑,代码异常清晰。

    相关文章

      网友评论

          本文标题:Promise结合async await 请求处理

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