Ajax | erha blog

服务器和客户端相互的过程

1
2
3

客户端发起请求
服务器处理
服务器返回数据-响应

jQuery

1
2
3

$.get()	// 一般用于获取数据
$.post() // 一般用于提交数据
$.ajax() // 所有请求类型都支持

$.get()

$.get(url,[data],[callback])
url // string 要请求的资源地址
data // object 请求资源期间要携带的参数
callback // 请求成功的回调函数

$.post()

$.post(url,[data],[callback])
url // string 要请求的资源地址
data // object 请求资源期间要携带的参数
callback // 请求成功的回调函数

$.ajax

$.ajax({
  type:'', // 请求的方式
  url:'', // 请求的url地址
  data:{}, // 请求携带的数据
  contentType:'', // 参数格式类型
  beforeSend:function(){}, // 请求发送之前调用函数
  success:function(res){}, // 请求成功的回调函数
  error:function(xhr){} // 请求失败的回调函数
})
  
$.ajax({
	url:'',
  	dataType:'jsonp', //代表现在发送的是jsonp请求
  	json:'cb', // 修改callback参数名称
  	jsonCallback:'fnName', // 指定函数名称
  	success:function(response){}
})

form标签的属性

action // 向何处发送表单数据 默认为当前页面 提交会跳转
target // 在何处打开action url	 _self默认当前窗口 _blank新窗口
method // 发送请求的类型 (get明文,post加密,put,delete...)
enctype // 规定发送数据的编码 (文件上传时必须设置为multipart/form-data) 不上传默认设置为application/x-www-form-urlencoded(键值对 更快更好)即可

利用表单做数据采集

表单提交事件

1	onsubmit // 提交触发事件

阻止表单默认行为

1 2	event.preventDefault() //阻止默认行为 return false // 同时阻止冒泡行为和默认行为

jquery快速获取表单中的数据

1 2	$(表单).serialize(); // 结果键=值&键=值必须添加name属性 $(表单).serializeArray(); // 结果 [{name:键,value:值},{name:键,value:值}] 里面对象取决于多少个表单控件

1	表单.reset(); // 重置表单

模板引擎的好处

1
2
3

1. 减少了字符串的拼接操作
2. 使代码结构更清晰
3. 使代码更易于阅读与维护

art-template

1. 原生版本 ---可以自定义js---更加灵活强大
<% for ...%>
2. 简介版本 ---更加简单
{}

art-template的使用

1. 导入art-template
2. 定义数据
3. 定义模板
<script type="text/html" id="tpl-user">
	<h1>{{name}} ---- {{age}}</h1>  
</script>
4. 调用template函数
var data={name:'zs',age:20}
var htmlStr = template('tpl-user',data)

5. 渲染html结构
$(容器).html(htmlStr);

标准语法-输出

