Axios发送Ajax请求

  Axios发送Ajax请求

一:get和post请求:

//1.导入axios包,当然也可以用npm install axios,若是报错,可以使用crossorigin="anorymous"来消除警告
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
?
//1.获取出发事件的按钮:
const btns=document.querySelectorAll(‘button‘);
//配置baseURL:这样就不用再axios里面写url地址,简化方法
axios.defaults.baseURL=‘http://127.0.0.1:8000‘;
?
//正式开始axios请求
btn.onclick=function(){//第一个参数时基础地址加在后面的后缀地址,第二个参数是请求体,第三个参数是其他配置,而第三个参数或者第二个参数后面可以使用箭头函数来对返回到的value进行操作,十分方便
    axios.get(‘/axios-server‘,{
      username:hanxiao,
      password:132456
    },{
        //url参数,如果配置过baseURL可以省略
        params:{
          id:100,
          vip:7
        },
        //请求头信息
        heaaders:{
            name:‘asdlfohai‘,
            age:20
        }
    }).then(value=>{
       console.log(value) 
    });
}
//这里与jQuery的请求不同,这里使用then来获取响应的参数value,并对value进行操作

 

二:通用方式请求:

//跟jQuery一样,都有他们自己的通用请求方式,直接使用按钮来实现事件的操作:
?
axios.defaults.baseURL=‘http://127.0.0.1:8000‘;
btn.onclick=function(){
    axios({
        //url
        url:‘/axios-server‘,
        //url参数
        params:{
            vip:10,
            level:30
        },
        //头参数:
        headers:{
            a:100,
            b:200
        },
        //请求体参数,发请求的
        data:{
            username:‘hanxiao‘,
            password:13456
        }
    }).then(response=>{
        console.log(response);
        //响应状态码
        console.log(response.status);
        //响应状态字符串
        console.log(response.statusText);
        //响应头信息
        console.log(response.headers);
        //响应体
        console.log(response.data);
    })
}
//也是直接使用.then(请求到的参数),使用箭头函数更加方便

 

 

Axios发送Ajax请求

上一篇:【Flutter 混合开发】嵌入原生View-iOS


下一篇:天狼程序MJ机VolIP和 Phonex APP二维码下载