使用jQuery,vue实现同步请求

一般工作的时候,绝大部分场景使用的是异步请求,可以使用ajax axios等技术实现; 

中间最常用的是jquery的ajax方法;也有近几年出现的vue的axios

1. $.ajax({
       url: "XXX",//请求路径
       data: { param1: jsonObj1, params2: str2... },
       type: "POST",//GET
       //dataType: "JSON",//需要返回JSON对象(如果Ajax返回的是手动拼接的JSON字符串,需要Key,Value都有引号)
       success: function(resp) {
           //处理 resp.responseText;
       },
       error: function(a, b, c) {
           //a,b,c三个参数,具体请参考JQuery API
       }
   })

   但是在某些场景下,我们需要同步请求,比如我在构建Grid控件的时候,动态列的情况;

   一旦Grid对象创建完成,渲染到浏览器的时候,如果没有配置列,或者列配置选项错误,那么这个页面会提示错误,即Grid没有成功渲染;

   因此这里我们需要在new Grid之前.首先获取动态列数据,进行列模型的构建;

   我们这样子做:给出一个简单例子
   ————————————————
    

   var cmObjStr = eval("(" + $.ajax({
   			url: "XXX",
   			async: false,//关键是这个参数 是否异步请求=>false:使用同步请求
   			type: "POST",
   			data: {
   				params1: value1
   			}
   		}).responseText + ")");

   这里返回的是列模型所需要的列信息,还需要手动创建列模型对象;

   总结一下:所有支持异步请求的方法,需要看相关的文档API,看是否存在async这个参数;设置async为false为同步请求,只有请求返回了,浏览器线程才会执行下一行的JS;

2. **axios:**是一种异步请求的方式 ，通过回调函数的方式在请求中做的更多的是可控的功能，

   axios同步之async-----await

   在某些特定的时候 也会用到axios同步 虽然异步大大提高了效率，但实际也会有一些时候需要同步，那该如何解决呢？

   这个时候就可以用到async–await

   使用场景以及需求

   1.需要在页面渲染时通过created生命周期用axios请求数据，并将数据赋值给一个变量，

   2.在变量接收完成后，对变量进行过滤筛选出我想要的数据

   必须在页面渲染前完成以上两个需求

   created () {
            
       //pending - 等待 用封装的axios请求数据
       _product.bbbb_list().then(res => {
       //数据请求成功后进行赋值
         this.$store.state.bbbb_list = res.data.data
       
    })
    //console控制台输出变量
   console.log( this.$store.state.bbbb_list)
   
   //对刚刚接收的变量进行过滤  拿到想要的数据
         this.$store.state.bbbb_lista =this.$store.state.bbbb_list.filter((item)=>{
           if(item.type.charAt(item.type.length-1)!=2){
           //console控制台输出item.name
             console.log(item.name)
         return item
           }
         })
     },
   

   以上的输出结果中只有 console.log( this.$store.state.bbbb_list)

   而下边的没有输出结果 就是因为axios是异步的请求方式;         如果变成同步时

   async created () {
   //通过async结合await使用
             let res =  await axios.post('https://api.it120.cc/small4/shop/goods/category/all')
             //这里的res就是你axios请求回来的结果了
             this.$store.state.bbbb_list = res.data.data
            
           //console控制台输出变量
         console.log( this.$store.state.bbbb_list)
   
        对刚刚接收的变量进行过滤  拿到想要的数据
         this.$store.state.bbbb_lista =this.$store.state.bbbb_list.filter((item)=>{
           if(item.type.charAt(item.type.length-1)!=2){
            //console控制台输出item.name
             console.log(item.name)
         return item
           }
         })
     },
   

   以上的输出结果为 ****console.log( this.$store.state.bbbb_list)***和 console.log(item.name)