vue项目接口响应之前默认给所有接口加上公共参数的操作

温柔雨哥a

已于 2022-03-11 15:41:06 修改

阅读量2.8k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-03-11 15:39:01 首次发布

本文链接：https://blog.csdn.net/CSDN_bare/article/details/123426238

版权

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

如果是get请求需要在URL后面拼接的话
用到的是

config.params = {'appkey':appkey}

如果是post请求不需要在URL后面拼接的话
用到的是

config.data = {'appkey':appkey}

那这时候直接添加会有问题在请求拿到的参数中只会拿到你添加的这个公共参数页面中参数就没有了就会出问题
所以我们需要在加上公共参数的基础上拼接上我们原有的参数某一些参数
这样的就大功告成
在这里插入图片描述

 //登录成功以后给每个接口加上公共参数appkey
  let appKey = window.localStorage.getItem("appKey")
  if (appKey) {
    config.data = Object.assign({ 'appKey': appKey }, config.data)
  }

在这里说下 appkey是在登陆成功以后才要在每个接口加上的公共参数
所以会判断下当参数有值的时候才会添加

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

温柔雨哥a

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue项目接口响应之前默认给所有接口加上公共参数的操作

给所有接口加上公共参数
复制链接

扫一扫

vue项目-配置公共参数

太易博客

06-25

4998

1.安装generate-asset-webpack-plugin npm install --save-dev generate-asset-webpack-plugin 2.修改 /build/webpack.dev.conf.js const GenerateAssetPlugin = require('generate-asset-webpack-plugin'); const...

vue封装axios（统一添加请求参数，如token useId等）

qq_34169240的博客

11-05

7045

main.js中： import axios from 'axios' import VueAxios from 'vue-axios' import qs from 'qs'; Vue.prototype.$qs = qs; //请求的拦截器 /*axios.defaults.transformRequest=[function(data){ return qs.stringify(d...

参与评论您还未登录，请先登录后发表或查看评论

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

zezejingi的博客

02-23

5771

