Vue study notes-section interface call-async and await

Vue study notes-section interface call-async and await

 

https://blog.csdn.net/weixin_42349568/article/details/108306233


First, the basic use
is actually the asynchronous function that you have learned before. In asynchronous programming, write an ansyc before the function, and it will be converted into an asynchronous function. The return is a promise object, so you can use the await keyword to write the asynchronous function into a synchronous function. The form, greatly improves the readability of the code.

Original:

           axios.get('adata',{
               params:{
                   id:123,
                   name:'zhangsan'
               }
           }).then(function(ret){
               console.log(ret)
           })

现在:

//Use ansyc and await to write
            async function queryData(){                 var ret=await axios.get('adata',{                     params:{                         id:12,                         name:'lisi'                     }                 })                 //Use axios.get(' directly Address'), get the server's response through await, and assign it to ret                 console.log(ret)                 //Because the response interceptor has been processed into ret.data, the server response information will be directly obtained here             }             queryData() overall code :












 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="js/axios.js"></script>
        <script type="text/javascript">
            axios.defaults.baseURL='http://localhost:3000/'
            
            //axios请求拦截器
            axios.interceptors.request.use(function(config){
                config.headers.mytoken='nihao'
                return config
            },function(err){
                console.log(err)
            })

            //axios response interceptor
            axios.interceptors.response.use(function(res){                 //console.log(res)//The res obtained here is the res in the previous cognition, which is the data returned by the server Wrapped in an object res.                 //The data passed by the real server is res.data                 //So, the role of the response interceptor is to intercept the server's response. After interception, the data will be processed and handed over Client                 //For example, when we want the client to directly obtain the information from the server.                 var data=res.data                 return data             },function(err){                 console.log(err)             })             //Using ansyc and await Write             async function queryData(){                 var ret=await axios.get('adata',{                     params:{                         id:12,









            
            





                        name:'lisi'
                    }
                })
                //Use axios.get('address') directly to get the server's response through await, and assign it to ret
                console.log(ret)
                //Because the response interceptor has been processed into ret.data , So here you will get the server response information directly
            }
            queryData()
            
            
            
           // axios.get('adata',{               // params:{                  // id:123,                  // name:'zhangsan'               //}            //} ).then(function(ret){               // console.log(ret)            // })         </script>     </body> </html>









Guess you like

Origin blog.csdn.net/wwf1225/article/details/115300967