软工实践个人技术总结
技术概述
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数据，拦截请求和响应，转换请求和响应数据等优势，具有很好的适应性。