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);
})();
Related
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");
}
}
I've written an async function which is able to get a response from an API I've written in Python but I can't get the data into an array which I can then use to update my frontend application.
The code is as follows:
async function postData(URL) {
let rawResponse = await fetch(URL, {
method: "Post",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(inputData),
});
const data = await rawResponse.json();
console.log(data);
return data;
}
let response1 = postData();
console.log(response1);
let response2 = postData()["returnedData"];
console.log(response2);
The code returns the array I want when I console.log the data variable within the function. However, it returns an array called 'Promise{pending}'* for response1 which contains the desired data but I am not able to manipulate it and returns 'undefined' for response2. What am I doing wrong?
Thanks in advance!
*pending even though the PromiseState is 'fulfilled'
PostData Function is a aync Function so returns a Promise so you must use await before calling it or .then
async function postData(URL) {
let rawResponse = await fetch(URL, {
method: "Post",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(inputData),
});
const data = await rawResponse.json();
console.log(data);
return data;
}
// Method 1
const init = async () => {
let response1 = await postData();
console.log(response1);
let response2 = await postData()["returnedData"];
console.log(response2);
}
init();
// Method 2
(async () => {
let response1 = await postData();
console.log(response1);
let response2 = await postData()["returnedData"];
console.log(response2);
})()
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);
}
Here is my code, I pass array of ids and for each ids I hit Api request.
for (let i = 0; i < 10; i++) {
cy.request({
method: 'GET',
url: `https://[API endpoint ]/api/v1/[requst]/${ids[i]}`,
headers: {
"authorization": token
}
})
.then((res) => {
return usernames.push([{ value: res.body.instagrams[0].username }])
})
.then((res) => {
return cy.wait(2000)
})
}
Whenever I execute the code, for 2-3 requests it works fine and then throws error like
Uncaught Error: invalid payload
I can see my URI is proper and sending correct request.
you should modify your code to wrap all the pending promises into an array. A modified snippet is as below:
async function processRequest(){
let result;
let promises = [];
for (let i = 0; i < 10; i++) {
promises.push(cy.request({
method: 'GET',
url: `https://[API endpoint ]/api/v1/[requst]/${ids[i]}`,
headers: {
"authorization": token
}
}))
}
result = await Promise.all(promises);
for(let i = 0; i < 10; i++){
usernames.push([{ value: result[i].username }])
}
}
Here cy.request doesn't work properly with Promise.
Either while pushing it to promise array, remove cy.request() or purely handle with javascript.
async findUserName(ids, token) {
let promise = []
let usernames = []
ids.forEach(id => {
promise.push(
fetch(`https://[host]/api/v1/[endpoint]/${id}`, {
headers: {
'Content-Type': 'application/json',
"authorization": token
}
})
.then((res) => {
return res.json();
})
)
})
let result = await Promise.all(promise);
result.forEach((data) => {
usernames.push([{ value: data.instagrams[0].username }])
})
return usernames
}
This question already has answers here:
Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
(7 answers)
Closed 1 year ago.
I have a set of if-else conditions which calls a few functions and attribute properties to usr before redirecting this data to an external application.
if(funcA()) {
usr.a = funcA();
}
if(funcB()) {
funcB(user,context,function (error, ticket) {
usr.ticket = ticket;
});
}
redirect(usr);
funcB has two async API calls (using axios) and the script always trickles down to redirect before funcB returns a value.
function funcB(user, context, callback) {
let ticket = '';
const axios = require('axios#0.19.2');
const options = {method: 'POST', url: 'xxxx', data: '{xxxx}'};
axios(options).then(res => {
const access_token = res.data.access_token;
const options = {method: 'POST', url: 'xxx', data: `{xxxx}` };
axios(options).then(res => {
ticket = res.data.ticket;
callback(null, ticket);
}).catch(err);
}).catch(err);
}
I have tried using callback and async await but unsure how to wait for user.Ticket to be populated before redirect(usr) is called.
Making funcB return a promise should do the trick.
function funcB(user, context) {
return new Promise((resolve, reject) => {
const options = { method: "POST", url: "xxxx", data: "{xxxx}" };
axios(options)
.then((res) => {
const access_token = res.data.access_token;
const options = { method: "POST", url: "xxx", data: `{xxxx}` };
axios(options)
.then((res) => {
resolve(res.data.ticket);
})
.catch(reject);
})
.catch(reject);
});
}
Then use async await
if(funcB()) {
usr.ticket = await funcB(user,contex)
}
redirect(usr);
Edit: im assuming that the context where the if condition is running is already an async function if not you can do this
(async ()=>{
if(funcB()) {
usr.ticket = await funcB(user,contex)
}
redirect(usr);
})()