request.js中都有哪些准备工作？

JavaScript07

request.js中都有哪些准备工作？,第1张

在until文件夹下，创建request.js,request.js文件中的内容有以下几种：

①引入要调用的模块 （根据实际情况引入）

②接口调用基准路径

可以直接写到axios创建的实例对象中也可以单独赋给变量，这样是方便之后的维护

还有 请求超时 时间的参数设置    timeout : 5000    // request timeout

③请求拦截器------axios内置的一个函数

请求拦截器一般用来给请求统一携带添加请求头

首先要获取到token,如果存在vuex中就通过store获取，如果存在本地就通过localStorage.getItem（'token'）获取

然后判断token是否存在， 如果存在说明登陆成功了，就统一添加到请求头中，与Bearer进行拼接

如果不存在就会进入到 响应拦截器 啦，然后重新发起请求 获取token ,获取成功再进入请求拦截器....

这样封装接口的时候就不需要手动添加了！！！

④响应拦截器------axios内置的一个函数

响应拦截器一般是用来给响应结果做出动作的，例如响应状态码为 401 ，说明是 token失效问题 ，这是就要做出一系列的动作：

跳转到登录页重新登陆或者进行token的续签

方式一：跳转到登录页，并清空本地和vuex的token

方式二：token续签

续签方式1：清空vuex和本地的token，重新登陆，并且登陆后访问的页面是退出时访问的页面，需要记住路径参数

token过期了，这时还是一样 跳转到到登录页面，清空vuex和本地token ，或者项目中封装了 退出登录的函数 ，此时 调用 即可，退出登录的接口中包括了页面跳转和清空token的操作。

之后点击登录之后，页面跳转到退出时的页面 页面的路由地址我们也可以得到（调试工具或者其他地方）需要我们仔细观察呦。这是在js文件中，所以使用的是   router.currentRoute.fullPath

encodeURIComponent() 函数可把 字符串作为 URI 组件进行编码。 该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

其他字符（比如 ：/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

续签方式2：

当token失效时，接口接收到401状态码之后，自动调用接口重新获取token,并且通过vuex的mutations函数给vuex的token重新赋值，并且保存在本地一份，然后利用新的token把之前未成功的请求重新再发一次，注意要同时刷新请求头的token

⑤封装通用的接口调用方法并默认导出

方式1：配置参数时，如果请求方式是get，请求参数就用params,如果是get就用data

方式2：在request.js中封装一个通用API

之后在各个api文件中导入这个模板，直接传参即可，如下：

使用时直接导入变量名，如果其它api文件中也有相同的变量名，为了防止冲突，可以通过 as 更改接口的名称

什么是request对象

Request对象的作用是与客户端交互，收集客户端的Form、Cookies、超链接，或者收集服务器端的环境变量。

request对象是从客户端向服务器发出请求，包括用户提交的信息以及客户端的一些信息。客户端可通过HTML表单或在网页地址后面提供参数的方法提交数据，然后通过request对象的相关方法来获取这些数据。request的各种方法主要用来处理客户端浏览器提交的请求中的各项参数和选项。

在JS中获取到request，网页地址的方法:

window.location.href

这里假设URL完整为：baidu.com/index.html?test=233333

这里要取request中值的属性，可以使用正则表达式获取

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。

首先使用RegExp构造一个正则正则表达式对象

var reg = new RegExp("(^|/?|&)test=([^&]*)(&|$)", "i")

参数

pattern             一个字符串，指定了正则表达式的模式或其他正则表达式。

attributes          可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

修饰符

i    执行对大小写不敏感的匹配。  

g    执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。  

m    执行多行匹配。  

然后使用match匹配出结果来

var match= window.location.href.match(reg)

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

参数

searchvalue    规定要检索的字符串值。  

regexp            规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。  

取出结果

match[2]

返回：233333

将它封装为一个函数

function getRequestValue(name) { 

var reg = new RegExp("(^|/?|&)" + name + "=([^&]*)(&|$)", "i") 

var match= window.location.href.match(reg) 

return match&&match[2]||null

}

完整实例代码：

<html>

<head>

<title></title>

</head>

<body>

</body>

<script type="text/javascript">

function getValue(name) { 

var reg = new RegExp("(^|/?|&)" + name + "=([^&]*)(&|$)", "i") 

var match= window.location.href.match(reg) 

return match&&match[2]||null

}

console.log(getValue('test'))

</script>

</html>