Convert jquery .getJSON to ajax async await for YouTube API

Question

I am using YouTube API key to fetch data on search.

const key = "[API Key]";
const url = "https://www.googleapis.com/youtube/v3/search";

$(document).ready(function () {
  const options = {
    part: ["snippet"],
    key: key,
    maxResults: 10,
    q: "developers",
  };

  loadVids();

  function loadVids() {
    $.getJSON(url, options, function (data) {
      const videos = data.items;
      console.log(videos);
    });
  }
});

It is working properly but I want to convert $.getJSON() to async await using vanilla javascript. Please guide me how to do this.

There's an article I found that may be of interest to you: https://petetasker.com/using-async-await-jquerys-ajax — Aidan Hakimian, Oct 13 '21 at 14:15
It is useful but I don't want to use jquery. I want to fetch data just using vanilla javascript — Ikram Ul Haq, Oct 13 '21 at 15:00

score 1 · Answer 1 · answered Oct 13 '21 at 19:21

1

You can do it by defining a Promise function like:

function loadVids(){
  return new Promise((resolve, reject)=>{
    fetch('https://www.googleapis.com/youtube/v3/search', {method: 'GET', body: options})
    .then(response => response.json())
    .then(data => {
       console.log(data));
       resolve();
     })
     .cache(err => reject());     
  });
}

and then await on it:

async function f1() {
   var x = await loadVids();
   //other code...
}

answered Oct 13 '21 at 19:21

Elyas Esna

625
4
19

It is returning error: TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. – Ikram Ul Haq Oct 13 '21 at 20:06
1

the error is clear, however you have to set content type and strigify your data based on your backend. look at this: https://stackoverflow.com/a/29823632/4437464 – Elyas Esna Oct 13 '21 at 20:16
Thanks for it. It is useful – Ikram Ul Haq Oct 13 '21 at 20:36

score 0 · Accepted Answer · answered Oct 13 '21 at 20:25

I found a solution There is no need of part: ['snippet']. It is working properly without using that.

const key = "[API Key]";
const url = "https://www.googleapis.com/youtube/v3/search";

const options = {
  part: ["snippet"],
  key: key,
  maxResults: 10,
  q: "developers",
};

async function loadVids() {
  const res = await fetch(
    `${url}?maxResults=${options.maxResults}&q=${options.q}&key=${options.key}`
  );

//can also write the above line in this more sensible way
//const res = await fetch(
//   `https://youtube.googleapis.com/youtube/v3/search?maxResults=${options.maxResults}&q=${options.q}&key=${options.key}`,
// );

  const data = await res.json();
  console.log(data);
}
loadVids();

More understandable code

const apiKey = "[API Key]";
const url = "https://www.googleapis.com/youtube/v3/search";

const options = {
  key: apiKey,
  maxResults: 10,
  q: "developers",
};

const { key, q, maxResults } = options;

async function loadVids() {
  const res = await fetch(`${url}?maxResults=${maxResults}&q=${q}&key=${key}`);
  const data = await res.json();
  console.log(data);
}
loadVids();

Convert jquery .getJSON to ajax async await for YouTube API

2 Answers2