{{value}}
{{obj.key}}
{{obj['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

原文输出
{{@ }} // 原文输出语法，才能保证HTML标签被正常渲染

条件输出
{{if flag === 0}}
按需输出的内容
{{else if flag === 1}}
按需输出的内容
{{else}}
按需输出的内容
{{/if}}
  
循环输出
{{each arr}}
<li>索引是:{{$index}},循环项是:{{$value}}</li>  
{{/each}}

过滤器

// 更偏向加工,处理

{{value | dateFormat}} // 使用过滤器
template.defaults.imports.dateFormat = function(value){/*return处理的结果*/} // 定义过滤器

正则与字符串操作

exec

1
2
3

// exec() 函数用于检索字符串中的正则表达式的匹配(有则返回 无则返回null)  返回伪数组('完全匹配的值','索引','被匹配的字符串','命名捕获组的信息')

RegExpObject.exec(str);

分组

// 正则表达式中（）包起来的内容表示一个分组，可以通过分组来提取自己想要的内容 (只会提取第一个) 返回伪数组

RegExp = /(\d{4})-(\d{1,2})-(\d{1,2})/g;
["2020-10-22","2002","10","22"]
["匹配到的","分组的","分组的","分组的"]

replace函数

1 2	str.replace('被替换的','替换成的')

多次replace

var str = '<div>{{name}}今年{{age}}</div>';
var reg = /{{\s*([a-zA-Z]+)\s*}}/;

var res1 = reg.exec(str);
str = str.replace(res1[0],res1[1])
console.log(str)

res1 = reg.exec(str);
str = str.replace(res1[0],res1[1])
console.log(str)

res1 = reg.exec(str);
console.log(res1)


var str = '<div>{{name}}今年{{age}}</div>';
var reg = /{{\s*([a-zA-Z]+)\s*}}/;

var res1 = null;
// 如果条件表达式是一个赋值运算，对应的变量被赋值的结果,就是这个条件表达式的结果
while(res1 = reg.exec(str)){
  str = str.replace(res1[0],res1[1])
}
console.log(str)

replace替换为真值

var data = {name:'张三',age:20};
var str = '<div>{{name}}今年{{age}}</div>';
var reg = /{{\s*([a-zA-Z]+)\s*}}/;

var res1 = null;
// 如果条件表达式是一个赋值运算，对应的变量被赋值的结果,就是这个条件表达式的结果
while(res1 = reg.exec(str)){
  str = str.replace(res1[0],data[res1[1]])
}
console.log(str)

实现简易的模板引擎

// 定义模板结构
<script type="text/html" id="tpl">
	<div>姓名：{{name}}</div>
	<div>年龄：{{age}}</div>
	<div>性别：{{gender}}</div>
	<div>住址：{{address}}</div>
</script>

// 预调用模板引擎
<script>
	// 定义数据
	var data = {name:'zs',age:28,gender:'男',address:'北京顺义马坡'}

	// 调用模板函数
	var html = template('tpl',data);

	// 渲染HTML结构
	document.querySelector('#box').innerHTML=html;
</script>


// 封装template函数
function template(id,data){
	var str = document.getElementById(id).innerHTML;
	var reg = /{{\s*([a-zA-Z]+)\s*}}/;
	var res1 = null;
	while(res1 = reg.exec(str)){
		str = str.replace(res1[0],data[res1[1]])
	}
	return str;
}

HTTP协议(开发)

请求 request
	请求方式 get post
	请求地址
	请求体 get请求没有
	请求头
响应 response
	响应状态码
	响应体
	响应头

XMLHttpRequest的基本使用

// 使用xhr发起get请求
// 1.创建XHR对象
var xhr = new XMLHttpRequest();
// 2.调用open函数，指定请求方式与URL地址
xhr.open('get','http://');
// 3.调用send函数,发起Ajax请求
xhr.send()
// 4.监听onreadystatechange事件
xhr.onreadystatechange=function(){
  // 4.1 监听xhr对象的请求状态readyState；与服务器响应的状态status
  // readyState === 4 表示Ajax请求已完成
  if(xhr.readyState === 4 && xhr.status === 200){
    // 4.2打印服务器响应回来的数据
    console.log(xhr.responseText)
  }
}

// 使用xhr发起post请求
// 1.创建XHR对象
var xhr = new XMLHttpRequest();
// 2.调用open函数
xhr.open('post','http://');
// 3.设置Content-Type属性(请求头)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 4.调用send函数(请求体)
xhr.send('name=张三&age=18');
// 5.监听事件
xhr.onreadystatechange=function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    console.log(xhr.responseText)
  }
}

使用xhr发起带参数的get请求

1 2	xhr.open('get','http://.../...?id=1&name=zangsan); // 在url地址后面拼接的参数叫做查询字符串

如何对url进行编码与解码

1
2
3

encodeURI() // 编码的函数(不会编码分隔字符 ?=&)
decodeURI() // 解码的函数(一个字为三组%)
// 一般情况下浏览器都帮我们完成了

数据交换格式

1	XML和JSON和urlencoded // JSON常用

JSON

JSON是一种轻量级的文本数据交换格式 js对象表示法 
// json是js里面的一个特定的数据类型
// 作用:在计算机与网络之间存储和传输数据
// 本质就是用字符串来表示javascript对象数据或数组数据

1. 属性名必须使用双引号包裹
2. 字符串类型的值必须使用双引号包裹
3. JSON中不允许使用单引号表示字符串
4. JSON中不能写注释
5. JSON的最外层必须是对象或数组格式
6. 不能使用undefined或函数作为JSON的值

字符串，数字，null，true，false，数组，对象

序列化

1 2	JOSN.stringify() // 序列化把对象或数组转换成字符串 JOSN.parse() // 反序列化把字符串转换成对象或数组

封装自己Ajax函数

function ajax(options){
    var xhr = new XMLHttpRequest();
    var data = zh(options.data);
    if(options.method.toUpperCase() === 'GET'){
        xhr.open(options.method,options.url+'?'+data);
        xhr.send();
    }else if(options.method.toUpperCase() === 'POST'){
        xhr.open(options.method,options.url);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send(data);
    }
    
    xhr.onreadystatechange = ()=>{
        if(xhr.readyState === 4 && xhr.status === 200){
            var result = JSON.parse(xhr.responseText);
            return options.success(result);
        } 
    }
}

XMLHttpRequest Level2的新特性

1. 可以设置HTTP请求的时限
2. 可以使用FormData对象管理表单数据
3. 可以上传文件
4. 可以获得数据传输的进度信息

设置HTTP请求时限

// 应用场景 等待响应需要保持连接会占用内存资源,如果超时就不等了 
// 设置超时时限
xhr.timeout = 3000
// 设置超时以后的处理函数
xhr.ontimeout = function(){}

FormData对象管理表单数据

// 接口文档上标注了要使用FormData才使用 get不能用FormData
// 使用了FormData 默认的Content-Type就是Content-Type:multipart/form-data 所以不用设置请求头

// 1. 新建FormData对象
var fd = new FormData()
// 2. 为FormData添加表单项
fd.append('uname','zs')
fd.append('upwd','123456')
// 3. 创建xhr对象
var xhr = new XMLHttpRequest()
// 4. 指定请求类型与url地址
xhr.open('post','http://www.liulongbin.top:3006/api/formdata')
// 5. 直接提交 FormData对象，这与提交网页表单的效果，完全一样
xhr.send(fd)
// 测试返回数据
xhr.onreadystatechange=function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    console.log(xhr.responseText)
  }
}
// {"message":"测试FormData表单提交成功！","data":{"uname":"zs","upwd":"123456"}}


