response.json() error

Programovacie jazyky, rady, poradňa...
mnichovcan
Medium Expert
Medium Expert
Príspevky: 97
Registrovaný: 17 mar 2011, 23:03

response.json() error

Príspevok od používateľa mnichovcan »

Zdravim vas ,

Neviem si dat rady s takýmto niečím

Kód: Vybrať všetko

import React, { Component } from 'react'
import Link from 'next/link';
import Router from 'next/router';
import fetch from 'isomorphic-unfetch';
import Auth from '../components/Auth';

import Page from '../components/layouts/page';

class Inventory extends Component {

    async componentDidMount() {
        const res = await fetch("https://steamcommunity.com/profiles/76561198019510563/inventory/json/730/2", { method: "GET", mode : "no-cors" });
        const json = await res.json();
        //  const d = await res.text();
        console.log(json);

        return { data: json };
    }

    render() {
        return (
            <div>
                <Page>
                    <div className="card text-center col-md-12  ">

                    </div>
                </Page>
            </div>
        )
    }
}

export default Auth(Inventory)
Ide o to že stále dostávam
Uncaught (in promise) SyntaxError: Unexpected end of input json ktorý chcem dostat je validny dával som si ho do nejakých validatorov . Skúšal som to aj takto

Kód: Vybrať všetko

   const res = await fetch("https://steamcommunity.com/profiles/76561198019510563/inventory/json/730/2", { method: "GET", mode : "no-cors" });
    const json = await res.text();
    const d = JSON.parse(json);
Fakt neviem čo stým,, Na servery mám Node tak som skúsil pomocou "request" poslat to priamo zo serveru

Kód: Vybrať všetko

 fetch("https://steamcommunity.com/profiles/76561198019510563/inventory/json/730/2").then((response) => {
        return response.json()
      }).then((data) => {
        console.log(data);
      });
Tam to funguje . Ak to nejak neviriešim budem musiet z klienta poslat request na server a odtial na to steam api a to vratit ale chcel by som to priamo z klienta . Je možné že to robí kvôli tomu mode: no-cors ? Niekde na stack oweflow som tušim niečo take videl ale neviem najst ten link kde to bolo napisane . Ale ked dam preč ten mode tak to samozrejme dava error kvôli CORS a nedarí sa mi nejak nastavit tie cors priamo na servery. Použivam tam express

Samozrejme som riešenie hladal ale nič nefunguje večšinou to je rada taka ako som uviedol v 2 pripade
ropman
Medium Professional
Medium Professional
Príspevky: 1250
Registrovaný: 12 apr 2010, 21:07

Re: response.json() error

Príspevok od používateľa ropman »

v reacte sa nevyznam, ale skus pouzit nejaky iny modul na ten request, mozno aj jquery...

lebo ked si dam vygooglit isomorphic-unfetch tak mi skoro nic nenajde... cize to asi nebude moc rozsireny package a tak je opravdepodobne ze je to nieco stare, zabugovane alebo uz neudrziavane
mnichovcan
Medium Expert
Medium Expert
Príspevky: 97
Registrovaný: 17 mar 2011, 23:03

Re: response.json() error

Príspevok od používateľa mnichovcan »

ropman napísal:v reacte sa nevyznam, ale skus pouzit nejaky iny modul na ten request, mozno aj jquery...

lebo ked si dam vygooglit isomorphic-unfetch tak mi skoro nic nenajde... cize to asi nebude moc rozsireny package a tak je opravdepodobne ze je to nieco stare, zabugovane alebo uz neudrziavane
No ja použivam next.js čo je fw pre server side rendering react aplikácii . A ten unfech je to čo aj fetch akurat je to možné použit aj na servery aj na klientovi. Mám to tam kvoli tomu že spraviš request klasicky na nejaku stranku napr /inventory tak sa to rendruje na servery ale ked sa len prekliknem cez menu kde použivam router tak sa sa nevytvori klasicky request. A ked som spravil request priamo zo servera tak to ide .

Spravil som to ted tak ze mam app.get(/nieco) a to zavolam z klienta a pomocou toho isteho fetch poslem request na to api a vratim to . A sranda je že s toho serveru sa mi vrati presne to iste na klienta ako ked volam priamo to steam api z klietna , a vtedy to ide. Musim to nechat tak asi ale zle sa mi pôjde spat :D
awtt
Medium Professional
Medium Professional
Používateľov profilový obrázok
Príspevky: 1234
Registrovaný: 01 nov 2006, 19:37
Bydlisko: San Francisco
Kontaktovať používateľa:

Re: response.json() error

