软件工程实践-个人技术博客

这个作业属于哪个课程	2022年福大-软件工程实践-W班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	1、课程回顾与总结 2、个人技术总结
其他参考文献	<<构建之法>>

技术概述

axios，类似于jQuery的ajax，使用于浏览器页面向服务器请求时，可以应用于浏览器端和node.js。

技术详述

安装

我使用的安装方法是npm安装
在命令台使用npm install axios 进行安装

在项目中的简单使用

axios可以请求的方法包括get、post、put、patch、delete,
由于是在结对项目中使用的技术，只进行较简单的使用，使用的axios全部使用的get请求
使用代码示例如下：

created:function(){
        axios.get("http://121.41.45.127:8088/playerRank").then((response)=>{
            this.MData=response.data[0]
            this.FData=response.data[1]
    	})
	}

如果要使用post请求，只需将get换成post，，修改参数即可。其他方法类似。

axios.post('http://121.41.45.127:8088/playerRank',{id:1}).then(res=>{console.log(res.data);})

使用中遇到的问题

1、关于axios请求的url的问题
如果每次都使用具体的url进行请求，在url地址发生变化时，如果ip后紧跟着的路径变化，那么只需要修改使用该路径的代码；如果是ip地址发生变化，就必须将所有axios请求url进行修改，对代码的修改不利。
解决：axios提供了axios.defaults.baseURL对象进行全局请求根路径的设置，只需要设置完全局根路径，将axios挂载到Vue.prototype上即可。
代码示例:

main.js
axios.defaults.baseURL = 'http://121.41.45.127:8088';
Vue.prototype.$http = axios;

home.vue

created:function(){
        axios.get("/playerRank").then((response)=>{
            this.MData=response.data[0]
            this.FData=response.data[1]
    	})
	}

2、关于token的问题
在团队项目中，为了接口的安全性，请求中需要在请求头添加token进行请求的验证，但不好直接设置。
解决：axios提供了拦截器进行请求或者响应的拦截，可以在拦截器中队请求添加请求头内容
代码示例:

axios.interceptors.request.use(config => {
  console.log(config);
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

总结

1、axios用于浏览器端或者node.js向服务器端发送请求
2、使用axios时，最好使用全局根路径，减少变更时的代码修改以及缺漏
3、需要对请求或响应进行处理前的处理时，使用拦截器

参考文献

1、1天搞定springboot+Vue全栈开发
2、3分钟让你学会axios在vue项目中的基本用法