// 获取表单元素
var form = document.querySelector('#form1');
// 监听表单元素的submit事件
form.addEventListener('submit',function(e){
  e.preventDefault()
  // 根据form表单创建FormaData对象,会自动将表单数据填充到FormData对象中
  var fd = new FormData(form)
  var xhr = new XMLHttpRequest()
  xhr.open('post','http://www.liulongbin.top:3006/api/formdata')
  xhr.send(fd);
  xhr.onreadystatechange=function(){
  	if(xhr.readyState === 4 && xhr.status === 200){
    	console.log(xhr.responseText)
  	}
  }
})
// {"message":"测试FormData表单提交成功！","data":{"uname":"123","pwd":"123213"}}

上传文件

1. 定义UI结构
<input type="file" id="file1" />
2. 上传按钮
<button id="btnUpload">上传文件</button>
3. 显示上传到服务器的图片
<img src="" alt="" id="img" width="800" />
  
// 1. 获取上传文件的按钮
var btnUpload = document.querySelector('#btnUpload')
// 2. 为按钮添加 click 事件监听
btnUpload.addEventListener('click', function() {
	// 3. 获取到选择的文件列表(伪数组)
	var files = document.querySelector('#file1').files
	if (files.length <= 0) {
		return alert('请选择要上传的文件！')
	}
	// 4. 创建 FormData 对象
	var fd = new FormData()
	// 5. 向 FormData 中追加文件
	fd.append('avatar', files[0])
	// 6. 创建 xhr 对象
	var xhr = new XMLHttpRequest()
	// 7. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
	xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')
	// 8. 发起请求
	xhr.send(fd)
	xhr.onreadystatechange = function() {
		if (xhr.readyState === 4 && xhr.status === 200) {
			var data = JSON.parse(xhr.responseText)
			if (data.status === 200) { // 上传文件成功
				// 将服务器返回的图片地址，设置为 <img> 标签的 src 属性
				document.querySelector('#img').src = 'http://www.liulongbin.top:3006' +
				data.url
			} else { // 上传文件失败
				console.log(data.message)
			}
		}
	}

})

计算文件上传进度

var xhr = new XMLHttpRequest()
// 监听 xhr.upload 的 onprogress 事件
xhr.upload.onprogress = function(e) {
	// e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
	if (e.lengthComputable) {
		// e.loaded 已传输的字节
		// e.total 需传输的总字节
		var percentComplete = Math.ceil((e.loaded / e.total) * 100)
        percentComplete = percentComplete + '%';
        $('#percent')
		// 2. 设置进度条的宽度
		.attr('style', 'width:' + percentComplete)
		// 3. 显示当前的上传进度百分比
		.html(percentComplete)
	}
}

监听上传事件

1 2	xhr.upload.onprogress // 上传中 xhr.upload.onload // 上传完成

jquery实现文件上传

var files = $('#file1')[0].files
// 向 FormData 中追加文件
var fd = new FormData()
fd.append('avatar', files[0])
$.ajax({
  	method: 'POST',
	url: 'http://www.liulongbin.top:3006/api/upload/avatar',
	data: fd,
  	contentType:false, // 不修改Content-Type属性，使用FormData默认的Content-Type 值
  	processData:false, // 不对FormData中的数据进行url编码而是将 FormData数据原样发送到服务器 (防止对请求数据fd做url的编码)
  	success: function(res) {
		console.log(res)
	}
})