Príspevok od používateľa awtt »

isomorphic-unfetch je v poriadku, je to standart pre izomorfne aplikacie, je to v podstate len wrapper okolo node-fetch pre server a whatwg-fetch (polyfill) pre browser.
Tvoja ukazka nefunguje lebo robis cross site request v browsery na steamcommunity.com. Musis si spravit middleware na ten endpoint na tvojom servery a robit request na ten.

BTW robit request priamo v componentDidMount je prasarna :) Pouzi radsej redux. (ale ked uz silou mocou to chces mat tam tak radsej componentWillMount :) )
ropman
Medium Professional
Medium Professional
Príspevky: 1250
Registrovaný: 12 apr 2010, 21:07

Re: response.json() error

Príspevok od používateľa ropman »

predpokladam ze take nieco by si vsimol (sam pise ze response dostal) a steam bude mat asi implementovany CORS.
awtt
Medium Professional
Medium Professional
Používateľov profilový obrázok
Príspevky: 1234
Registrovaný: 01 nov 2006, 19:37
Bydlisko: San Francisco
Kontaktovať používateľa:

Re: response.json() error

Príspevok od používateľa awtt »

Nie.(priloha)

//autoeditácia príspevku (07 Máj 2017, 19:47:25)
BTW ak to hostujes na next.js, ten robi server side rendering.
componentDidMount hook nie je volany na servery ked sa renderuje component takze tvoj fetch je stale na clientovy ked sa component renderuje do DOMu. (preto ti to hadze error)
Ak to presunies to componentWillMount (alebo constructor) prve nacitanie tej stranky by ti malo fungovat pretoze sa pouzije node-fetch.
Ale ak potom user prejde na tu stranku cez next/link cez history push state tak ti to zase nebude fungovat (browser fetch) takze musis si spravit ten middleware ako som pisal vyzsie.

Ja som raz riesil nieco velmi podobne dokoca tiez pre steam (nikdy som to nedokoncil lebo som nemal cas :) ) Ak chces pozri si toto repo je to tam vyriesene https://github.com/danielhusar/mdm-skins
Fetch user inventory je tu: https://github.com/danielhusar/mdm-skin ... sx#L16-L21 kde to dispatche redux akciu https://github.com/danielhusar/mdm-skin ... js#L13-L16 ktora robi request na user inventory middleware https://github.com/danielhusar/mdm-skin ... .js#L8-L14

Na steam user inventory som napisal lib: https://github.com/mdm-skins/steam-user-inventory
Prílohy
Screen Shot 2017-05-07 at 11.38.36.png
mnichovcan
Medium Expert
Medium Expert
Príspevky: 97
Registrovaný: 17 mar 2011, 23:03

Re: response.json() error

Príspevok od používateľa mnichovcan »

Dakujem za odpovede.

Čo sa týka CORS tam by problém byt nemal ak do hlavicky dam mode:no-cors tak ja response dostanem, to čo treba problém je stým dostat to nejako s toho response.

Zatial to len tak "prototypujem " a necchelo sa mi použit redux. Preto som to dal len do didMounta keby som pouzil willMount tak by som nemohol zmenit state teda ten by sa asi zmenil ale asi by to neprerenderovalo komponentu. Ked použijem redux tento problem by asi nebol a za ten čas čo som to riešil som mohol použit redux :D

Asi tomu SSR uplne nerozumiem lebo nechapem. Teda kedy sa componentDidMount pusti , az na klientovi po vyrenderovani ? Nieje jedno či tam mam request priamo na steam api alebo na midleware (ten som si spravil to funguje)?

Ešte mám takúto otázku netýka sa tohto problému.

Ked použijem SSR napr prihlásim sa cez ten steam a presmeruje ma to napr na "home" . Teraz sa odhlásim a poslem klasicky request na home na servery sa overí či som prihálseny a podla toho klasikcky bud ak som uvidim "home" ak nie pesmeruje ma napr na uvodnu stranku.
Ale teraz ked sa prihlasim a prepinam sa v menu pomocou history push je potrebne overovat či som prihláseny ? Teraz mam nato HOC komponentu ktorá urobi request na server a ten vrati true alebo false. Ide mi o to že ekd sa odhlásim či je nejak možné dostat sa pomocou history api na tu stránku ktorá je len pre prihlásenych. Je mi jasné že každý request treba potom overovat ale zaujímanýma či to treba alebo nie.

//autoeditácia príspevku (08 Máj 2017, 0:49)
Tak som si to poriadne naštudoval už mi je jasnejsie ako je to stým willmount a didmount na servery.
Napísať odpoveď