ReactJS-用axios替换获取API无效

问题描述 投票:0回答:2

[ReactJS中有一个带有FETCH api的代码块运行得很好,但是当我尝试用AXIOS替换它时,即使我检查了文档,它也无法正常运行。

FETCH工作代码API:

const signup = (user) => {
       return fetch(`${API}/signup`, {
            method: "POST",
            headers: {
                Accept: 'application/json',
                "Content-Type": 'application/json'
            },
            body: JSON.stringify(user)
        })
        .then(response => {
            return response.json();
        })
        .catch(err => {
            console.log(err);
        });
    }

    const clickSubmit = (event) =>{
        event.preventDefault();
        signup({name, email, password})
            .then(data => {
                if(data.error){
                    setValues({...values, error: data.error, success: false})
                }
                else{
                    setValues({...values, name: '', email: '', password: '', error:'', success:true})
                }
            })
    }

不能与AXIOS库一起使用相同的代码,但:

import axios from 'axios';

 const signup = (user) => {
       return axios(`${API}/signup`, {
            method: "POST",
            headers: {
                Accept: 'application/json',
                "Content-Type": 'application/json'
            },
            data: JSON.stringify(user)
        })
        .then(response => {
            return response.data;
        })
        .catch(err => {
            console.log(err);
        });
    }

    const clickSubmit = (event) =>{
        event.preventDefault();
        signup({name, email, password})
            .then(data => {
                if(data.error){
                    setValues({...values, error: data.error, success: false})
                }
                else{
                    setValues({...values, name: '', email: '', password: '', error:'', success:true})
                }
            })
    }

使用axios库编写以上代码后出现的错误是:

未处理的拒绝(TypeError):无法读取未定义的属性'错误'

axios代码有什么问题?

注意:

显然我将其范围缩小到了未定义的位置。

signup({name, email, password})
            .then(data => {
                if(data.error){
                    setValues({...values, error: data.error, success: false})
                }
                else{
                    setValues({...values, name: '', email: '', password: '', error:'', success:true})
                }
            })
    }

在.then()块中,“数据”以未定义的形式出现,我不知道为什么使用fetch api可以正常工作。

reactjs axios fetch-api
2个回答
0
投票

参考此处的Axios文档:https://github.com/axios/axios#response-schema

您所缺少的是

.then(response => {
    return response.data;
})

而不是:

.then(response => {
    return response;
})

0
投票

尝试:

axios({
    method: "POST",
    url: '${API}/signup',
    data: JSON.stringify(user)
    })
    ...

来自https://github.com/axios/axios

© www.soinside.com 2019 - 2024. All rights reserved.