vue项目之请求拦截器(接口响应之前默认给所有接口加上某些参数)

啧啧静

已于 2022-12-19 14:40:17 修改

阅读量5.9k

点赞数

文章标签： vue.js less vue

于 2021-02-23 17:11:30 首次发布

本文链接：https://blog.youkuaiyun.com/zezejingi/article/details/113996562

版权

本文介绍如何在Vue项目中使用请求拦截器，通过requestMethod函数为所有接口统一添加固定参数，简化代码并实现数据管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目之请求拦截器(接口响应之前默认给所有接口加上某些参数)

一、在request.js中的请求拦截器里面添加如下代码

service.interceptors.request.use(
	config => {
		//请求之前需要添加参数的方法
    	requestMethod(config)
	}
)

请求方式不同要拿的参数也不相同，主要事post请求
post请求
在这里插入图片描述

get、put、delete请求
在这里插入图片描述
在接口请求前添加以下方法的代码

function requestMethod(config) {
  let i = '';
  switch (config.method) {
    case "get":
      i=config.params
      break;
    case "post":
      i=config.data
      break;
    case "put":
      i=config.params
      break;
    case "delete":
      i=config.params
      break;
  }
  // 在请求拿到的参数中统一加上某一些参数（根据自己的项目需求追加）
  // 根据项目需要也可以统一做其他操作
  i=Object.assign(i, {
    app_id: "11111",
    name: "开心笑i",
    age:"18"
  })
}

这样统一写的方式减少很多冗余的代码，也进行了统一的数据追加管理，有不理解的地方大家可以多多提问，有更好的解决方案大家也可以讨论呃