Question

我正在使用react axios从后端Flask API服务器获取数据。当我卷曲时，我将获得完美的数据作为响应，但是当我尝试使用axios时，我得到的空对象为200

我尝试了许多可能的方式来做axios（可能会缺少正确的方式）

卷曲curl -X GET "http://10.214.79.37:5050/v1/vision/api/assets/search" -H "accept: application/json" -H "Content-Type: application/json" -d "{ \"barraOnly\": true, \"label\": \"AAPL\", \"missingId\": false, \"searchFilter\": [], \"source\": null}"

下面的axios代码

const apiUrl = 'http://10.214.79.37:5050/v1/vision/api/assets/search';


const SearchTicker = () => {
    const [state, setState] = useState('');
    const handleInputChange = async (event) => {
        event.preventDefault();
        setState(event.target.value)
        axios.get(
            apiUrl, { data: "{ \"barraOnly\": true, \"label\": \"AAPL\", \"missingId\": false, \"searchFilter\": [], \"source\": null}"},           
            {headers: { "Content-Type": "application/json"}},
            ).then(function (response) {console.log(response)});
        // console.log(resp.data);
    }

编辑：输入您的内容后，我更新了代码（如下），但仍未获取数据。 API本身是否存在针对浏览器调用的问题？

const apiUrl = 'http://10.214.79.37:5050/v1/vision/api/assets/search';

    const SearchTicker = () => {
        const [state, setState] = useState('');
        const handleInputChange = event => {
            event.preventDefault();
            setState(event.target.value)

            const header = { 
              "Content-Type": "application/json",
            };

            const param = { 
              barraOnly: true, 
              label: "AAPL",
              missingId: false, 
              searchFilter: [], 
              source: null,
            };

            axios
              .get(apiUrl, { params:param , headers: header},)
              .then(response => console.log(response))
          };

edit2：通过调试后端，我意识到参数没有进入api。不确定为什么

Answer 1

由于您已经在使用async而不是await，请尝试添加await执行的pauses，直到从请求中获取数据为止，

const apiUrl = 'http://10.214.79.37:5050/v1/vision/api/assets/search';


const SearchTicker = () => {
    const [state, setState] = useState('');
    const handleInputChange = async (event) => {
        event.preventDefault();
        setState(event.target.value)
        let response = await axios.get(apiUrl, { data: "{ \"barraOnly\": true, \"label\": \"AAPL\", \"missingId\": false, \"searchFilter\": [], \"source\": null}"},           
            {headers: { "Content-Type": "application/json"}});
        console.log(response);
    }

Answer 2

我想在这里添加2件事：
1.由于您没有等待任何事情，因此不需要将功能标记为异步。
2. axios的GET方法不支持数据，也不打算与请求一起发送正文。好的做法是将您的api句柄更新为接受POST。无论如何，如果无法更改api，则可以按照axios本身的建议将数据包装在params对象中来发送数据。

axios.get(url,{params: {your data}, {header:{}});

尝试这样的事情。
希望对您有帮助！

Answer 3

我能够使用POST解决问题，因为我意识到即使使用了参数之后，Flask API服务器也不会使用数据参数。我更新了API以接收POST，它的工作原理很吸引人。感谢您的帮助。

从curl获取数据，但是与axios给出空对象相同

3 个答案: