软工实践个人技术总结
技术概述
Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中,主要作用为用于向后台发起请求的,还有在请求中做更多是可控功能。自从vue2.0之后,就不再对vue-resource更新,而是推荐使用axios
技术详述
使用方法
- 在安装完成VUE后安装Axios
npm install --save axios vue-axios
- 从VUE框架中引入Axios,以便使用Axios的函数
import Vue from ‘vue‘;
import axios from ‘axios‘;
import VueAxios from ‘vue-axios‘;
Vue.use(VueAxios,axios);
- Axios具体使用
//Axios的get请求的具体操作
this.axios.get(‘/test‘ //此处为请求的地址具体处理的界面
, {
params: {
属性名: 值,
属性名: 值
} //此处为传递的参数,使用params
})
.then(function (response) {
console.log(response);
}) //请求成功所执行的方法
.catch(function (error) {
console.log(error);
}); //请求失败所执行的方法
//Axios的post请求 与上面类似
this.axios.post(‘/user‘, {
firstName: ‘Fred‘,
lastName: ‘Flintstone‘
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//以及其他常用的方法
3.axios.request(config)
4.axios.head(url[, config])
5.axios.delete(url[, config])
6.axios.put(url[, data[, config]])
7.axios.patch(url[, data[, config]])
8.axios.all(iterable)执行多个并发请求
使用困难
在使用Axios时经常会遇见跨域问腿,而跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制,通俗的来说就是a页面想要获取b页面资源,如果a,b页面的协议、域名、端口号、子域名不同,所进行的访问都是跨域的,而浏览器一般为了安全都限制了跨域访问,也就是不允许跨域访问资源。
- 解决方法
//在项目目录里找到config文件夹,然后找到index.js,找到proxyTable选项
proxyTable: {
‘/api‘: {
target: ‘http://baidu.com‘,//举例说明,在开发中换成自己的地址
pathRewrite: {
‘^/api‘: ‘‘
}
//设置成如上的格式,而在具体使用时则把url设置变化一下
this.$http({
method: ‘POST‘,
url: ‘/api/auth/login‘,//此处做出改变
data: {
‘username‘: this.username,//举的栗子
‘password‘: this.password //举的栗子
}
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
此时就可以从前端中成功解决跨域问题
//又或者在后端中解决问题即添加一个过滤器
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
// 不使用*,自动适配跨域域名,避免携带Cookie时失效
String origin = request.getHeader("Origin");
if(StringUtils.isNotBlank(origin)) {
response.setHeader("Access-Control-Allow-Origin", origin);
}
// 自适应所有自定义头
String headers = request.getHeader("Access-Control-Request-Headers");
if(StringUtils.isNotBlank(headers)) {
response.setHeader("Access-Control-Allow-Headers", headers);
response.setHeader("Access-Control-Expose-Headers", headers);
}
// 允许跨域的请求方法类型
response.setHeader("Access-Control-Allow-Methods", "*");
// 预检命令(OPTIONS)缓存时间,单位:秒
response.setHeader("Access-Control-Max-Age", "3600");
// 明确许可客户端发送Cookie,不允许删除字段即可
response.setHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(request, response);
}
}
使用后端的解决方案也可以解决问题
总结
在使用VUE进行前端界面开发时,现在常用Axios进行后台请求,所以掌握Axios的使用在前端开发中有着极为重要的意义,所以有必要掌握axios的相关知识,可以在以后的工作当中在前端进行开发时避免遇见大的障碍,并且Axios具有如下特点:在浏览器中发送XMLHttpRequests请求, 支持Promise API, 提供了一些并发请求的接口简化操作,自动转换JSON数据,拦截请求和响应,转换请求和响应数据等优势,具有很好的适应性。