Axios如何实现数据请求、前后端通信——(具体代码是如何实现的)

  • 在学习前端项目的过程中,使用了axios,所以总结一下axios实现数据传输的方式,axios是实现ajax请求的一个方式(封装了ajax请求),还有许多其他方式也可以做到
    Ajax请求,JQuery发送请求,Axios请求,Fetch请求总结

    • Axios
      • axios的概念
      • 什么是Ajax
    • 导入axios
    • Axios拦截器
      • 记录用户登录状态方法(cookie、token、session)
      • token的使用实例
    • Axios请求方法总结

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如何实现数据请求、前后端通信——(具体代码是如何实现的)_第1张图片
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

导入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 拦截器)
    Axios如何实现数据请求、前后端通信——(具体代码是如何实现的)_第2张图片

回调函数的概念

记录用户登录状态方法(cookie、token、session)

  • 在前后端通信数据传输的过程中,有的涉及到用户权限的问题,这时候就需要这个三个工具

这三个功能是干什么的:

HTTP 协议是无状态的。但是随着 web 应用的发展,越来越多的场景需要标识用户身份。例如:单点登陆、购物车等等。而cookie、session 与 token,就是为了实现带有状态的“会话控制”

区别
cookie、token、session的区别

cookie(在客户端记录状态)session:(在服务器端记录状态)
token:维持状态状态(前段与服务器之间存在跨域问题)
将登陆信息等重要信息存放为SESSION ,其他信息如果需要保留,可以放在COOKIE中

session:

session的中文翻译是“会话”,当用户打开某个web应用时,便与web服务器产生一次session。服务器使用session把用户的信息临时保存在了服务器上,用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全,可是session有一个缺陷:如果web服务器做了负载均衡(服务器不同),那么下一个操作请求到了另一台服务器的时候session会丢失。

token
token是什么

定义:Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。
目的:Token的目的是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。

Axios如何实现数据请求、前后端通信——(具体代码是如何实现的)_第3张图片

token的使用实例

  • 登录成功好后跳转到主页(使用token编程式导航)
    Axios如何实现数据请求、前后端通信——(具体代码是如何实现的)_第4张图片
    使用window对象保存token,编程式导航到home主页,
    编程式导航-----this.$router.push(’/login‘)
    新建home文件,补充路由规则
  • 背景:home主页中定义了一个退出按钮,设置触发事件 ,点击退出到登录(/login)界面
  • 编程式导航写法:this.$router.push(’/login‘)
    Axios如何实现数据请求、前后端通信——(具体代码是如何实现的)_第5张图片
    在这里插入图片描述

Axios请求方法总结

html请求方法

  • 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
    Axios如何实现数据请求、前后端通信——(具体代码是如何实现的)_第6张图片
    Axios如何实现数据请求、前后端通信——(具体代码是如何实现的)_第7张图片
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

你可能感兴趣的:(前端学习记录,javascript,开发语言,ecmascript)