Follow me! 了解前端请求拦截及响应拦截处理，刚学的热乎知识点哇！

最近开发一个小系统，后端提醒我接口返回给用户的信息提示不准确，我上网搜才知道还要写请求拦截，之前独立开发的一个大系统也没进行拦截处理，也不知道哪天会不会崩。。应该不会吧哈哈

前端拦截分为请求拦截器和响应拦截器，接下来给大家说下怎么使用。

一、请求实现过程

请求主要是由以下三部分：

• 页面发起请求（前端）
• 服务器接收请求（后端）
• 服务器返回请求结果（包括数据及响应状态码）

请求拦截主要是起到

1. 对发出请求前的处理--包括请求头、请求超时、请求地址等
2. 接收到后端返回的数据进行统一处理--对请求回数据解构、添加错误提示信息等作用。

二、代码文件

我的项目使用的vue3框架及element-plus组件库，代码文件由以下几部分组成：

1. 模板及样式页面请求代码：src-pages-page.vue；
2. 路由地址页面：src-route-index.js
3. 请求拦截页面：src-utils-request.js
4. 各个请求地址页面：src-api-user.js

模板及样式页面请求代码--page.vue文件：

// 引入请求地址页面user.js定义为Server
import {Server} from '../api/user'

// 使用Server文件中对应的接口：
// 请求接口的方法
function dataAnalysis(){
  const params = {
    "creditCode":comInfor.creditcode,
    "entName":comInfor.name
  }
  Server.dataAnalyse(params).then(data => {
    reactiveData.dialogVisible = true
    reactiveData.startButton = true
    let allKeys = Object.keys(data.data);
      allKeys.sort();
      allKeys.forEach(key=>{
      reactiveData.options.push({"key":key, "value": data.data[key]})
  })
  })
}

各个请求地址页面--user.js：

import service from '../utils/request'// 引入request文件
 
 // 处理跨域
const url = '/api'

export const Server =  {
    loginList(data){
        return service.post(url + '/login', data)
    },
    dataAnalyse(data){
        return service.post(url + '/excelFinance/content/v2', data)    
    },
}

路由地址页面--index.js

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../pages/HomePage'
import LoginPage from '../pages/LoginPage.vue'
import PersonPage from '../pages/PersonPage.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
      { 
        name: '', 
        path: '/', 
        component: HomePage 
      },
      { 
        name: 'login', 
        path: '/login', 
        component: LoginPage 
      },
      { 
        name: 'person', 
        path: '/person', 
        component: PersonPage,
        meta: {
          loginRequest: true
        }
      },

请求拦截页面--request.js

import axios from 'axios';
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'
 
// 基本配置
const instance = axios.create({
//   baseURL: 'http://192.168.1.199:8301/', // 后端请求IP地址，如果跨域则单独配置，不需在此处配置
//   timeout: 25000 // 设置超时时间，单位为ms，请求时间比较长则注掉
});

// 请求数据显示加载中的方法
let loading
function loadingShow(){
    loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
}

// 请求回数据后关闭加载中组件
function loadingHide(){
    loading.close()
}
 
// 请求拦截器
instance.interceptors.request.use(config => {
    // 发出请求时显示加载中组件
    loadingShow()
    // 设置请求头   请求头中添加token
    config.headers['Authorization'] = 'Bearer ' + cookies.get('token'); // 设置请求头部分，这里举例使用了localStorage存储的token作为身份标识
    return config;
}, error => {
    // 请求出错时处理
    console.log(error, 'error');
    return Promise.reject(error);
});
 
// 响应拦截器
instance.interceptors.response.use(response => {
    // 请求回数据后关闭加载中组件
    loadingHide()
    const data = response.data;
    if (data && data.code && data.code !== 200) { // 根据接口返回的状态码判断是否有错误
        alert(`Error code ${data.code}: ${data.message}`); // 自定义错误提示
        return Promise.reject(new Error(data.message));
    } else {
        // 返回请求回来的数据
        return data;
    }
    }, error => {
        let { res } = error
        if(res){
            switch (res.status) {
                case 101 || 102:
                    ElMessage.error('密码错误')
                    break;
                case 103 || 620: 
                    ElMessage.error('参数错误')
                    break;
                case 201:
                    ElMessage.error('数据为空')
                    break;
                case 404: 
                    ElMessage.error('请求路径不存在')
                    break;
                case 601:
                    ElMessage.error('账户已过期，请重新登录！')
                    break;
                case 602 || 608:
                    ElMessage.error('账户和密码不匹配')
                    break;
                case 603:
                    ElMessage.error('账户被冻结，请30分钟后重试')
                    break;
                case 604 || 605 || 606:
                    ElMessage.error('账户异常')
                    break;
                case 607:
                    ElMessage.error('账户无权限')
                    break;
                case 609:  
                    ElMessage.error('账户不存在，请先注册')
                    break;
                case 610:  
                    ElMessage.error('账户被锁定')
                    break;
                case 630 || 631 || 632 || 633:  
                    ElMessage.error('无权限')
                    break;
                case 635:  
                    ElMessage.error('身份校验过期，请重新登录!')
                    break;
                case 651:  
                    ElMessage.error('验证码异常!')
                    break;
                default :
                ElMessage.error('请求失败')

            }
        }
    console.log(error);
    return Promise.reject(error);
});
 
export default instance;
 

这是路由拦截的实现方法及路由配置，希望能帮助到大家，有不正确的也请大家积极纠正！

作者：熊猫超不想吃cookies
链接：https://juejin.cn/post/7412665439501418506
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。