jquery loading效果

// 请求发送时调用
// 自 jQuery 版本 1.8 起，该方法只能被附加到文档
$(document).ajaxStart(function() {
	$('#loading').show()
})

// 请求结束时调用
$(document).ajaxStop(function() {
	$('#loading').hide()
})

axios

1
2
3

// 专注网络数据请求的库
// 比jq更轻量
// 比xhr更简单好用

get请求

axios.get('url',{params:{/*参数*/}}).then(function(res){
  var result = res.data; // res.data才是服务器返回的数据
  console.log(result)
})
// 参数转换成了查询字符串

post请求

axios.post('url',{/*参数*/}).then(function(res){
  var result = res.data;
  console.log(result)
})
// 参数默认转换成json

用axios发起请求

axios({
	method: '请求类型',
	url: '请求的URL地址',
  	headers: {Authorization:'Bearer '+token} // 带上token的请求头 
	data: { /* POST数据 */ }, // post传参,put传参
	params: { /* GET参数 */ } // get传参,delete传参
}).then(callback)

axios({
                method: 'get',
                ,
                url: 'http://localhost:9090/admin/getinfo',
                
            }).then(res=>{
                console.log(res)
            })

axios全局配置

// 配置公共的请求头
axios.defaults.baseURL = 'https://api.example.com';
// 配置 超时时间
axios.defaults.timeout = 2500;
// 配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 配置公共的 post 的 Content‐Type
axios.defaults.headers.post['Content‐Type'] = 'application/x‐www‐form‐urlencoded';

axios拦截器

// 1. 请求拦截器
axios.interceptors.request.use(function(config) {
	console.log(config.url)
	// 1.1 任何请求都会经过这一步 在发送请求之前做些什么
	config.headers.mytoken = 'nihao';
	// 1.2 这里一定要return 否则配置不成功
	return config;
}, function(err){
	//1.3 对请求错误做点什么
	console.log(err)
})

//2. 响应拦截器
axios.interceptors.response.use(function(res) {
	//2.1 在接收响应做些什么
	var data = res.data;
	return data;
}, function(err){
	//2.2 对响应错误做点什么
	console.log(err)
})

同源

1	// 如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。(端口默认80)

同源策略

// 是浏览器提供的一个安全功能
// 通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：
① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
② 无法接触非同源网页的 DOM
③ 无法向非同源地址发送 Ajax 请求

跨域

1	// 两个页面的协议，域名和端口任何一个或多个不相同

浏览器对跨域请求的拦截

1	// 浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截(浏览器接收到了数据)，无法被页面获取到！

实现跨域数据请求

//JSONP ：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。
// 参与人员：前端:发起jsonp请求 ，后端：提供jsonp的接口

// CORS ：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器
// 参与人员：后端：提供CORS的接口即可

// 对浏览器进行设置,关闭浏览器的安全机制
缺点：不具有普遍性，只能在联调的时候使用
设置方式
新建一个文件夹
在谷歌浏览器的快捷方式上设置属性目标
 --disable-web-security --user-data-dir=目录
// 部署的时候可以弄成同源 不存在跨域的问题

JSONP

1
2
3

// JSONP ( JSON with Padding ) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。 它不属于Ajax请求,但它可以模拟Ajax请求

// <script> 由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。因此， JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过 函数调用 的形式，接收跨域接口响应回来的数据

使用JSONP解决同源限制问题

1. 将不同源的服务器请求地址写在script标签的src属性中

2. 服务器端响应数据必须是一个函数的调用,真正要发送给客户端的数据需要作为函数调用的参数

<script>
	function success(data) {
		console.log('获取到了data数据：')
		console.log(data)
	}
</script>
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>

jsonp的缺点

// 由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以， JSONP 只支持GET 数据请求，不支持 POST 请求。注意： JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到XMLHttpRequest 这个对象

使用jquery发起jsonp请求

$.ajax({
     url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
     // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
     dataType: 'jsonp',
     success: function(res) {
     	console.log(res)
     }
})

// 默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 c allback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称

自定义参数及回调函数名称

$.ajax({
	url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
	dataType: 'jsonp',
	// 发送到服务端的参数名称，默认值为 callback
	jsonp: 'callback',
	// 自定义的回调函数名称，默认值为 jQueryxxx 格式
	jsonpCallback: 'abc',
	success: function(res) {
		console.log(res)
	}
})

