In general, asynchronous requests are used in most scenarios, which can be implemented using ajax, axios and other technologies;  

The most commonly used method in the middle is the ajax method of jquery; There are also axios of vue in recent years

1. $.ajax({
       url: "XXX",//Request path
       data: { param1: jsonObj1, params2: str2... },
       type: "POST",//GET
       //dataType: "JSON", / / JSON object needs to be returned (if Ajax returns a manually spliced JSON string, key and value need quotation marks)
       success: function(resp) {
           //Process resp responseText;
       },
       error: function(a, b, c) {
           //a. B and C parameters. Please refer to JQuery API for details
       }
   })

   However, in some scenarios, we need to synchronize requests, such as dynamic columns when I build Grid controls;

   Once the Grid object is created and rendered to the browser, if there are no columns configured or the column configuration options are wrong, an error will be prompted on this page, that is, the Grid has not been successfully rendered;

   So here we need to be before the new Grid Firstly, the dynamic column data is obtained and the column model is constructed;

    

   Let's do this: give a simple example
   --------
    

   var cmObjStr = eval("(" + $.ajax({
   			url: "XXX",
   			async: false,//The key is whether this parameter is asynchronous request = > false: use synchronous request
   			type: "POST",
   			data: {
   				params1: value1
   			}
   		}).responseText + ")");

   The column information required by the column model is returned here, and the column model object needs to be created manually;

   To sum up: for all methods that support asynchronous requests, you need to look at the relevant document API to see whether the async parameter exists; Set async to false as the synchronization request. Only when the request is returned, the browser thread will execute the JS of the next line;

2. **axios: * * is a method of asynchronous request. More controllable functions are done in the request through callback function,

   Async of axios synchronization -- await

   axios synchronization is also used in some specific times. Although asynchrony greatly improves the efficiency, there will be some times when synchronization is needed. How to solve it?

   async – await can be used at this time

   Usage scenarios and requirements

   1. You need to request data with axios through the created life cycle during page rendering and assign the data to a variable,

   2. After receiving the variables, filter the variables and filter out the data I want

   The above two requirements must be completed before page rendering

   created () {
            
       //pending - wait for data requested with encapsulated axios
       _product.bbbb_list().then(res => {
       //Assign the value after the data request is successful
         this.$store.state.bbbb_list = res.data.data
       
    })
    //Console console output variables
   console.log( this.$store.state.bbbb_list)
   
   //Filter the variables just received to get the desired data
         this.$store.state.bbbb_lista =this.$store.state.bbbb_list.filter((item)=>{
           if(item.type.charAt(item.type.length-1)!=2){
           //The console outputs item name
             console.log(item.name)
         return item
           }
         })
     },
   

   Among the above output results, only ， console log( this.$store.state.bbbb_list)

   The reason why there is no output in the lower part is that axios is an asynchronous request mode; If it becomes synchronous

   async created () {
   //Using async with await
             let res =  await axios.post('https://api.it120.cc/small4/shop/goods/category/all')
             //The res here is the result of your axios request
             this.$store.state.bbbb_list = res.data.data
            
           //Console console output variables
         console.log( this.$store.state.bbbb_list)
   
        Filter the variables just received to get the desired data
         this.$store.state.bbbb_lista =this.$store.state.bbbb_list.filter((item)=>{
           if(item.type.charAt(item.type.length-1)!=2){
            //The console outputs item name
             console.log(item.name)
         return item
           }
         })
     },
   

   The above output result is * * * * console Log (this. $store. State. Bbbb_list) * * * and console log(item.name)