使用 MusixMatch API 获取获取结果

Question

hope you're doing well I've have been learning about APIs, how to use them and when to use them, and trying to understand some concepts, but today I'm stuck

I've been trying to use the MusixMatch API, so i went through the documentations, which was kind of self-explanatory but anytime I make a get request with fetch to an end point, my results are unusual.

correct me if I'm wrong but a fetch request is a get request by default so my functions looks like this

useEffect(() => {
  fetch(
    `https://corsproxylyricallydemo.herokuapp.com/https://api.musixmatch.com/ws/1.1/artist.get?artist_id=118&apikey=${ApiKey}`
  )
    .then((res) => console.log("res", res.json()))
    .then((data) => console.log("data", data))
    .catch((err) => console.log(err));
}, []);

I also created a cors proxy to fix the cors error I was getting earlier so the above function is supposed to Get the artist data from their database. but my results are

Uncaught (in promise) SyntaxError: Unexpected token '<', "<.DOCTYPE "... is not valid JSON

image of error

and from what I can understand the res.json might have some issue but I don't know how to solve it, so I went further to just test to see what was the log message of res without the .json() , and my result showed

Response {type: 'cors', url: 'https://corsproxylyricallydemo.herokuapp.com/https…st_id=118&apikey=40cfdba86e397dc6c93070deb3a94dcd', redirected: false, status: 200, ok: true, …}
body: (...),
bodyUsed: false,
headers: Headers {},
ok: true,
redirected: false,
status: 200,
statusText: "OK",
type: "cors",
url:"https://corsproxylyricallydemo.herokuapp.com/https://api.musixmatch.com/ws/1.1/artist.get?artist_id=118&apikey=${API_KEY}",
[[Prototype]] :  Response

image of the error

so I'm getting a status 200 with an empty body, I am lost, could someone please help me out? and also if it's not too much to ask,please recommend any resource I could read or study to understand these API concepts better cheers.

Answer 1

You have to convert the response to either json or a text format. Then you can able to access the data. Use this

.then(res => res.text())

Answer 2

The URL you are using for the fetch argument is wrong. Change

`https://corsproxylyricallydemo.herokuapp.com/https://api.musixmatch.com/ws/1.1/artist.get?artist_id=118&apikey=${ApiKey}`

to

`https://api.musixmatch.com/ws/1.1/artist.get?artist_id=118&apikey=${ApiKey}`