一、前言

对于axios的基本使用没有太多解释。如何使用可以在axios文档说明和Axios中文说明中看到

在这里与大家分享axios拦截在实际项目中的使用

很多人都看过axios官方文档中的拦截器一栏，有些人可能会有点困惑，因为文档只告诉你它是可用的，而没有告诉你在什么情况下使用它。很多初学者会放弃使用axios拦截器。毕竟拦截器是不必要的，但是使用拦截器会减少页面上很多不必要的代码。

第二，说在前面

项目使用的ui框架是iview

下面的友好提示都使用iview ui的消息提示组件，比如这个。$Message.xxx

/api/request只是一个示例接口，后台提供的接口用于实际开发。

代码是后台状态代码，这里我只是举个例子。不要问我为什么我的返回代码和你的不同.这些都需要与后台沟通达成一致。

使用的请求头是：axios . defaults . headers[' content-type ']=' application/x-www-form-URL encoded '；至于为什么使用这个请求头，你可以看另一篇关于axios发送两个请求的文章。OPTIONS请求有问题。因为使用了这个请求头，所以需要使用qs模块，否则后台不会识别这个数据。

第三，不要使用请求拦截

如果不使用请求拦截，是可以的，但是会有很多代码。让我们以登录页面为例。

没有花哨的简单页面，| )

//双向数据绑定获取值let Httprequest={ }；http request . loginname=this . loginmehttprequest . password=This . password This . $ axios . post('/API/request '，This。$ QS。Stringify (http请求))。然后(数据={//特殊错误处理，登录超时如果(数据。data.code===10) {this。$ message.error('登录已超时，请重新登录')这。$ router.push(。=0) {this。$ message . error(data . data . msg)//请求成功} else if(data . data . code==0){//成功的业务逻辑}//.});如果不使用请求拦截，那么每个请求的每个状态都需要特殊处理。如果有几十个特殊状态的请求，并且每个页面上有很多请求，页面会变得非常长和臃肿，难以维护。

第三，使用请求拦截

我们可以提取相同的请求返回代码，并将其写入请求拦截中

设置拦截后，我们可以在组件代码中简化很多，或者以登录界面为例：

在main.js中

//请求发送拦截，发送数据到后台之前要做什么.axios . interceptors . request . use((request)={//在本例中，数据是loginName和passwordlet request _ data=request.data//Unified QS模块转换请求。数据=QS。strict(request _ data)//然后发送给后台返回请求；}，函数(错误){ //用请求错误做某事返回Promise.reject(错误)；});//请求返回拦截，返回数据到页面前要做什么.axios . interceptors . response . use((response)={//特殊错误处理，当状态为10时，如果(response . data . code===10){ iview . message . error('登录已超时，请重新登录'。Router.push('/login') //其他错误状态处理} else if (response.data.code！=0){ iview . message . error(response . data . msg)//request success } else if(response . data . code===0){//将请求的信息返回到页面中的请求逻辑return response} //.}，函数(错误){ return Promise.reject(错误)；});//双向数据绑定获取值let Httprequest={ }；http request . loginname=this . loginname http request . password=this . password this。$ axios.post ('/API/request '，httprequest)。然后(data={//这是先判断数据。如果请求的数据状态码不是0，就会被拦截，那么如果(data){ //request返回成功逻辑}})则数据未定义；这样，我们在axios请求中加入了拦截，可以减少大量的代码逻辑，页面可读性和可维护性更强

四.其他人

这是axios拦截最基本的用法。当然，这并不止于此。我们还可以扩展和做更多的事情。只要你的业务需要，axios拦截总能帮到你，这需要举一反三。工具死了，人活着。我可以举另一个小例子，比如设置请求签名。

请求签名是前台和后台约定的一种通信方式。对数据进行加密可以在一定程度上保证数据的安全性

以这个登录页面为例

//双向数据绑定获取值let Httprequest={ }；http request . loginname=this . loginname http request . password=this . password this。$ axios.post ('/API/request '，httprequest)。然后(data={//这是先判断数据。如果请求的数据状态码不是0，就会被拦截，那么如果(data){ //request返回成功逻辑}})则数据未定义；在我们将httpRequest数据发送到后台之前，我们对数据进行签名和加密

在main.js中，我们截取发送的数据

//请求发送和拦截axios . interceptors . request . use((request)={//获取请求的数据，其中loginName和passwordlet request _ data=request.data//get是请求的地址。这里，/API/request let request _ URL=request.url//set签名并执行qs转换，并将其分配给请求的数据。签名函数额外封装request . data=QS . stringfy(request data fn(request _ data，request _ URL))//将请求发送到后台返回请求；}，函数(错误){ //用请求错误做某事返回Promise.reject(错误)；});//封装的签名函数函数requestdatafn (data，method){ let postdata={ }//timestamp，不显示timestamp函数，也是封装的postdata . timestamp=getnoformatdata()；//请求用户的会话和密码信息。如果为空，则不登录。登录后，我会将其保存在本地存储中。这可以存放在任何地方。这只是一个例子。post data . session=local storage . GetItem(' session ')| | ' '；postdata . secrettkey=local storage . getitem(' secrettkey ')| | ' '；//请求的地址，这里是/API/requestpostdata。方法=方法；//请求的数据是loginName和password，由base64加密。让base64 data=base64 . encode(JSON . string fy(data))；//设置签名并用md5加密。让signature=MD5 . hex(post data . secret key base 64 data post data . method post data . session post data . timestamp post data . secret key)；//再次加密数据post data . data=encodeuri(base64 data)；postData.signature=签名；返回postData}这样我们就可以对数据进行加密和签名，然后发送到后台。

注意：这只是一个例子。如果需要签名，怎么签名是前台和后台沟通的结果！

Axios请求拦截比这有用得多。如何使用取决于实际工作和实际项目。

摘要

以上就是边肖介绍的在Vue中使用axios拦截请求的实现方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！