代做外国空间网站,搜索引擎排名优化方案,网站建设做什么会计科目,泰安网站建设Axious的请求与响应 1.什么是Axious Axious是一个开源的可以用在浏览器和Node.js的异步通信框架#xff0c;它的主要作用就是实现AJAX异步通信#xff0c;其功能特点如下#xff1a; 从浏览器中创建XMLHttpRequests ~从node.js创建Http请求 支持PromiseAPI 拦截请求和…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-axios19.2.2 在需要使用的页面中引入 比如UserInfo.vue页面需要发请求,那就在页面的script中引入即可 import axios from axios19.2.3 发送ajax请求 template divbutton clickgetInfo查询数据/buttonhr{{deptList}}hrtableth部门编号/thth部门名称/thth部门地址/thtr v-fordept in deptListtd{{dept.deptno}}/tdtd{{dept.dname}}/tdtd{{dept.loc}}/td/tr/table /div /templatescript // 引入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 })}} } /scriptstyle scoped /style19.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?id456).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