vue项目之请求拦截器(接口响应之前默认给所有接口加上某些参数) 一、在request.js中的请求拦截器里面添加如下代码 service.interceptors.request.use( config => { //请求之前需要添加参数的方法 requestMethod(config) } ) 请求方式不同要拿的参数也不相同，主要事post请求 post请求 get、put、delete请求在接口请求前添加以下方法的代码 function requestMethod(config) {

vue项目接口响应之前默认给所有接口加上公共参数

最新发布

weixin_65278721的博客

03-21

236

【代码】vue项目接口响应之前默认给所有接口加上公共参数。

vue 如何添加公共请求参数。

qq_43577012的博客

05-17

861

添加公共参数： axios.interceptors.request.use(config => { config.data = { token: token, ...config.data } // 必须return return config })

vue项目接口域名动态获取操作

10-14

Vue 项目中，接口域名的动态获取是一个常见的需求，特别是在多环境部署的场景下，比如开发环境、测试环境和生产环境。这样的需求可以避免因为环境切换频繁打包的问题，提高开发效率。以下是如何在 Vue 项目中实现...

vue项目接口管理,所有接口都在apis文件夹中统一管理操作

10-14

主要介绍了vue项目接口管理,所有接口都在apis文件夹中统一管理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

详解Vue.js 响应接口

11-20

在Vue中，响应式系统是其核心特性之一，它使得数据的改变能够自动更新视图，而无需手动操作DOM。本文将深入探讨Vue.js中的响应式接口，特别是如何使用`$watch`属性以及如何处理动态添加或删除属性。首先，`$watch`...

Vue 请求传公共参数的操作

11-19

我就废话不多说了，大家还是直接看代码吧~ // An highlighted block //http request拦截器 axios.interceptors.request.use( config =>{ const token = window.sessionStorage.getItem('Tk_token') const user_id=window.sessionStorage.getItem('Tk_user_id') // config.data = JSON.stringify(config.data); // config.headers = { //

【vue】没有公共参数api，怎么设置反向代理

Qxn530的博客

11-04

929

后端返回的接口中没有公共参数，比如api，怎么设置反向代理

vue的$http的get请求要加上params操作

01-22

vue GET传递参数要加上params this.$http.get(‘/operation/customer/question/edits’,{params:{id: 10}}) 另外说一句，现在VUE官方推荐使用axios vue-resource不更新了补充知识：vue请求中 post get传参方式是不同的哦我在学习vue，项目中post请求，get请求都用到了，我发现传参方式是不一样的。 post请求的例子： checkin (){ this.$http.post('my url',{ mobilePhone:this.phone, password:this.passw

Vue3.0——公共数据配置、网络配置、插件配置——use语法、路由配置

qq_52301431的博客

09-21

1294

同2.0一样use函数接受一个函数或者对象(对象有install函数) 然后会调用这个传入的回调函数给它传参app对象,以此来实现第三方插件。如果使用的是setup语法糖，getCurrentInstance就只能在中。因为v2使用公共配置时一般绑定在原型上无论是否使用都在每一个组件的this链上,这样的设计不太友好,Vue3.0中setup中没有了this，那么有些东西配置到原型链上，就没有意义了。全局守卫、独享守卫、组件守卫逻辑不变，语法略微调整。

vue项目封装axios请求，封装公共的api以及使用流程

weixin_46882457的博客

05-25

678

此文主要讲在vue-cil项目中如何配置代理，封装axios，封装请求，封装公共的api，页面如何调用请求。

vue统一接口api文件夹里的全部请求参数

QZ9420的博客

12-19

707

src/main.js import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // 统一接口api里边的全部请求参数 --统一引入 import * as API from '@/api' new Vue({ render: h => h(App), beforeCreate() { Vue.prototype.$API = API } }).$mount('#app

Nuxt 使用路由守卫为URL添加默认query查询参数

薛小科的博客

05-20

1413

使用Nuxt进行页面跳转的时候会更新URL，此时会发现携带的参数丢失了，但是我们又想在跳转任意路由的时候都携带默认统一的参数，目前想到以下两个实现方案：跳转时手动添加（this.$router.push({name: ‘home’, query: { id: 1 }})）【麻烦且扩展性不好】利用router路由守卫自动添加，（基于plugins特性） // ~/plugins/router.js export default ({ app }) => { app.router.beforeE

vue--配置请求/响应拦截器

gzmhxsn的博客

01-31

8768

配置响应拦截器在案例中后端传输给我的数据包括：响应码（code），响应信息（message），对象由于我们前端在发送一个请求时，服务端的响应也许会各不相同，我们前端所做出的处理也会不一样。可是如果在每个事件里都单独将对于这些不同响应的处理都写一遍，代码十分冗余，浪费时间，可读性也不高。所以：我们为你前端要配置一个响应拦截器，将每一次服务器的响应都拦截下来做一次判断和对应的操作，再将数据传出。接下来，就上具体步骤： 1.配置安装’axios’ axios的作用：axios主要是用于向后台发起请求

vue 请求统一封装和调用

涂涂

06-03

7707

1. request.js统一封装的请求接口 /* * @Author: your name * @Date: 2020-03-20 14:17:34 * @LastEditTime: 2020-03-26 11:27:50 * @LastEditors: your name * @Description: In User Settings Edit * @FilePath: 。。。。。。。。。。 */ import axios from 'axios' import { Message

vue请求拦截-统一配置请求头

weixin_30538029的博客

07-13

1609

/* 直接引入这个文件作为xios import axios from './http' main.js里也要引入 */ // import Vue from 'vue' import { Toast } from 'vant'; import axios from "axios" import { restUrl as baseUrl } from '@/confi...

vue+axios全局添加请求头和参数操作

江湖行骗老中医

02-18

7129

走登录的接口都会返回一个token值，然后存起来方便之后调接口的时候给后台传过去，传给后台的方式有两种：（具体使用哪种需要和后台商量） 1、放在请求头中 2、放在接口的参数中 1、放在请求头中下面代码是从本地cookie中拿token VueCookie：一个用于处理浏览器cookies的简单Vue.js插件. // 在封装axios的文件中添加拦截器// 添加请求拦截器，在请求头中加token service.interceptors.request.use(config => {.

vue项目接口管理,所有接口都在apis文件夹中统一管理

05-22

是的，这是一种非常好的实践方式。在Vue项目中，我们可以将所有的接口请求都统一放在一个apis文件夹中进行管理。这样做的好处有以下几点： 1. 方便维护：将所有接口请求都放在一个文件夹中，可以更方便地进行管理和维护。我们只需要在一个地方修改接口地址，就可以让所有相关的页面都生效。 2. 代码复用：将接口请求封装成一个函数，可以在不同的组件中进行复用。 3. 易于测试：将接口请求封装成函数，我们可以更方便地进行单元测试，确保代码的正确性。具体实现方式可以参考以下步骤： 1. 在Vue项目的src目录下创建一个apis文件夹。 2. 在apis文件夹中创建一个index.js文件，用于统一导出所有的接口请求函数。 3. 在index.js文件中，可以使用axios库来进行接口请求的封装。 4. 在需要使用接口请求的组件中，引入apis/index.js文件，然后调用对应的接口请求函数即可。下面是一个示例代码： ```javascript // apis/index.js import axios from 'axios' const BASE_URL = 'https://api.example.com' export const getUserInfo = () => { return axios.get(`${BASE_URL}/user/info`) } export const login = (username, password) => { return axios.post(`${BASE_URL}/user/login`, { username, password }) } ``` ```javascript // 在组件中使用接口请求 import { getUserInfo, login } from '@/apis' // 获取用户信息 getUserInfo().then(res => { console.log(res.data) }) // 登录 login('username', 'password').then(res => { console.log(res.data) }) ```