axios请求的五个步骤(axios请求数据的数据类型)

【网络请求的axios】axios基本用法

1.axios概述

axios是一个专注于网络请求的库。axios请求数据后，它会在真实数据之上放置一个shell。

2.axios的基本使用

2.1发送get请求

代码：

!DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'/metahttp-equiv='X-UA-Compatible'content='IE=edge'/metaname='viewport'content='width=device-width,initial-scale=1.0'/titleDocument/title/headbody按钮id='btnGet'发送GET请求/按钮按钮id='btnPost'发送POST请求/按钮!--引入axios--scriptsrc='/lib/axios.js'/script脚本document.querySelector('#btnGet').addEventListener('click',function(){axios({//请求方法method:'GET',//请求地址url:'',//查询URL中参数params:{id:2,},}).then(function(result){console.log(result);})});/脚本/正文/html

结果：

2.2发送post请求

代码：

!DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'/metahttp-equiv='X-UA-Compatible'content='IE=edge'/metaname='viewport'content='width=device-width,initial-scale=1.0'/title文档/标题/headbody按钮id='btnPost'发送POST请求/按钮！--引入axios--scriptsrc='/lib/axios.js'/script脚本文档。querySelector('#btnPost').addEventListener('click',function(){axios({method:'POST',url:'',//请求体参数data:{name:'zs',age:12,}}).then(function(结果){console.log(结果);})})/script/body/html

结果：

3.使用async…await、解构赋值对代码进行改造

3.1为什么可以要使用async/await？

结果：

axios的返回值是Promise类型。

3.2以发送post请求为例

代码：

!DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'/metahttp-equiv='X-UA-Compatible'content='IE=edge'/metaname='viewport'content='width=device-width,initial-scale=1.0'/title文档/标题/headbody按钮id='btnPost'发送POST请求/按钮！--引入axios--scriptsrc='/lib/axios.js'/script脚本文档。querySelector('#btnPost').addEventListener('click',asyncfunction(){//解构赋值时，使用：重命名//1.调用axios后，使用async/await简化//2.使用解构赋值，从axios封装的大对象中解构出data属性//3.使用冒号对解构后的data属性进行重命名，通常重命名为{data:res}const{data:res}=waitaxios({method:'POST',url:'',//请求体参数data:{name:'zs',age:12,},});console.log(res);});/脚本/正文/html

结果：

4.使用axios直接发送请求

4.1使用axios直接发送get请求

!DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'/metahttp-equiv='X-UA-Compatible'content='IE=edge'/metaname='viewport'content='width=device-width,initial-scale=1.0'/titleDocument/title/headbody按钮id='btnGet'发送GET请求/按钮按钮id='btnPost'发送POST请求/按钮!--介绍axios--scriptsrc='/lib/axios.js'/script脚本文档.querySelector('#btnGet').addEventListener('click',asyncfunction(){const{data:res}=waitaxios.get('',{params:{id:3,},});console.log(res.data);});/脚本/正文/html

结果：

4.2使用axios直接发送post请求

!DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'/metahttp-equiv='X-UA-Compatible'content='IE=edge'/metaname='viewport'content='width=device-width,initial-scale=1.0'/titleDocument/title/headbodybuttonid='btnPost'发送POST请求/按钮！--引入axios--scriptsrc='/lib/axios.js'/script脚本文档.querySelector('#btnPost').addEventListener('click',asyncfunction(){const{data:res}=waitaxios.post('',{name:'zs',Age:20});console.log(res);});/脚本/正文/html

注意：这里的请求体参数可以直接写在{}中，不需要添加数据。

结果：

5.参考

黑马vue视频，谢谢llb老师。

建议学习axios之前先了解http协议。