Axious的请求与响应
1.什么是Axious
Axious是一个开源的可以用在浏览器和Node.js的异步通信框架，它的主要作用就是实现AJAX异步通信，其功能特点如下：
·从浏览器中创建XMLHttpRequests
~从node.js创建Http请求
·支持PromiseAPI
`拦截请求和响应
·转换请求数据和响应数据
·取消请求
·自动转换JSON数据
·客户端支持防御XSRF（跨站请求伪造）
由于 Vue.js 是一个 视图层框架 并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架
19.2 Axios的使用
19.2.1 安装vue axios
npm install --save axios vue-axios
19.2.2 在需要使用的页面中引入
比如UserInfo.vue页面需要发请求,那就在页面的script中引入即可
import axios from 'axios'
19.2.3 发送ajax请求
<template>
<div><button @click="getInfo">查询数据</button><hr>{{deptList}}<hr><table><th>部门编号</th><th>部门名称</th><th>部门地址</th><tr v-for="dept in deptList"><td>{{dept.deptno}}</td><td>{{dept.dname}}</td><td>{{dept.loc}}</td></tr></table>
</div>
</template><script>
// 引入axios
import axios from 'axios'
export default {name: "TestAxios",data(){return {deptList:null}},methods:{getInfo(){// axios.get('/api/dept').then(function(ret){// console.log(ret)// this.deptList = ret.data // 【有bug,因为this问题】// })axios.get('/api/dept').then((ret)=>{console.log(ret) // 【注意：这个返回值不一般】 // 详情请见19.4章节【19.4 Axios的响应】 // 可以查看官网https://www.axios-http.cn/docs/res_schemathis.deptList = ret.data.data })}}
}
</script><style scoped>
</style>
19.2.4 服务端解决跨域问题
SpringBoot的controller层类上添加**@CrossOrigin**注解即可
19.2.5 BUG
在axios的回调中,无法使用this.数据 获得vue data中的数据
造成axios取不到值得原因主要是this回调问题。当执行完函数function时，this指向放生变化。导致this指向函数体本身。这时this.data里的数据取不到。
简单直接的解决就是把function写成箭头函数形式，箭头函数不是构造函数，不会指定this，而是抓取上下文this作为自己的this
19.3 其他api演示
可以查看官网请求配置 | Axios 中文文档 | Axios 中文网 (axios-http.cn)
也可以看示例
<!-- get请求(1) 路径拼接参数 -->
axios.get('http://localhost:8080/vue/user?id=456').then(function(ret){console.log(ret.data);
})<!-- get请求(2) Restful风格参数 -->
axios.get('http://localhost:8080/vue/user/123').then(function(ret){console.log(ret.data.);
})<!-- get请求(3) 使用params传递参数 -->
axios.get('http://localhost:8080/vue/user',{params:{id:20001}
}).then(function(ret){console.log(ret.data);
})
<!-- post请求,发送的是json,后台需要使用@RequestBody -->
axios.post('http://localhost:8080/vue/user/json',{username:'张三',password:'987654'
}).then(function(ret){console.log(ret.data);
})
<!-- put请求 -->
axios.put('http://localhost:8080/vue/user/form',{username:'张三丰',password:'11111'
}).then(function(ret){console.log(ret.data);
}).catch(function (err){console.log(err)
})
19.4 Axios的响应
官网: https://www.axios-http.cn/docs/res_schema
响应结果的主要属性:
- data: 服务器响应回的数据
- headers: 响应头信息
- status: 响应状态码
- statusText: 响应状态信息
需要特别注意,我们后台返回的数据在data中,即data中是后台返回的R,我们ret.data获得到的是R,如果还有继续获得其中的数据,还需要再ret.data.data
19.5 axios的全局配置
官网: 默认配置 | Axios 中文文档 | Axios 中文网 (axios-http.cn)
我们讲一个特别实用的,我们在项目中调用数十次乃至百次接口是很常见的，后期一旦根域名发生改变，所有接口都需要修改，非常繁琐且容易出错。
axios提供了设置根域名的方法。
在**main.js**全局入口文件中，设置：
import axios from "axios";
axios.defaults.baseURL = 'http://localhost:8888'
在其他vue页面中使用axios发请求的时候
axios.get('/api/dept').then((ret)=>{console.log(ret)this.deptList = ret.data.data
})
19.6 响应拦截
还有请求拦截,暂时用不上先不讲
响应拦截可以拦截到axios发请求后的那个回调response对象,然后对其进行处理
- 实战,将response数据简化后返回
// 添加Axios响应拦截器
axios.interceptors.response.use(function (response) {//console.log('响应拦截',response)return response.data;
}, function (error) {console.log(error)
});
- 这样,在使用axios的页面,从回调中获得数据时,只需要ret.data,而不需要再ret.data.data
response.use(function (response) {
//console.log(‘响应拦截’,response)
return response.data;
}, function (error) {
console.log(error)
});
> - 这样,在使用axios的页面,从回调中获得数据时,只需要ret.data,而不需要再ret.data.data
