急!!Vue 3 Axios 请求方法丢失如何解决?

作者站长头像
站长
· 阅读数 27

与手上其他项目一样,axios.create的二次封装是一样的,而 API 模块从链式调用改成了单个函数导出调用。然后,接口调用时出了问题,期望有大佬能够帮忙看看如何解决。以下是部分代码:

// login.vue setup async
const accountFormOptions = reactive({
  username: '',
  password: '',
  client: 'admin',
  loginType: 'password',
  captcha: '',
  captchaKey: ''
});

// 传入固定的参数对象可以正常调用
const result = await useOnlineUserLogin({
  username: '',
  password: '',
  client: 'admin',
  loginType: 'password',
  captcha: '',
  captchaKey: ''
});

// 通过传入的代理数据会出现请求方法丢失及请求头丢失,然而在二次封装的 axios.ts 定义参数直接调用时又能正常使用,这里是和上述代码同一文件
await useOnlineUserLogin(accountFormOptions);

急!!Vue 3 Axios 请求方法丢失如何解决?急!!Vue 3 Axios 请求方法丢失如何解决?

// iam.online.ts
import axios from './axios'

export const useOnlineUserLogin = (data: IAMBuiltInModule.User.Online.Login, options?: AxiosRequestConfig) => {
  return axios.post<any, FetchResponse>(
    "/iam/token/login",
    data,
    options
  )
}
// axios.ts
import axios from 'axios'

const instance = axios.create({ baseURL: '...', timeout: 30 * 1000 });
instance.interceptors.request.use(config => {
    config.headers = config.headers ?? {};
    config.headers.Authorization = 'dev';
    return config;
});

export default instance;

提供项目接口目录:

| service
| -- api
| -- -- iam.online.ts
| -- typings
| -- axios.ts
回复
1个回答
avatar
test
2024-07-03

谢谢 @a2774206 @乔治 的回答。经过代码检测后,发现不是我写的有问题,而是公司防火墙对弱密码进行了拦截,因此第二次请求才会一直超时,这一点是我没了解到的。至于为什么传入固定参数可以通过是因为值为空。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容