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

• 在学习前端项目的过程中，使用了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、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的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。

token的使用实例

• 登录成功好后跳转到主页（使用token编程式导航）
  
  使用window对象保存token，编程式导航到home主页,
  编程式导航-----this.$router.push（’/login‘）
  新建home文件，补充路由规则
• 背景：home主页中定义了一个退出按钮，设置触发事件 ，点击退出到登录（/login）界面
• 编程式导航写法：this.$router.push（’/login‘）
  
  

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
  
  

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