vue学习笔记-节接口调用-async和await

约定不等于承诺〃 2022-11-14 13:14 124阅读 0赞

[https://blog.csdn.net/weixin\_42349568/article/details/108306233][https_blog.csdn.net_weixin_42349568_article_details_108306233]

一，基本使用  
其实就是之前学过的异步函数，异步编程在函数前写一个ansyc，就转化为异步函数，返回的是一个promise对象，于是就可以使用await关键字，可以把异步函数写成同步函数的形式，极大地提高代码的可读性。

原本的：

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

//利用ansyc和await编写  
            async function queryData()\{  
                var ret=await axios.get('adata',\{  
                    params:\{  
                        id:12,  
                        name:'lisi'  
                    \}  
                \})  
                //直接利用axios.get('地址')，通过await取得服务器的响应，并赋值给ret  
                console.log(ret)  
                //因为响应拦截器已经处理成ret.data了，所以这里会直接得到服务器响应的信息  
            \}  
            queryData()  
  
整体代码：

<!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响应拦截器  
            axios.interceptors.response.use(function(res)\{  
                //console.log(res)//这里获取到的res就是之前认知中的res,是把服务器传回来的数据一起包裹在一个对象res里面的。  
                //而真正的服务器传过来的数据是res.data  
                //所以说，响应拦截器的作用就是拦截服务器的响应的东西，拦截之后，再将数据处理后交给客户端  
                //比如说，我们想让客户端直接获取服务器传过来的信息时。  
                var data=res.data  
                return data  
            \},function(err)\{  
                console.log(err)  
            \})  
              
              
            //利用ansyc和await编写  
            async function queryData()\{  
                var ret=await axios.get('adata',\{  
                    params:\{  
                        id:12,  
                        name:'lisi'  
                    \}  
                \})  
                //直接利用axios.get('地址')，通过await取得服务器的响应，并赋值给ret  
                console.log(ret)  
                //因为响应拦截器已经处理成ret.data了，所以这里会直接得到服务器响应的信息  
            \}  
            queryData()  
              
              
              
           // axios.get('adata',\{  
              //  params:\{  
                 //   id:123,  
                 //   name:'zhangsan'  
              //  \}  
           // \}).then(function(ret)\{  
              //  console.log(ret)  
           // \})  
        </script>  
    </body>  
</html>

[https_blog.csdn.net_weixin_42349568_article_details_108306233]: https://blog.csdn.net/weixin_42349568/article/details/108306233