Ich mache 2 Abrufanfragen. Ich möchte die Daten in JSON konvertieren und dann auf eine Variable setzen.

async componentDidMount() {

     Promise.all([
        await fetch('/link1'),
        await fetch('/link2'),
    ]).then(links => {
        const response1 =  links[0]
        const response2 = links[1]  

        const res1 = response1.json()
        const res2 = response2.json()            
    })

    const data1 = res1.data
    const data2 = res2.data

    ...

Ich kann data1 und data2 nicht auf die Antworten setzen. Ich bin neu in diesem Bereich, daher bin ich mir nicht sicher, wie ich es formatieren soll. Wie setze ich data1 und data2?

1
john mondego 21 Feb. 2020 im 20:53

4 Antworten

Beste Antwort

Sie können es einfach tun

let data = [];

Promise.all([fetch("/link1"), fetch("/link2")])
      .then(responses =>
        responses.forEach(res => res.json().then(body => data.push(body)))
      )
      .catch(err => console.error(err));

1
Saikat Das 21 Feb. 2020 im 18:45

Verwenden Sie nicht erwarten und versprechen Sie beide. Sie können dies versuchen, um die erwartete Ausgabe zu erhalten.

    async componentDidMount() { 
        const link1Fetch = await fetch('/link1');
        const link2Fetch = await fetch('/link2');
        const data1 = await link1Fetch.json();
        const data2 = await link2Fetch.json();
        console.log(data1, data2);
    }

-1
Raj Kumar 21 Feb. 2020 im 18:02

Hier ist, wie ich mehrere Abrufe machen würde.

Promise.all(
  [
    'https://jsonplaceholder.typicode.com/todos/1',
    'https://jsonplaceholder.typicode.com/todos/2'
  ].map(url => fetch(url).then(r => r.json()))
).then(results => console.log(results))

Promise.all nimmt eine Reihe von Versprechungen entgegen und gibt ein neues Versprechen zurück, das abgeschlossen ist, wenn alle bereitgestellten Versprechen erfüllt sind.

Es ist am besten, die .json() Arbeit in der thenable-Kette auszuführen (da die Konvertierung in JSON ebenso asynchron ist wie der Abruf). Und dann warten Sie einfach auf die beiden Endergebnisse.

Das Ergebnis von Promise.all ist eine Reihe von Ergebnissen der einzelnen Versprechen (in derselben Reihenfolge, in der Sie Promise.all die Versprechen gegeben haben - unabhängig davon, in welcher Reihenfolge sie abgeschlossen wurden.)

0
Wyck 21 Feb. 2020 im 19:03

Wenn Sie unter Rendern Zugriff auf diese Variablen benötigen, werden diese häufig in einer Statusvariablen gespeichert.

async componentDidMount() {

 Promise.all([
    await fetch('/link1'),
    await fetch('/link2'),
]).then(links => {
    const response1 =  links[0]
    const response2 = links[1]  

    const res1 = response1.json()
    const res2 = response2.json()
    this.setState({data1: res1.data, data2: res2.data})
})

Dann können Sie data1 und data2 als this.state.data1/2 verwenden

Um zu verstehen, warum das, was Sie tun, nicht funktioniert, müssen Sie mehr darüber lesen, wie Promise funktioniert. (https://developer.mozilla.org/en -US / docs / Web / JavaScript / Reference / Global_Objects / Promise)

Der Hauptgrund ist, dass JS asynchron ist, sodass die Daten1 und Daten2 gleichzeitig mit dem Auslösen von Promise.all zugewiesen werden.

0
leogoesger 21 Feb. 2020 im 18:50