配置响应拦截器

在案例中后端传输给我的数据包括:响应码(code),响应信息(message) , 对象

由于我们前端在发送一个请求时,服务端的响应也许会各不相同,我们前端所做出的处理也会不一样。

可是如果在每个事件里都单独将对于这些不同响应的处理都写一遍,代码十分冗余,浪费时间,可读性也不高。

所以:我们要为前端要配置一个响应拦截器,将每一次服务器的响应都拦截下来做一次判断和对应的操作,再将数据传出。

配置请求拦截器

请求拦截器中的token,是后端颁发给我们的通行令牌。用于登录,后来的界面访问权想等等都是有很大作用的。在此案例中,一旦用户合法登录账号,后端的响应里会提供给前端一个 token 令牌。前端为了可以方便的在每一次请求前携带这个令牌,会将 token 存储在sessionStorage 中。

sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

请求拦截器就是会将每一次请求拦截,判断 sessionStorage 中是否含有 token , 做出相应的对相应的处理

接下来,就上具体步骤:

1.配置安装’axios’

axios的作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。
在终端运行 npm install axios
package.json 目录中会多出:

"dependencies": {
    "axios": "^0.21.1",
   ……
  },

2.配置响应拦截器

首先在src目录下建立文件夹,新建api.js文件

目录如下:
在这里插入图片描述
在api.js文件里:

1.

首先与要导入’axios‘模块
由于会出现’未登录‘的状态响应码,需要跳转到登陆页面(案例中的路径是’/‘),需要引入router
导入message组件做出消息提示。

2.

api接口的相应会有两种大的情况:前端成功获得了后端的响应;前端没有获得后端的相应。
axios.interceptors.response.use((success) => {} , (error)=>{})
其中, (success)=>{} 中,前端具体提供什么信息,又由后端提供的响应码(code),来决定。

例:如果前端成功获取后端响应,但是操作违反了后端的业务逻辑,后端会响应500 , 401 , 403 这样的响应码。同时前端可以把响应携带的响应信息(message)抛出给用户。

3.

封装请求。使用base ,如果日后url需要加上前缀,可以直接添加设置。

import axios from 'axios'
import { Message } from 'element-ui';
import router from '../router/index'

//请求拦截器
axios.interceptors.request.use((config) => {
//如果存在token,请求携带token
if(window.sessionStorage.getItem('tokenStr')){
config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
}
return config ;
}, (error) => {
   Message.error({ message: error });
})

//api接口 响应成功 / 响应失败 【响应拦截器】
//后端提供:响应码,响应信息,对象
axios.interceptors.response.use((success) => {
   if (success.status && success.status == 200) {
      if (success.data.code == 500 || success.data.code == 401 || success.data.code == 403) {   //接口请求成功,业务逻辑错误
         Message.error({ message: success.data.message });
         return;
      }
      if (success.data.message) {
         Message({ message: success.data.message });
      }
   }
   return success.data;
}, (error) => {
   if (error.response.code == 504 || error.response.code == 404) {
      Message.error({ message: '服务器被吃了( ╯□╰ )' });
   } else if (error.response.code == 403) {
      Message.error({ message: '权限不足,请联系管理员' });
   } else if (error.response.code == 401) {
      Message.error({ message: '请登录账号' });
      router.replace('/');
   } else {
      if (error.response.message) {
         Message({ message: error.response.message });
      } else {
         Message({ message: '该错误触及盲区(●ˇ∀ˇ●)' });
      }
   }
});

//封装请求
//post
let base = '';
export const postRequest = (url, params) => {
   return axios({
      method: 'post',
      url: '${base}${url}',
      data: params
   })
};

//put
export const putRequest = (url, params) => {
   return axios({
      method: 'put',
      url: '${base}${url}',
      data: params
   })
};

//get
export const getRequest = (url, params) => {
   return axios({
      method: 'get',
      url: '${base}${url}',
      data: params
   })
};

//del
export const deleteRequest = (url, params) => {
   return axios({
      method: 'delete',
      url: '${base}${url}',
      data: params
   })
};

最后不要忘记在入口js文件中引入api.js。
以上,就是我学习配置响应拦截器的全部步骤。
记录下来,希望对大家有帮助哦。

Logo

前往低代码交流专区

更多推荐