Вопрос по javascript, fetch, reactjs – Это похоже на работу. Когда в любом из параметров есть недопустимые символы, могут возникнуть такие проблемы. Убедитесь, что вы используете trim () для своих строк, прежде чем передавать их в качестве аргументов любой функции. Особенно с услугами REST

10

ался использовать fetch для вызова из бэкэнда с использованием реакции, без библиотек (таких как Axios). Итак, я создал эту функцию:

export function api(url, method, body, isHeaderContentType,isRequestHeaderAuthentication,header, succesHandler, errorHandler) {
const prefix = 'link';
console.log("url:",prefix+url);
const contentType = isHeaderContentType ? {
    'Content-Type': 'application/json',
} : {};
const auth = isRequestHeaderAuthentication
    ? {
        Authorization: `Bearer ${AuthUtils.getTokenUser}`,
    }
    : {};
fetch(prefix + url, {
    method,
    headers: {
        ...contentType,
        ...auth,
        ...header,

    },
    protocol:'http:',
    body,
})
    .then(response => {
        response.json().then(json => {
            if (response.ok) {
                console.log("method", json);
                if (succesHandler) {
                    succesHandler(json)
                }
            } else {
                return Promise.reject(json)
            }
        })
    })
    .catch(err => {
        console.log("error",`${url}  ${err}`);
        if (errorHandler) {
            errorHandler(err);
        }
    })

} и назовите это так

api(
            `link`,
            "GET",
            null,
            true,
            true,
            null,
            response => {
                this.setState({profile:response.data})
            },
            err => {
                console.log('error', err);
            }
        );

я вызываю мой API () внутри этой функции:

getProfileUser = () =>{
    if (!isUserAuthenticated()){
        history.push('/signin')
    }else {
        api(
            `link`,
            "GET",
            null,
            true,
            true,
            null,
            response => {
                this.setState({profile:response.data})
            },
            err => {
                console.log('error', err);
            }
        );
    }
};

это мой полный компонент:

export default class Profile extends Component {
constructor(props) {
    super(props);
    this.state = {
        profile:[]
    }

}
getProfileUser = () =>{
    if (!isUserAuthenticated()){
        someCode
    }else {
        api(
            `link`,
            "GET",
            null,
            true,
            true,
            null,
            response => {
                this.setState({profile:response.data})
            },
            err => {
                console.log('error', err);
            }
        );
    }
};

componentDidMount() {
    this.getProfileUser();
}

render(){
    return(
        <div>
            hello 
        </div>
    )
}

}

но когда я попытался запустить его, я получил такую ​​ошибку

TypeError: Не удалось выполнить «выборку» для «Window»: недопустимое значение

Есть кто-нибудь, кто знает, что не так с моим кодом? Функция работает, когда я использую метод "POST", но она не работает, когда я использую метод "GET"

@ Stretch0 нет, у меня все та же ошибка Raihan Parlaungan
Это работает, если вы пытаетесь позвонить вcomponentDidMount()? Stretch0
@ Stretch0 да, я пытался вызвать его на компоненте Raihan Parlaungan
Когда ты звонишьapi()? Вы вызываете это в методе жизненного цикла компонента? Если да, то какой? Stretch0
это странная проблема, но вы можете попробовать добавить это? const fetch = window.fetch.bind (window); Sujit.Warrier

Ваш Ответ

2   ответа
5

Authorization Заголовок для моих звонков. В моем случае это было вызвано символом новой строки в строке заголовка, т.е.Bearer:\nsomelong-token, Переход на новую строку в пробел решил проблему.

Произошло со мной, так как у меня был другой персонаж (тот, которого вы не можете легко увидеть). Хороший намек. zeropaper
3

аголовка, например:

const myString = 'this is a string \nand this is a new line';
headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`,
    'subscriptionId': myString
}
Это похоже на работу. Когда в любом из параметров есть недопустимые символы, могут возникнуть такие проблемы. Убедитесь, что вы используете trim () для своих строк, прежде чем передавать их в качестве аргументов любой функции. Особенно с услугами REST larrytech

Похожие вопросы