课堂作业--项目文档

1.基地址

编写过程

src目录下添加一个专门写请求相关的文件夹
在里面新建一个专门放用户请求的use.js
用axios发送请求(Ajax发送请求太过繁琐)
在use.js文件夹里导入request
根据接口文档写请求

把这个请求封装成一个函数，这个函数里需要传入两个参数
这两个参数都放在data数据里所以可以直接申明需要的数据是data

效果图

2.添加请求拦截器并设置请求头

作用

在向服务器发送请求时,很多请求都需要在请求头中携带token，每一次去请求都写请求头很麻烦，所以我们写一个请求拦截器，统一拦截并添加一个请求头

代码


// 请求拦截器
request.interceptors.request.use((config) => {// Do something before request is sent// 在我们发送请求前做的事情// 判断发送的请求需不需要请求头if (store.state.tokenObj.token) {// 统一在请求头中携带tokenconfig.headers.Authorization = 'Bearer ' + store.state.tokenObj.token}return config
}, (error) => {// Do something with request error// 请求失败return Promise.reject(error)
})

3.添加响应拦截器

作用

拦截服务器返回的内容,选择性的返回给浏览器

代码


//响应拦截器
request.interceptors.response.use(function (response) {// 处理响应数据return response; // 返回响应数据
}

效果图

4.token过期处理

处理办法

使用拦截器拦截token过期的信息

代码

async function (error) {console.log('出错了');// 响应出错后所做的处理工作// return Promise.reject(error);try{//发送请求,获取refresh_tokenlet res = await axios({url: 'http://geek.itheima.net/v1_0/authorizations',method: 'put',//请求头headers: {Authorization: 'Bearer ' + store.state.tokenObj.refres_token}})//调用store里的changeToken方法,修改初始tokenstore.commit('changeToken', {// 使用第三次请求中打的到的新的token替换原本的tokentoken: res.data.data.token,// refres_token依然是原本的值refres_token: store.state.tokenObj.refres_token})// 这个时候把获取用户信息这个请求再发了一次// 在请求拦截器中,拦截器return什么,浏览器就拿到什么return request(error.config)// console.log('第三次请求获取到的内容', res);}catch{Toast.fail('登录状态失败,重新登陆')// 返回登录页router.push('./login')}});

5.无感刷新

作用

用户不用刷新页面系统内容自己重新发送请求渲染页面并且不会影响用户使用

代码

   // 这个时候把获取用户信息这个请求再发了一次// 在请求拦截器中,拦截器return什么,浏览器就拿到什么return request(error.config)

效果

加上这段代码，在两个小时后，浏览器会自己把之前失败的请求，换成新的token再发一遍用户不需要刷新页面就可以在两个小时后有新的token 并且页面不会出现任何变化

6.refresh_token过期处理

解决办法

使用 try{}catch{}处理失败的情况,把整段请求代码放进try代码里进行检验

代码

   try{//发送请求,获取refresh_tokenlet res = await axios({url: 'http://geek.itheima.net/v1_0/authorizations',method: 'put',//请求头headers: {Authorization: 'Bearer ' + store.state.tokenObj.refres_token}})//调用store里的changeToken方法,修改初始tokenstore.commit('changeToken', {// 使用第三次请求中打的到的新的token替换原本的tokentoken: res.data.data.token,// refres_token依然是原本的值refres_token: store.state.tokenObj.refres_token})// 这个时候把获取用户信息这个请求再发了一次// 在请求拦截器中,拦截器return什么,浏览器就拿到什么return request(error.config)// console.log('第三次请求获取到的内容', res);}catch{Toast.fail('登录状态失败,重新登陆')// 返回登录页router.push('./login')}

编辑页面

课堂作业--项目文档相关推荐

第一次网络信息基础作业记录文档
第一次网络信息基础作业记录文档这是我第一次网信作业的记录,欢迎大家讨论与指正任务要求:写个网页主题:自选,健康: 实现方法: a) 使用HTML5编写,用文字编辑器,不要使用Frontpage之 ...
README 规范和项目文档规范
1. README 规范我们直接通过一个 README 模板,来看一下 README 规范中的内容: # 项目名称## 功能特性<!-- 描 ...
【深入浅出项目管理视频1】-项目文档评审
决定尝试用视频的方式来表达这些繁琐的内容, 比写长篇大论可能更直观些,这是我们产品中实现的项目文档评审过程,与大家分享: 不小心录的视频有些大,得有1280宽的显示器才能看完整,也不知道视频在cnbl ...
github创建项目_用了 GitHub 上这款开源神器后，创建项目文档变得 so easy！
大家好,我是小 G. 今天跟大家分享一个可用于快速创建项目文档的开源神器:MkDocs. https://github.com/mkdocs/mkdocs 该项目创建自 2014 年,目前 GitHu ...
使用Docfx生成项目文档
使用docfx.console生成本项目的文档使用docfx.console生成其他项目的文档直接使用docfx.exe生成项目文档指定配置文档模板文档地址:http://gitlab.lig ...
信息系统项目文档及其管理
信息系统项目文档及其管理信息系统项目相关信息(文档) 配置管理配置管理的概念配置管理的目标和方针日常配置管理活动信息系统项目相关信息(文档) 1.软件文档一般分为三类:开发文档.产品文档.管 ...
【收藏】蘑菇博客mogu_blog项目文档
项目文档文档地址:http://moxi159753.gitee.io/mogu_blog_doc 备用文档地址:http://doc.moguit.cn 项目地址目前项目托管在 Gitee 和 ...
SAP项目文档　清单　考核标准
SAP项目文档的考核标准项目启动阶段项目计划及对计划的调整建议: 1. 对项目进度进行分类,定义每个阶段的关键任务. 2. 对每个阶段应形成的文档进行说明,哪类文档由谁制作,由谁签核必须做出统一 ...
知识管理≈内容管理≈文档管理≈项目文档管理
事情的起因有点偶然,阿杜和我聊起系统的时候,说我们的系统现在开发的还可以,就畅想了一下能否有一个桌面文档管理系统,问起原因,主要是感觉很多人不会管理自己的硬盘,不会管理自己的文档. 我听了也是感觉一振 ...

课堂作业--项目文档

1.基地址

编写过程

效果图

2.添加请求拦截器并设置请求头

作用

代码

3.添加响应拦截器

作用

代码

效果图

4.token过期处理

处理办法

代码

5.无感刷新

作用

代码

效果

解决办法

代码

编辑页面

课堂作业--项目文档相关推荐

最新文章

热门文章