axios设置请求头ts类型检测报错
在写项目的时候给请求拦截头加登录验证的时候遇到的，发现在axios1.1.3的版本之后，ts中，添加请求的通过 . 的时候，类型检测会报错
Authorization这个属于自定义的属性，ts不认，vue可以，相当于对象的创建与赋值
解决办法 1:
将axios 的版本降到1.1.3的版本，但是在工作中，肯定是用的最新版本,（不是最优解）
你需要先卸载axios现在的版本,使用命令,这里楼主使用的是yarn,各位大大可以使用其他的
yarn remove 你要卸载的依赖包
安装:yarn add axios@1.1.3
在这里，作者我用的是axios1.2.2的版本，是已经不能使用 **.**点语法来新增请求头了。
**办法2（最优解） :
**用axios 里面提供的config.headers.set方法来解决，set可以设置请求头的成员，就是自定义请求头成员
但是不止只设置 config.headers.set(“Authorization”, Bearer ${token}, false)这一句，ts会报错，因为set方法的类型太多了，ts没有办法识别,、
办法2的解决办法：
在上图中,先进行类型判断 if (typeof config.headers.set === ‘function’) {
config.headers.set(“Authorization”, Bearer ${token}, false)
}
可以简洁版 : typeof config.headers.set === ‘function’ && config.headers.set(“Authorization”, Bearer ${token}, false) 这是利用的逻辑中断
办法三(不推荐):
继承接口 AxiosRequestConfig的类型
ts不推荐使用any关键字，因为any就是为了逃避ts类型检测
interface RequestConig extends AxiosRequestConfig{
headers:any
}
instance.interceptors.request.use(
(config:RequestConig) => {
const store = useUserStore()
const token = store.userInfo?.token
if (token && config.headers) {
config.headers.Authorization = Bearer ${token}
}
}
return config
},
(err) => {
return Promise.reject(err)
}
)
以上就是楼主我遇到的一个ts的问题，如果有其他的建议，希望各位大大，多在评论区讨论或者私聊作者!
原文地址:https://blog.csdn.net/weixin_44399994/article/details/129287612
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_19013.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