jQuery 中JSONP 的实现过程

1
2
3

// jQuery 中的 JSONP ，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过， jQuery采用的是动态创建和移除标签的方式，来发起 JSONP 数据请求。
1. 在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；
2. 在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script> 标签；

防抖

1	// 防抖策略是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

防抖的应用场景

1	// 用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；

实现输入框的防抖

1
2
3

1. 防抖动的 timer
2. 定义防抖的函数，函数里面定义一个延时器，在演示器里面调用发起 JSONP 的请求
3. 在触发 keyup 事件时，立即清空 timer ，然后调用防抖的函数

缓存搜索的建议列表

1.定义全局缓存对象
// 缓存对象
var cacheObj = {}
2.将搜索结果保存到缓存对象中
// 渲染建议列表
function renderSuggestList(res) {
	// ...省略其他代码
	// 将搜索的结果，添加到缓存对象中
	var k = $('#ipt').val().trim()
	cacheObj[k] = res
}
3.优先从缓存中获取搜索建议

token的机制

// 为什么要使用token
	 因为http协议是无状态
	 两次请求之间本质上没有任何关系
// token的机制
	 访问登录接口进行登录的时候,后台会返回一个token给前端,前端需要把token存储起来 token中隐藏了用户端的登录信息
	 再次访问需要进行用户认证的接口的时候,需要把token带上,只要你带上token后端就知道你是谁了。

// 放在请求头
// 请求头的属性名:Authorization
// 请求头的属性值: Bearer + 空格 + token

var token = localStorage.getItem('token');

$.ajax({
  type:'...',
  headers:{
    Authorization:'Bearer'+''+token,
  },
  ...
})

节流阀

// 节流策略（ throttle ），顾名思义，可以减少一段时间内事件的触发频率。
当事件被触发后,延迟n秒再执行核心代码,如果在这n秒内事件又被触发,则不进行任何处理


// 应用场景
1. 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
2. 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费CPU 资源；

编程思想

1 2	// 我们可以接受定义的复杂，但是不能接受调用的复杂 // 因为定义只会定义一次，但是调用可以调用无数次

一些接口

// 地址 参数 方式 返回值

// 聊天机器人
// http://www.liulongbin.top:3006/api/robot  spoken  get   res.data.info.text    回消息
// http://www.liulongbin.top3006/api/synthesize  text  get res.voiceUrl  文字转语言

1	referer 告诉服务器当前网页是从另外哪个网页过来的

HTTP协议

1	// http协议是一个应用层的协议

TCP/IP协议

1
2
3

// TCP/IP协议不是单指一个协议,是一个协议簇(是一堆协议),其中最重要的两个协议分别是是tcp协议和ip协议,因此我们采用TCP/IP协议来统称整个协议簇
// 地位:现代互联网通信的基础,整个互联网的通信都是架构在tcp/ip协议之上的
// 把所有协议分为四层

IP地址和端口号的作用

1 2	// ip地址相当于是门牌号可以帮我们找到特定的服务器(电脑) // 端口号TCP 相当于收件人可以帮我们找到特定的服务程序

TCP协议

// 面向连接的 和打电话是一样的
// 可靠的
// TCP协议通信的三个步骤
	1. 建立连接 (拨通电话)
	2. 全双工的通信 (电话聊天)
		客户端向服务器发送请求消息
         服务器向客户端发送响应消息
	3. 断开连接 (挂掉电话)
http协议是基于tcp协议来的

UDP协议

1 2	// 和发短信是一样的 // 不可靠的

面试题

RESTful 风格的API接口

// GET: 	http://www.example.com/users  获取用户列表数据
// POST: 	http://www.example.com/users  创建(添加)用户数据
// GET: 	http://www.example.com/users/1  获取用户ID为1的用户数据
// PUT: 	http://www.example.com/users/1  修改用户ID为1的用户数据
// DELETE: 	http://www.example.com/users/1  删除户ID为1的用户数据

其他

//$.ajax请求

// 不论成功还是失败，最终都会调用 complete 回调函数
complete: function(res) {
  // console.log('执行了 complete 回调：')
  // console.log(res)
  // 在 complete 回调函数中，可以使用 res.responseJSON 拿到服务器响应回来的数据
  if (res.responseJSON.status === 1 && res.responseJSON.message === '身份认证失败！') {
    // 1. 强制清空 token
    localStorage.removeItem('token')
    // 2. 强制跳转到登录页面
    location.href = '/login.html'
  }
}