- 在学习前端项目的过程中,使用了axios,所以总结一下axios实现数据传输的方式,axios是实现ajax请求的一个方式(封装了ajax请求),还有许多其他方式也可以做到
Ajax请求,JQuery发送请求,Axios请求,Fetch请求总结
Axios
axios的概念
axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。
axios是ajax ajax不止axios。
细谈 axios和ajax区别
什么是Ajax
Ajax用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
导入axios
- 使用数据请求需要axios
在main函数里面引入axios
import axios from 'axios';
Vue.prototype.$http = axios //添加实例 property
ps:Vue.prototype的使用:解决 替换全局使用的一个标识。解决 替换全局使用的一个标识。vue.prototype.$http-设置别名
axios的安装(我用的npm)
axios的使用
Axios拦截器
背景:输入用户名密码进行登录主页,but要验证是否是合法的用户,这时候用到Axios拦截器(即在发送数据请求前拦截一下)
具体场景和实现如下
- 后台接口提供信息为:登录授权 请求验证是否有token 需要授权的 API ,必须在请求头中使用
Authorization
字段提供token
令牌- 在main函数设置axios请求拦截器(在数据到达服务器之前进行预处理)——回调函数:
(interceptor 拦截器)
回调函数的概念
记录用户登录状态方法(cookie、token、session)
- 在前后端通信数据传输的过程中,有的涉及到用户权限的问题,这时候就需要这个三个工具
这三个功能是干什么的:
HTTP 协议是无状态的。但是随着 web 应用的发展,越来越多的场景需要标识用户身份。例如:单点登陆、购物车等等。而cookie、session 与 token,就是为了实现带有状态的“会话控制”
cookie(在客户端记录状态)session:(在服务器端记录状态)
token:维持状态状态(前段与服务器之间存在跨域问题)
将登陆信息等重要信息存放为SESSION ,其他信息如果需要保留,可以放在COOKIE中
session:
session的中文翻译是“会话”,当用户打开某个web应用时,便与web服务器产生一次session。服务器使用session把用户的信息临时保存在了服务器上,用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全,可是session有一个缺陷:如果web服务器做了负载均衡(服务器不同),那么下一个操作请求到了另一台服务器的时候session会丢失。
token:
token是什么
定义:Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。
目的:Token的目的是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。
token的使用实例
- 登录成功好后跳转到主页(使用token编程式导航)
使用window对象保存token,编程式导航到home主页,
编程式导航-----this.$router.push(’/login‘)
新建home文件,补充路由规则- 背景:home主页中定义了一个退出按钮,设置触发事件 ,点击退出到登录(/login)界面
- 编程式导航写法:this.$router.push(’/login‘)
Axios请求方法总结
GET/HEAD ——从服务器获取资源
HEAD和GET类似,也是从服务器获取资源,但是不会返回请求的实体数据,只有响应头(元信息),是GET的简易版,如果不需要资源的话,可以避免传输body数据的浪费。POST/PUT——向服务器提交数据,数据在body里
PUT和POST作用类似,有微妙不同,通常POST标识新建,PUT标识修改DELETE——删除资源,危险性大,很少用
1、需要传递对象参数的get请求写法
- get的时候params关键字不能省略(special)
【Axios】axios的get请求和post请求的写法
this.$http.get(`categories/${this.cateId}/attributes`,
{params:{sel:this.activeName}})
//路径穿插变量的值的时候,用`${}` 进行描述
const {data:res}= await this.$http.get('users', {params:this.queryInfo} )
this.$axios.get('http://localhost:8080/book/delBook',{
params:{
bookId:"bookId",
bookName:"bookName"
}
})
2、一般的get请求写法 (在url上进行拼接参数)
this.$axios.get('http://localhost:8080/book/delBook?bookId=' + bookId)
3、需要传递对象参数post :params关键字省略了
this.$axios.post('http://localhost:8080/search',{
bookId:"bookId",
bookName:"bookName"
})//省略了params关键字
4、需要传递对象参数put :params关键字省略了的一个例子
- 背景:点击确定按钮,提交编辑角色的信息,接口如下
- 接口描述:需要两个信息roleName、roleDesc,此时我已经定义了editRoleForm
const{data:res} = await this.$http.put('roles/'+this.editRoleForm.id ,{roleName:this.editRoleForm.roleName,roleDesc:this.editRoleForm.roleDesc})
5、顺便说一下js中 ± 的问题
- +优先转化为字符串
“11”+1=‘111’
“11”+‘1’=“111”- "-"优先化为数字
“11”-0=11