请求拦截器-基本写法:

响应拦截器放在数组后面遍历执行链表就实现了拦截器的顺序执行过程。

返回对应错误信息

注册之后调用接口请求发送时--》执行请求拦截器--》服务器服务器响应内容--》执行响应拦截器--》接收数据

请求拦截器-基本写法:

axios.interceptors.request.use(function

(config)

通过config可以获取请求的设置比如headers可以获取修改请求头return

config;

通过请求拦截器统一设置token设置一次之后后续调用接口不用单独设置

核心步骤:

axios.interceptors.request.use(function

(config)

渲染数据Object.keys(overview).forEach(key

{document.querySelector(.${key}).innerText

overview[key]})}

判断token失效状态码401:token过期token被篡改//

console.dir(error)if

删除缓存并提示用户localStorage.removeItem(username)localStorage.removeItem(token)//

使用普通用户可以理解的方式提示他们showToast(请重新登录)

​//

axios.interceptors.response.use(function

(response)

axios.interceptors.response.use(function

(response)

删除缓存localStorage.removeItem(token)localStorage.removeItem(username)//

返回登录页setTimeout(()

渲染数据Object.keys(overview).forEach(key

{document.querySelector(.${key}).innerText

overview[key]})

axios响应拦截器-数据剥离页面中使用数据时少写一个data

核心步骤:

axios.interceptors.response.use(function

(response)

剥离data属性页面中少写.data属性直接可以获取到数据return

response.data;

删除缓存localStorage.removeItem(token)localStorage.removeItem(username)//

返回登录页setTimeout(()

渲染数据Object.keys(overview).forEach(key

{document.querySelector(.${key}).innerText

overview[key]})

document.querySelector(#btn-register).addEventListener(click,

async

document.querySelector(.register-form)const

data

{showToast(用户名的长度为8-30,密码的长度为6-30)return}

​//

console.log(res)showToast(res.message)}

catch

console.dir(error)showToast(error.response.data.message)}

document.querySelector(#btn-login).addEventListener(click,

async

document.querySelector(.login-form)const

data

{showToast(用户名长度8-30密码长度6-30)return}

​//

console.log(res)showToast(res.message)//

缓存响应数据localStorage.setItem(token,

res.data.token)localStorage.setItem(username,

res.data.username)//

login.html和index.html的相对关系location.href

./index.html},

console.dir(error)showToast(error.response.data.message)}