Apelarea punctului final REST din Javascript (Programare, Javascript, Rest)

Lucia Pasarin a intrebat.

Încerc să sun la Spotify API din Javascript ca aceasta:

function callAPI() {
    var xhttp = new XMLHttpRequest();
    xhttp.open('GET', 'https://api.spotify.com/v1/search?q=Muse&type=track');
    xhttp.setRequestHeader('Content-Type', 'application/json');
    xhttp.setRequestHeader('Authorization', 'Bearer <MY_ACCESS_TOKEN>');
    xhttp.send();
    var response = JSON.parse(xhttp.responseText);
}

Cu toate acestea, xhttp.responseText este gol, deși cererea returnează 200.

Pot vedea în browser că cererea returnează rezultatul așteptat, dar cumva nu pot să-l extrag din Javascript:

Am încercat să apelez endpoint-ul REST folosind Java (deoarece sunt mai familiarizat cu el) și a funcționat:

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;

public class Test {
    public static void main(String[] args) {
        System.out.println("blah");

        URL url = null;
        try {
            url = new URL("https://api.spotify.com/v1/search?q=Muse&type=track");
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setRequestMethod("GET");
            connection.setRequestProperty("Authorization", "Bearer <MY_ACCESS_TOKEN>");
            String responseMessage = connection.getResponseMessage();
            BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            StringBuffer content = new StringBuffer();

            try (reader) {
                String line;

                while ((line = reader.readLine()) != null) {
                    content.append(line);
                }
            } finally {
                reader.close();
            }
            System.out.println("Response: " + responseMessage);
            System.out.println("Content: " + content.toString());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

Sunt un începător în Javascript, deci ce greșesc? Vă mulțumesc mult în avans!

Comentarii

  • este un proces asincron. conectați-vă la onload și apoi citiți responseText –  > Por Daniel A. White.
  • Bună ziua @lucia-pasarin, NU folosiți XMLHttpRequest, ți-aș recomanda să folosești o bibliotecă precum jquery pentru a face cereri ajax. Vezi api.jquery.com/jquery.get –  > Por Rui Jarimba.
  • Verificați și api.jquery.com/jquery.getjson –  > Por Rui Jarimba.
  • @RuiJarimba Vă mulțumim pentru sugestia dvs. Ați putea explica, vă rog, avantajul utilizării jQuery? –  > Por Lucia Pasarin.
  • @lucia-pasarin pentru că vă va face viața mult mai ușoară. Unul dintre cele mai mari avantaje față de javascript simplu este compatibilitatea cross-browser. Verificați stackoverflow.com/questions/67045/… și codementor.io/brainyfarm/… –  > Por Rui Jarimba.
4 răspunsuri
D0ubleGunz

Înțeleg din postarea ta inițială, că ești mai familiarizat cu Java, și așa în codul tău Javascript, var response = JSON.parse(xhttp.responseText); vă așteptați ca textul de răspuns să fie disponibil pentru a fi analizat. În Java, codul funcționează pentru că cererea este trimisă și restul operațiunilor sunt blocate până când există un răspuns. Javascript nu urmează aceeași paradigmă, nu așteaptă un răspuns și încearcă să analizeze xhttp.responseText înainte de a fi returnat ceva de la cerere.

Documentația explică acest lucru XMLHttpRequest.responseText

În timp ce gestionează o cerere asincronă, valoarea responseText are întotdeauna conținutul curent primit de la server, chiar dacă este incomplet, deoarece datele nu au fost încă primite în totalitate.

Știți că întregul conținut a fost primit atunci când valoarea readyState devine XMLHttpRequest.DONE (4), iar statusul devine 200 („OK”).

Deoarece Javascript will nu așteaptă răspunsul, codul dumneavoastră trebuie să aștepte un eveniment care să semnaleze că răspunsul a fost dat. Acesta este comportamentul asincron la care se referă celelalte postere. Documentația de aici descrie cum să creați codul care va asculta evenimentul de răspuns. Răspunsul trimis de Boo Berr’ita este un exemplu bun, folosind codul dumneavoastră.

Spring

ați uitat de onreadystatechange funcția callback :

doar înfășurați rezultatul în interiorul acestei funcții :

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(this.responseText);
    }
  };

Georgy Bunin

Puteți adăuga un gestionar de evenimente la „load”:

function onXHRLoad() {
  console.log(this.responseText);
}

function callAPI() {
    var xhttp = new XMLHttpRequest();
    xhttp.open('GET', 'https://api.spotify.com/v1/search?q=Muse&type=track');
    xhttp.setRequestHeader('Content-Type', 'application/json');
    xhttp.setRequestHeader('Authorization', 'Bearer <MY_ACCESS_TOKEN>');
    xhttp.addEventListener('load', onXHRLoad);
    xhttp.send();
}

Lucia Pasarin

Mulțumesc mult tuturor pentru răspunsurile voastre și vă mulțumesc că mi-ați amintit de asincronia în Javascript, de care uitasem complet. Am reușit să fac acest lucru să funcționeze folosind axios library, despre care am citit că se integrează bine cu Vue.js, pe care intenționez să îl folosesc. Iată soluția care a funcționat pentru mine:

<script>
import axios from "axios";
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: ''
    }
  },
  mounted() {
    axios({method: "GET", "url": "https://api.spotify.com/v1/search?q=Muse&type=track"}).then(result => {
      this.msg = result.data.tracks.items[0].name
  }, error => {
    console.error(error);
  });
  }
}
</script>