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

Axious的请求与响应