Axios,Ajax和fetch

Miraitowa007
461 阅读3分钟

一，Axios和Ajax

AJax类比飞机，，Axios类比747飞机
Ajax技术实现了不刷新页面进行局部更新的操作；
Axios是通过Promise实现XHR封装，其中Promise是控制手段，XHR是实际发送Http请求的客户端

// axios
const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  //不需要将data中的数据处理为json
  data: {
    a: 10,
    b: 20
  }
};

axios(options)
  .then(response => {
    console.log(response.status);
  });

二，fetch

// fetch()
const url = 'http://localhost/test.htm';
const options = {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  body: JSON.stringify({
    a: 10,
    b: 20
  })
};

fetch(url, options)
  .then(response => {
    console.log(response.status);
  });

注意：

三，Vue前端登陆拦截

  • router.js
    在路由跳转时触发；
    在router.js中设置beforeEach判断是否登陆token存在（但无法判断token是否失效）；

在http请求时触发；

  • axios.js
    创建axios.interceptors.request(在请求头中加入token)/respones.use(function(){return })（判断返回的token是否生效）;axios请求或响应拦截器，一定要有返回值；
  • main.js
    创建Vue.http.interceptors.respones利用vue-resource实现 和axios等价 实现一个就可以；

四，前端登陆验证的方式

  • cookie+session
    前言：
http的请求是无状态的，每一次发起http请求都需要重新建立一次服务器的连接，从而减少服务器的占用，但是，服务器因此无法判断用户是否登陆，所以引用了cookie,伴随着每一次http请求出现


登陆流程：用户第一次登陆时，服务器验证成功，服务器创建并保存sessionid,将sessionid返回给浏览器，将sessionid保存近cookie,下一次发送http请求后，服务器根据传递的cookie验证cookie是否有效，有效则登陆成功。【sessionid】存在cookie中，所以当停用cookie,sessionid也随之失效。
缺点：当面对多个用户时，每一次客户端注册了一个用户，服务器就需要对应存入一个sessionid,导致服务器压力过大，同时无法避免csrf攻击；

  • token
    解决了cookie+session登陆的瑕疵；

    登陆流程：第一次用户登陆时，服务器验证，验证成功后生成token,返回给客户端；客户端允许访问。下一次登陆时，携带token，服务器判断token是否生效，失效跳入登陆面，成功，允许用户访问。【token可以存在任何部分】
    token生成过程
    最常见的时JWT(json web token)
    1，header 部分指定了该 JWT 使用的签名算法；
    2，playload 部分表明了 JWT 的意图：
    3，signature 部分为 JWT 的签名

  • 首先，将header，playload进行base64编码拼接到一起生成unsignedToken，然后把服务器密钥与其拼接到一起生成signature；然后，将三部分字符串用.拼接到一起；
    验证时，服务器得到signature解码判断是否与unsignedToken解码后相同，从而判断是否被窜改；

avatar
文章
阅读
粉丝