vue-ts 使用axios时，添加的自定义参数无法获取

最新推荐文章于 2024-04-29 14:57:47 发布
最新推荐文章于 2024-04-29 14:57:47 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： 随笔手记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AillenRen/article/details/103699394
版权

如题，今天在用vueTS开发时，因为需要在请求中添加额外状态，确定是否需要添加请求头信息，但是在请求的拦截器中始终无法获取到该参数。最后才发现是由于自己给config参数设置类型时写成了any 导致的问题在这里插入图片描述
在这里插入图片描述
若写成any类型，那么下面读取config中的 isUpload属性则会是未定义
总结：写any会有些莫名其妙的坑，建议大家以后也少写any类型了

AillenRen
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在项目中用ts封装axios
m0_45382009的博客
03-07 615
在项目中用ts封装axios 基础封装 import axios from 'axios' import type {AxiosInstance,AxiosRequestConfig,AxiosResponse} from 'axios' class Request{ //axios实例，并将它作为 类的instance属性（属性名自定义） instance:AxiosInstance constructor(config:AxiosRequestConfig){
react + ts or vue + ts 通用axios封装的方法。
07-21
本篇文章将深入探讨如何在React+TS或Vue+TS项目中对axios进行通用封装，以便更好地管理API请求。 首先，我们了解下什么是axios。Axios是一个基于Promise的HTTP库，它可以在浏览器和node.js中使用。它具有丰富的特性...
axios config里自定义属性，使用拦截器拦截，无法拿到自定义属性问题
小糖穿越火线
10-27 3169
axios config里自定义属性，使用拦截器拦截，无法拿到自定义属性问题 最新版本axios限制了键，对键值做了白名单处理。 解决思路： 修改源码中的内容，添加一个键来报错额外属性。 或者：使用老版本，0.18.0 ...
vue+ts+vite 异步组件&suspense保姆级教程
最新发布
weixin_44166849的博客
04-29 302
vue+ts+vite 异步组件&suspense保姆级教程
vue axios里的值取不到？——箭头立即执行函数解决axios异步问题
u012914342的博客
03-31 1173
刚入职那会，经常因为取不出来值去问师傅，其中大多数情况都是因为axios的值取不出来。总结之后发现，除了改变执行顺序之外，还可以通过箭头立即执行函数解决这个问题 首先我们来猜一下这种情况，打印的会是什么？ method () { this.text = '' axios请求.then(res => {this.text = '三火Sunfire'}) if (this.text === '') { console.log('啥也没有呀') } el
axios config 拿到自定义属性
versious的博客
05-17 626
需要在0.18.0版本及以下版本才能拿到。create里面也可以自定义属性
axios.interceptors.request 支持config自定义参数的方法及注意事项
weixin_42484910的博客
06-27 5464
1.在请求头里自定义参数 2.直接在config中自定义参数 注意 **因为axios对传入的参数做了过滤处理，我们需要在过滤白名单数组中增加我们需要的字段（axios/lib/core/mergeConfig.js中），否则config对象里找不到isgetArray,isUpdateUser...
project-xczx2-portal-vue-ts.zip
06-04
标题 "project-xczx2-portal-vue-ts.zip" 暗示这是一个使用 Vue.js 框架，并结合 TypeScript 开发的项目。Vue.js 是一个轻量级的前端JavaScript框架，以其灵活性、易用性和高性能著称。TypeScript是JavaScript的一个...
Vue-Vben-Admin - 自定义上传excel文件弹框组件
09-27
通常使用 Axios 或 Fetch API 发送POST请求，携带文件数据到服务器。文件通常以FormData形式提交，因为它们可能非常大，不适合放在URL中。 4. **进度显示**：在文件上传过程中，组件应显示上传进度，让用户知道操作...
vue-component-ts:最佳实践
03-30
Vue-Class-Componet-T Vue最佳实践Vue SPA（单页应用）最佳实践开箱git clone ...axios自定义实例拦截器TypeScript基础编译并最小化生产npm run build
vue-typescript-template:Vue + TypeScript + Elment-ui + Axios + WebSocket + animate.css + mockjs 的 Vue 项目模版
05-04
axios 的封装（重复请求取消，多个请求发送时只出现一个loading，token 失效重新刷新） 通用的工具函数（防抖、截流等） 常见指令的封装（动画指令、图片懒加载、复制指令等） Web Workers 的引入（开启一个线程、...
axios如何在请求头添加参数
Misnice的博客
08-17 6334
直接看代码 import axios from "axios" axios.get(' https://domain-name/api/qualification/query', { params: { mobile: 15712345678, }, headers: { 'activityId': 11 } }) .then( (res) => { console.log('成功', res) }) .catch( (err) => { console.log('报错提示
axios请求拦截器之config新增自定义参数
weixin_44996006的博客
08-08 3101
axios请求拦截器之config新增自定义参数
Vue中获取路由参数的问题
qq_49002903的博客
06-18 1633
本意：通过获取路由中的参数传入方法中调用接口获取数据。 **问题：**当时想的是使用mounted钩子实现，结果没有获取到参数（this.$route.query.class_id） 下面是我没解决时的代码： mounted () { this.getClassDetail() }, methods: { // 获取班级信息 async getClassDetail () { let res = await getClassDetail({
vue3.0 + ts 引入详细步骤及语法校验报错解决办法
热门推荐
wanglun_的博客
04-18 1万+
前端时间学习了ts，于是用脚手架搭了个vue3.0+ts+tsx的项目，各种语法校验问题，整理下遇到的问题以及解决办法，分享给大家。共勉！！！
关于vue3+ts的公共组件库的类型处理
m0_69605915的博客
08-22 3029
如果是自己封装的公共组件想要有类型提示则需要新建一个专门用于声明类型的.d.ts的文件进行类型处理就可以有类型提示了
vscode中 vue3+ts 项目的提示失效，volar插件失效问题解决方案
潜心
11-07 7638
📚Typescript☃️ 个人简介：一个喜爱技术的人。🌞 励志格言: 脚踏实地，虚心学习。
如何让VuePress支持ts＜script lang=“ts“＞及支持tsx＜script lang=“tsx“＞
wocwin的博客
09-25 2378
vuepress正常支持TypeScript可以参考这篇知乎，只是安装vuepress-plugin-typescript插件! 以上只是支持Ts语法如图1，不支持图2这种，页面会报图3的错误 如何解决图2这种格式 在项目中docs—.vuepress—config.js文件中添加以下这段代码 configureWebpack: { module: { rules: [ { test: /\
关于vue3+ts使用别名后无ts类型提示的解决方案
qiaozhilian的博客
09-16 970
关于vue3+ts使用别名后无ts类型提示的解决方案
vue3 ts 封装axios
08-26
在Vue 3中使用TypeScript封装Axios，可以按照以下步骤进行操作： 1. 首先，安装`axios`和`@types/axios`依赖： ```bash npm install axios @types/axios ``` 2. 创建一个新的Axios实例并进行封装。在项目的根目录下创建一个`axios.ts`文件，并在其中编写以下代码： ```typescript import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; // 创建一个自定义的Axios实例 const instance: AxiosInstance = axios.create({ baseURL: 'http://api.example.com', // 根据你的实际情况设置baseURL timeout: 5000, // 请求超时时间 }); // 请求拦截器 instance.interceptors.request.use( (config: AxiosRequestConfig) => { // 在发送请求之前做些什么 // 比如添加token等 return config; }, (error: any) => { // 对请求错误做些什么 return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( (response: AxiosResponse) => { // 对响应数据做些什么 return response.data; }, (error: any) => { // 对响应错误做些什么 return Promise.reject(error); } ); export default instance; ``` 3. 将封装好的Axios实例导入到需要使用的组件中进行调用。例如，在一个`UserService.ts`文件中，你可以这样使用： ```typescript import axios from '@/axios'; export function getUserInfo(userId: number) { return axios.get(`/user/${userId}`); } export function updateUserProfile(userId: number, profile: any) { return axios.put(`/user/${userId}`, profile); } // 其他接口请求方法... ``` 现在，你就可以在你的Vue 3组件中使用这些封装好的Axios请求方法了： ```typescript import { getUserInfo } from '@/services/UserService'; export default { mounted() { getUserInfo(123) .then((response) => { // 处理响应数据 }) .catch((error) => { // 处理错误 }); }, }; ``` 通过这种方式，你可以更好地封装和管理Axios实例，并在整个项目中重复使用定义的请求方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值