1.1.1axios基础用法
官网地址：
axios中文网|axios API 中文文档 | axios
基于promise用于浏览器和node.js的http客户端
支持浏览器和node.js
支持promise
能拦截请求和响应
自动转换JSON数据
能转换请求和响应数据
get和 delete请求传递参数
通过传统的url 以 ? 的形式传递参数
restful 形式传递参数
通过params 形式传递参数
post 和 put 请求传递参数
通过选项传递参数
通过 URLSearchParams 传递参数
1.1.2传参
1.发送get 请求
<div id="app"><button @click="send()">get请求传递参数</button></div>
<script src="./js/vue.js"></script><script src="./js/axios.js"></script><script>var vm=new Vue({//模板选择器el:'#app',//数据中心data(){return{}},methods:{send(id){//发送异步请求//var apiUrl=`http://localhost:4000/acdata/${id}`axios.get(apiUrl).then((result)=>{console.log(result);})}}})</script>
app.js
//允许别人在客户端的地址栏中写参数，送给服务器（接口地址）app.get('/acdata/:id',(req,res)=>{console.log(req.params);res.send('acdata--小余同学');})
预览：
postman请求发送数据:
<div id="app"><button @click="send(123)">get请求传递参数</button></div>
<script src="./js/vue.js"></script><script src="./js/axios.js"></script><script>var vm=new Vue({//模板选择器el:'#app',//数据中心data(){return{}},methods:{send(id){//发送异步请求//var apiUrl=`http://localhost:4000/adata?id=${id}`axios.get(apiUrl,{params:{id:1,uname:'xiaoyu'}}).then((result)=>{console.log(result);})}}})</script>
app.js:
app.get('/adata',(req,res)=>{res.send('adata--小余同学');console.log(req.query)})
预览：
<div id="app"><button @click="send()">post请求传递参数</button></div>
<script src="./js/vue.js"></script><script src="./js/axios.js"></script><script>var vm=new Vue({//模板选择器el:'#app',//数据中心data(){return{}},methods:{send(id){//发送异步请求//var apiUrl=`http://localhost:4000/pdata`axios.post(apiUrl,{uid:1,uname:'xiaoyu'}).then((result)=>{console.log(result);})}}})</script>
app.js
app.post('/pdata',(req,res)=>{console.log(req.body);res.send('hx')})
预览：
1.1.2axios 拦截器
请求拦截器
例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
请求拦截器的作用是在请求发送前进行一些操作
响应拦截器
例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
请求拦截
响应拦截器的作用是在接收到响应后进行一些操作
axios.interceptors.request.use(function(config) {console.log(config.url)// 任何请求都会经过这一步 在发送请求之前做些什么 config.headers.mytoken = 'nihao';// 这里一定要return 否则配置不成功 return config;}, function(err){// 对请求错误做点什么 console.log(err)})
响应拦截
axios.interceptors.response.use(function(res) {// 在接收响应做些什么 var data = res.data;return data;}, function(err){// 对响应错误做点什么 console.log(err)})
1.2 async await
1.1.1基本用法
async作为一个关键字放到函数前面
任何一个async函数都会隐式返回一个promise
await关键字只能在使用async定义的函数中使用
await后面可以直接跟一个 Promise实例对象
await函数不能单独使用
<style>*{margin: 0;padding: 0;}.grid{width: 800px;margin:20px auto 2px;border-collapse: collapse;}.grid th,.grid td{border:1px solid #000;padding:10px;}.title{text-align: center;}</style>
<div id="app"><h1 class="title">图书列表</h1><table class="grid"><tr align="center"><td>编号:<input type="text">名称:<input type="text"><button>提交</button></td></tr><tr><td>图书总数：{{count}}</td></tr></table><table class="grid"><thead ><tr><th>编号</th><th>名称</th><th>时间</th><th>操作</th></tr></thead><tbody v-for="(item,index) in books" :key="index"><tr><td>{{item.bid}}</td><td>{{item.name}}</td><td>{{item.addtime}}</td><td><button>删除</button></td></tr></tbody></table></div>
<script src="./js/vue.js"></script><script src="./js/axios.js"></script><script>//配置公共的请求头axios.defaults.baseURL = 'http://localhost:4000';// 配置 超时时间axios.defaults.timeout = 2500;// 配置公共的请求头// axios.mon['Authorization'] = AUTH_TOKEN;// 配置公共的 post 的 Content-Typeaxios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';axios.interceptors.response.use(function(res) {// 在接收响应做些什么 var data = res.data;return data;}, function(err){// 对响应错误做点什么 console.log(err)})var vm=new Vue({//模板选择器el:'#app',//数据中心data(){return{flag:false,submitFlag:false,id:'',name:'',books:[]}},computed:{count(){return this.books.length}},mounted(){this.queryData()},methods:{queryData:async function(){//发送异步请求// 使用 async 来 让异步的代码 以同步的形式书写 await axios.get('/list').then((result)=>{console.log(result);this.books=result;})}}})</script>
打开小皮
打开Navicat
预览：
