How to make a GET request in Javascript?

Question

I am a beginner in programming and am doing some projects and studying to build a portfolio. My current problem is with an image API (Unsplash). I first tested by Somnia I made a GET request to https://api.unsplash.com/photos/random, there I provided the API Client-ID in the Authorization header and successfully received a JSON with the image link and other information. My bottleneck is time to codify this. I tried to use fetch as in the code below:

    function setWallpaper() {
        fetch(`https://api.unsplash.com/photos/random`).then(response => {
            return response.json();
        })
        .then(data => {
            const { id } = data.id
            console.log(id);
        })
    }

I hope to receive the image ID, but on the console nothing appears. Maybe it’s because we still have to put the Client-ID in the Authorization header, but I don’t know where to put this information in the code.

Answer 1

Exactly as explained on MDN:

• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_your_own_request_object
• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers

Example:

const myHeaders = new Headers({
    'Header-do-Client-ID': 'valor do header do Client-ID'
});

const myInit = {
  method: 'GET',
  headers: myHeaders
};

const myRequest = new Request('https://api.unsplash.com/photos/random', myInit);

fetch(myRequest).then(response => {
    return response.json();
})
.then(data => {
    const { id } = data.id
    console.log(id);
});

Obviously change Header-do-Client-ID by the name of the correct header and exchange the valor do header do Client-ID also. An example if it were with bearer (possibly):

const token = 'valor aqui';

const myHeaders = new Headers({
    'Authorization': `Bearer ${token}`
});

const myInit = {
  method: 'GET',
  headers: myHeaders
};