[axios]响应拦截器中的 config.data 已被更改

2024-08-22 126 views
5

我正在使用 axios 请求和响应拦截器,但它似乎response.config.data不是一个对象。

这是我的请求拦截器:

config.data是我的表单对象的一个​​实例

API.interceptors.request.use((config) => {
  if (config.data instanceof Form) {
    config.data.startProcessing()
  }
  return config
})

现在转到响应拦截器,它似乎已经是一个字符串,不再是一个表单了。

API.interceptors.response.use((response) => {
  // this response.config.data is now a string not my Form object anymore
  if (response.config.data instanceof Form) {
    response.config.data.finishProcessing()
  }
  return response
})

回答

2

你好,

我已经创建了您的问题的一个小复制品

const axios = require('axios');

axios.interceptors.request.use((config) => {
  console.log(config.data, typeof config.data); // console.log an object
  return config;
});

axios.interceptors.response.use((response) => {
  console.log(response.config.data, typeof response.config.data); // console.log a string
  return response
});

axios.get("http://localhost:8000", { data: {foo : true }});

我尝试覆盖此行为并得到此行为:转换后的数据必须是字符串、ArrayBuffer、Buffer 或 Stream

axios 需要适当的数据属性才能正确发送,就您而言,我认为它会使用 JSON.stringify 转换您的对象。

允许用户直接提供将被 JSON 字符串化的对象,这似乎是正常行为。

3

我也遇到同样的问题,我发现如果 response.data 不再是,console.log 的结果就是对象,如果更大,结果就是字符串。有什么办法解决吗?此外,我在 Node.Vue + ssr 中运行此代码

2

因此只需在 node-module/axios/lib/defaults.js 中尝试一下,更改这个 Fun。

transformResponse: [function transformResponse(data) {
    /*eslint no-param-reassign:0*/
    if (typeof data === 'string') {
      try {
        if (!String.prototype.trim) {
          String.prototype.trim = function () {
            return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
          };
        }
        data = JSON.parse(data.trim(''));
      } catch (e) { 
        /* Ignore */
        console.log('can not JSON.parse the response', e)
      }
    }
    return data;
  }],

希望这能帮助你。

3

@liveKang 它对我有用。谢谢你!

5

同样问题,希望解决。

1

原因是响应拦截器中的 config.data 已更改,以及我编辑的问题标题。一种解决方法是将原始数据保存在配置的自定义字段中。

API.interceptors.request.use((config) => {
  config.rawData = config.data
  return config
})

API.interceptors.response.use((response) => {
  // read `config.rawData`
  return response
})