//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(请求到的参数),使用箭头函数更加方便