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

与手上其他项目一样,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);

image.png
image.png

// 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
阅读 2.9k
3 个回答
✓ 已被采纳

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

应该是reactive的问题你需要用toRefs把该响应式对象结构成普通对象进行传值

import { reactive, toRaw } from 'vue';

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

await useOnlineUserLogin(toRaw(accountFormOptions));
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