Ajax_axios发送ajax请求

Ajax_axios发送ajax请求

这篇笔记主要讲一下axios基本的发送ajax请求的方法

axios在当前的前端行业里面是用的比较热门的一个

下面给大家分享一下它axios的一个基本用法

这段代码包含了post 跟get方法

从代码里面我们可以看出这个方法用起来是相对的简洁一些，其实axios还有很多的方法

在这里就不给大家一一的写出来了 大家如果真的想了解这个的话 也可以去到axios的官方文档里面 里面有更多更详细的介绍噢。

在这里解析一下 这个baseURL是对路径的一个简化 相当于定义一个固定的前缀参数 当我们后面用到的时候就可以省略前面固定的代码

只需要在后面的接口跟上路径名称即可，这样可以大大的节省我们在调试开发的时的 时间。

 //baseURL是对路径的一个简化
        //配置baseURL
        axios.defaults.baseURL = "http://localhost:8000";

下面这个是完整的案例

这里说明一下axios是可以下载安装到电脑 也可以引用cnd，大家可以选择自己方式。

我这里调试的地址是自己搭建的一个服务器地址，大家用的时候可以改成自己的地址，如果没有自己的地址也可以搭建一个，

如果不会搭建大家可以看我前面的笔记Express框架的简单使用。

 <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
        const btns = document.querySelectorAll("button");
​
        //baseURL是对路径的一个简化
        //配置baseURL
        axios.defaults.baseURL = "http://localhost:8000";
        btns[0].onclick = function(){
            //GET请求
            //  axios.get()
            axios.get('/axios',{
                //参数
                params:{
                    id:100,
                    vip:9
                }
                // //请求头信息
                // headers:{
                //     name:'at-lili'
                // }
            }).then(re =>{
                console.log(re);
            })
        }
​
        btns[1].onclick = function(){
            axios.post('/axios',{
                params:{
                    id: 007,
                    vip:225
                },
                //请求头
               Headers:{
                    height:186,
                    wight:90
                },
                //请求体
                data:{
                    user:'admin',
                    pass:'admin'
                }
​
            })
        }
​
    </script>