美文网首页
前端-JS 中关于async 和 await 以及 Promis

前端-JS 中关于async 和 await 以及 Promis

作者: 长若执念 | 来源:发表于2020-05-31 15:06 被阅读0次

async 配合 await 使用,以及Promise在此就不再赘述。
本文就主要 在项目中使用到了 耗时的网络请求时候,如何使用 async 和 await,以及如何使用 Promise 还有如何使用 函数 进行回调使用。

回调方式一: async 和 await 配合 ----开始 ----

 // fileA
int c = 0;
async  addHttp(a,b){
  //await 需要与外部 包裹的 async 配合,意思是需要   await修饰方法的内部执行完毕才会进行下一步操作,===> 就是等 longtimeHttp() 这个函数执行完毕才会    进行下一步 ;
    await  longtimeHttp(a,b)

    return c;
}

longtimeHttp(a,b){
  //这是耗时的网络请求.... ,

 //假设网络请求成功返回 success,则进行其他业务逻辑
   if(success){
          c = a+b;
   }else{
        c = 0;
   }
}

//他处调用。便可以使用  得到”回调值“
int m = 0;
addHttp(2,3).then(res=>{
   console.log(res); // 5;此处res 就是 调用addHttp 返回的C的值
})

回调方式一: async 和 await 配合 ----结束 ----

回调方式二: 使用Promise ------- 开始 ---------

 // fileA
int c = 0;
addHttp(a,b){
  //await 需要与外部 包裹的 async 配合,意思是需要   await修饰方法的内部执行完毕才会进行下一步操作,===> 就是等 longtimeHttp() 这个函数执行完毕才会    进行下一步 ;
   const myRes = new Promise((resolve,reject)=>{
  
       longtimeHttp(a,b);

//myRes 就相当于 Promise中 reslove(c) 中的 c的值。
    return myRes;
}

//此处 稍微调整写法。
longtimeHttp(a,b){
  //这是耗时的网络请求.... ,

 //假设网络请求成功返回 success,则进行其他业务逻辑
   if(success){
          c = a+b;
           reslove(c);
   }else{
        c = 0;
       reslove(c);
   }
}

//他处调用。便可以使用  得到”回调值“
int m = 0;
addHttp(2,3).then(res=>{
// 5;此处res 就是 调用addHttp 返回的C的值。 
   console.log(res); 

})

回调方式二: 使用Promise ------- 结束 ---------

回调方式二: 使用 函数编程思想, 函数当作参数(类似iOS中的block)

 // fileA
int c = 0;
addHttp(a,b, callBackFunction){

       longtimeHttp(a,b);
}

//此处 稍微调整写法。
longtimeHttp(a,b){
  //这是耗时的网络请求.... ,

 //假设网络请求成功返回 success,则进行其他业务逻辑
   if(success){
          c = a+b;

   }else{
        c = 0;

   }
    
   //确保callback 是一个函数,才能回调,增加代码的健壮性
   if(typeof callBackFunction === 'function'){
     //调用函数;  c 是传递的参数
        callBackFunction(c);
   }
}

//他处调用。便可以使用  得到”回调值“
int m = 0;
addHttp(2,3, function(callResult){
  console.log(callResult); //5 ==> callResult 就是 addHttp 中的 c的值
});

相关文章

网友评论

      本文标题:前端-JS 中关于async 和 await 以及 Promis

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