This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 10 months ago.
I'm making a chrome extension where I'm calling the youtube API and using fetch() to do so. I don't understand why I'm getting an undefined variable when I call the function. Here is where I'm calling the function;
document.querySelector("[type=button]").addEventListener("click", function() {
//console.log("this was clicked");
let videoId = document.getElementById('vidUrl').value;
videoId = videoId.substring(videoId.indexOf('=') + 1);
console.log(videoId);
//chrome.runtime.sendMessage({ msg: "startFunc", vidId: videoId});
let request = addToQueue(videoId);
console.log(request);
console.log(request.snippet.title);
let table = document.querySelector(".table");
let row = table.insertRow(table.rows.length);
let title = row.insertCell(0);
let author = row.insertCell(1);
title.innerHTML = request.Data.snippet.title;
author.innerHTML = request.Data.snippet.videoOwnerChannelTitle;
})
and this is the function itself;
function addToQueue(vidId){
chrome.identity.getAuthToken({ interactive: true }, function (token) {
//console.log(token);
let fetchString = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&key=xxxxxxxxxxxxxxxxxx'
let post =
{
"part": [
"snippet"
],
"id": "UC0E5pDp_c2riLV4UhEgynKA",
"snippet": {
"playlistId": "PLu4fFFN_062GzqARIz3gnERiJ8M4GbRcL",
"position": 1,
"resourceId": {
"kind": "youtube#video",
"videoId": vidId
}
}
}
let fetchOptions = {
method: 'POST',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify(post),
}
fetch(fetchString,fetchOptions)
.then((response) => response.json())
.then(function (data) {
console.log(data);
//console.log(typeof data);
//chrome.runtime.sendMessage({Data : data});
return data;
});
})
}
I'm fairly new to javascript and chrome extensions so please forgive me if this is something obvious.
The issue here is that you not returning anything from the addToQueue function. This will always return undefined. The return statement you are using returns from the callback, but not the function itself.
Update your method and put a return in front of the fetch call, like this:
async function addToQueue(vidId){
return chrome.identity.getAuthToken({ interactive: true }, async function (token) {
//console.log(token);
let fetchString = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&key=xxxxxxxxxxxxxxxxxx'
let post =
{
"part": [
"snippet"
],
"id": "UC0E5pDp_c2riLV4UhEgynKA",
"snippet": {
"playlistId": "PLu4fFFN_062GzqARIz3gnERiJ8M4GbRcL",
"position": 1,
"resourceId": {
"kind": "youtube#video",
"videoId": vidId
}
}
}
let fetchOptions = {
method: 'POST',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify(post),
}
const response = await fetch(fetchString,fetchOptions)
return await response.json()
})
}
When calling this method the async/await you will need to update your event listener function to be async
document.querySelector("[type=button]").addEventListener("click", async function() {
//console.log("this was clicked");
let videoId = document.getElementById('vidUrl').value;
videoId = videoId.substring(videoId.indexOf('=') + 1);
console.log(videoId);
//chrome.runtime.sendMessage({ msg: "startFunc", vidId: videoId});
let request = await addToQueue(videoId);
console.log(request);
console.log(request.snippet.title);
let table = document.querySelector(".table");
let row = table.insertRow(table.rows.length);
let title = row.insertCell(0);
let author = row.insertCell(1);
title.innerHTML = request.Data.snippet.title;
author.innerHTML = request.Data.snippet.videoOwnerChannelTitle;
})
Also, I have used the new async/await syntax after discussing with OP in comments
Related
I need to rewrite an Api call. The original call is write in Node.js and i'm trying to rewrite the call in Javascript.
Node.js code:
const http = require("https");
const options = {
"method": "POST",
"hostname": "test.com",
"port": null,
"path": "/path",
"headers": {
"Authorization": "Token token-value"
}
};
const req = http.request(options, function (res) {
const chunks = [];
res.on("data", function (chunk) {
chunks.push(chunk);
});
res.on("end", function () {
const body = Buffer.concat(chunks);
console.log(body.toString());
});
});
req.write(JSON.stringify({
data: {
'Id': 'id value'
},
responsive: false
}));
req.end();
I'm trying in this way:
const url='https://test.com/path'
const bodyContent = {
data: {
'Id': 'id value'
},
responsive: false
};
const options = {
"method":"POST",
"port":null,
"headers": {
"Authorization":"Token token-value"
},
body: JSON.stringify(bodyContent)
}
const res = await fetch(url, options)
I expected a positive response but the response keep saying "Missing value of required parameter 'Id'"
This question already has answers here:
async/await always returns promise
(4 answers)
Closed 2 months ago.
I'm really confused about asynchronous functions in general, but I can't seem to return what the api has fetched. Using console.log() gives all the results but I need the function's path (array) for later use.
function callRelation(id) {
(async () => {
const api = await fetch(
"https://www.overpass-api.de/api/interpreter?",
{
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: "[out:json];rel(" + id + ");(._;>;);out;",
},
);
const request = await api.json();
let path = [];
for (let pair of request.elements){
if (pair.type === "node"){
path.push([pair.lat, pair.lon]);
}
}
console.log(path)
return path;
})();
}
let test = callRelation(10000);
console.log(test);
I've tried using something called a callback, but I failed miserably at that.
You await to get return from promise function.
async function callRelation(id) {
const api = await fetch("https://www.overpass-api.de/api/interpreter?", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: "[out:json];rel(" + id + ");(._;>;);out;",
});
const request = await api.json();
let path = [];
for (let pair of request.elements) {
if (pair.type === "node") {
path.push([pair.lat, pair.lon]);
}
}
console.log(path);
return path;
}
(async function () {
let test = await callRelation(10000);
console.log(test);
})();
This question already has answers here:
Fetch API request timeout?
(14 answers)
Closed 8 months ago.
I have an API fetch await code that fetches list of nodes in an array. The problem is, some of the nodes don't respond for whatever reason (being offline, wrong port, being programmed NOT to respond, ... ) and my code is stuck awaiting a reply from that node.
Is there any way to stop awaiting a fetch for example after 3 seconds if no response comes?
I tried using try and catch, but the nodes that don't respond don't return anything, the code is simply sitting there with no error or response.
Thank you!!
// list of nodes
let nodes = [{
"address": {
"hostname": "192.168.1.1",
"port": 31350
}
}, {
"address": {
"hostname": "192.168.1.2",
"port": 31350
}
}
]
// api fetch function
async function fetchNodes(hostname, port) {
const response = await fetch(`https://${hostname}:${port}/getstatus`, {
method: 'post',
body: JSON.stringify(body),
headers: {'Content-Type': 'application/json'}
});
const data = response.json();
console.log(data);
}
// loop to call api fetch function with all array entries
nodes.forEach(function(entry) {
fetchNodes(entry.address.hostname, entry.address.port);
}
)
try this
async function fetchWithTimeout(resource, options = {}) {
const { timeout = 8000 } = options;
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
const response = await fetch(resource, {
...options,
signal: controller.signal
});
clearTimeout(id);
return response;
}
and use this function in you fetchNodes function
async function fetchNodes() {
try {
const response = await fetchWithTimeout(
`https://${hostname}:${port}/getstatus`,
{
timeout: 6000,
method: "post",
body: JSON.stringify(body),
headers: { "Content-Type": "application/json" },
}
);
const data = await response.json();
return data;
} catch (error) {
// Timeouts if the request takes
// longer than 6 seconds
console.log(error.name === "AbortError");
}
}
This question already has answers here:
Using async/await with a forEach loop
(33 answers)
Closed 10 months ago.
let metadata = [];
allNFTs.map(async (e) => {
if (e.metadata) {
metadata.push(JSON.parse(e.metadata).attributes);
} else {
let config = {
method: "get",
url: `http://localhost:3000/api/fetch`,
header: {
"Content-Type": "application/json",
},
};
const res = await axios(config);
const attr = res.data.attributes;
metadata.push(attr);
console.log(metadata); // this one worked after below
}
});
console.log(metadata); // this one worked before above
But i want to wait till my axios done fetching, so i can finally console.log that my actual metadata.
Make an array of promises, and then await them with Promise.all
const metadataPromises = allNFTs.map((e) => {
if (e.metadata) {
return Promise.resolve(JSON.parse(e.metadata).attributes);
} else {
let config = {
method: "get",
url: `http://localhost:3000/api/fetch`,
header: {
"Content-Type": "application/json",
},
};
return axios(config).then((res) => res.data.attributes);
}
});
// await still has to be in an async function
const metadata = await Promise.all(metadataPromises);
console.log(metadata);
// or use .then
Promise.all(metadataPromises).then((metadata) => console.log(metadata));
The issue with you code, that you don't wait. The latest console.log is execurted before the map iterating all the items.
You should use somehting like that: https://www.npmjs.com/package/modern-async
E.g.
async function init() {
var ma= require('modern-async')
await ma.mapSeries(allNFTs,async (e)=>{
if (e.metadata) {
metadata.push(JSON.parse(e.metadata).attributes);
} else {
let config = {
method: "get",
url: `http://localhost:3000/api/fetch`,
header: {
"Content-Type": "application/json",
},
};
const res = await axios(config);
const attr = res.data.attributes;
metadata.push(attr);
console.log(metadata);
}
})
console.log(metadata);
}
I want to call the api and use the api result for further computation But not able to do like this. Even after using async/await. I am getting the console value as undefined.I tried using promise aswell but I am not getting how do i give authorization atribute to it.
I am naive to js, can anyone help where I am going wrong?
var plan;
async function makeRequest() {
const config = {
"url": "https://jsonplaceholder.typicode.com/posts/1",
"method": "GET",
"timeout": 0,
"headers": {
"Authorization": "[Auth_url]"
},
};
let res = await axios(config)
console.log(res);
plan = res;
}
makeRequest();
console.log("plan",plan)
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
You can try this way
you can pass the token details in the headers section
var plan= [];
function makeRequest() {
axios.get('https://jsonplaceholder.typicode.com/posts/1', {
headers: {
/* 'Authorization': '',*/
}})
.then((res) => {
plan = res.data;
console.log(plan);
});
}
makeRequest();
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
This approach you can try in the sample snippet set you have provided.
var plan;
async function makeRequest() {
const config = {
"url": "https://jsonplaceholder.typicode.com/posts/1",
"method": "GET",
"timeout": 0,
"headers": {
"Authorization": "[Auth_url]"
},
};
let res = await axios(config)
plan = res.data;
}
makeRequest().then(result => {
console.log("plan",plan)
});
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>