I have never used fetch before, and have followed the documentation, however, no results are being returned from my backend. When I submit the form, the url changes, and all appears fine in my console, but no response from my express backend.
The following code is what I have after my form in a script tag. Can someone please advise?
async function getSample(url = `http://localhost:3000/lookup/${url}`, data = {}) {
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
return response.json();
}
document.getElementById('search').addEventListener('submit', function(e) {
event.respondWith(
new Response(myBody, {
headers: {'Content-Type': 'application/json'}
})
);
});
You could try creating a promise and then handling the value returned by the fetch with resolve and reject
async function getSample(url = `http://localhost:3000/lookup/${url}`, data = {}){
return new Promise(function (resolve, reject) {
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(async response => {
if (response.ok) {
response.json().then(json => resolve(json));
} else {
response.json().then(json => reject(json));
};
}).catch(async error => {
reject(error);
});
});
};
You would then call it like
getSample(...)
.then(results => {
//Code when fetch is successful
}.catch(error => {
//Code when fetch fails
};
I think the problem with it returning nothing is that getSample is an async function, but I imagine you're calling it within a program that isn't async, and so whatever code comes after getSample is using trying to use the value returned from getSample, but nothing's been returned yet, so it's using an empty value. Either that or the return of getSample is happening before the fetch completes. I'm not sure of the exact order that things happen, but a promise should fix your problem
Related
So I moved over a non-reusable fetch request code snippet to my API:
let response = await fetch(visitURL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + userJWT
},
body: JSON.stringify(endingVisit)
});
if (response.ok) {
let {visitId, createdAt} = await response.json();
const viewVisitDto = new ViewVisitDto(`${visitId}${createdAt}${visitorId}${doctorId}${oldPatientId}`);
return viewVisitDto;
} else {
throw new Error("deactivated!")
}
I was able to get this far:
axios.post(visitURL, {
headers,
body: JSON.stringify(visit)
}).then((response) => {
console.log(response);
}).catch((error) => {
console.log(error);
})
But does not exactly give me the visitId and createdAt from the response and I cannot use a response.ok nor a response.json(). Essentially I need to pull out that visitId and createdAt that should be coming back in the response.
I also tried just using node-fetch library, but although in VS code it seems to accept it, TypeScript is not happy with it even when I do install #types/node-fetch and even when I create a type definition file for it, my API just doesn't like it.
Guessing what you are after is
// don't know axios, but if it returns a promise await it
const dto = await axios.post(visitURL, {
headers,
body: JSON.stringify(visit)
}).then((response) => {
// parse response
return {resonse.visitId, resonse.createdAt}
}).then(({visitId, createdAt}) => {
// form dto (where are other vals)?
return new ViewVisitDto(`${visitId}${createdAt}${visitorId}${doctorId}${oldPatientId}`);
}).catch((error) => {
console.log(error);
})
However - you don't mention where doctorId and oldPatientId come from... You try providing more info, including output of the console.log's and the surrounding code
I have a script that updates the content of an API. There are several, so the only way is to call repeatedly to the endpoint to get the content of each API. When I am already inside the promise all, and I have the array of promises, what I do is iterating and updating the content that I have obtained.
Although the code seems to be working with an API only, I don't know what is the ideal way to make requests with Axios or fetch inside a promise.all or if just making the request is enough. Think that if for example there are 500 sequences, it will iterate through them and update their content.
The code is:
let promises = [];
data.sequences.forEach((sequence) => {
promises.push(axios.get(
`https://${conf.server.hostname}:${conf.server.port}/resource/${conf.version}/${sequence}`, {
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer bbbbbbb'
}
}
))
});
Promise.all(promises).
then((sequences) => {
//for each sequence to update
for (let i = 0; i < sequences.length; i++) {
let indexPromise = sequences[i];
axios.put(
`https://${conf.server.hostname}:${conf.server.port}/resource/${conf.version}/${sequenceName}`,
indexPromise.data, {
headers: {
'Content-Type': 'application/json'
}
}
).then((response) => {
logger.debug(`Updating content : ${sequenceName}`);
}).catch((err) => {
logger.error(`Error updating content`, err);
})
}
return callback(null, data)
}).catch((err) => {
logger.error(`Error getting content:`, err);
});
I would suggest this structure that makes the .get() and .put() into a combined operation and then runs Promise.all() once on the combined operations:
function someFunction() {
const corePath = `https://${conf.server.hostname}:${conf.server.port}/resource/${conf.version}`;
// return a promise that indicates when we're all done or had an error
return Promise.all(data.sequences.map(sequence => {
return axios.get(`${corePath}/${sequence}`, {
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer bbbbbbb'
}
}).then(data => {
return axios.put(`${corePath}/${sequenceName}`, data, {
headers: {
'Content-Type': 'application/json'
}
});
}).then(() => {
logger.debug(`Updating content : ${sequenceName}`);
}).catch(err => {
logger.error(`Error updating content`, err);
throw err;
});
});
}
Other notes:
Don't mix plain callbacks and promises. If you need to communicate back to some other code when this is done or has an error, then return your promise - don't use a callback.
You don't show where sequenceName comes from. Your debug output makes it seem like it's something that varies by request, but it isn't defined anywhere in the code in your question.
If you want the promise this is returning resolve with some data, then return that value from the final .then(). Your question shows you calling a callback and passing it data, but doesn't show where that comes from.
What is the way to take data from getUserConnectRequestData function and pass it to getUserConnectResponseData function ?
as you can see so i try to use then and responseData to for save the data of the getUserConnectRequestData function and than i try pass it into the getUserConnectResponseData function but itd not works .
getUserConnectRequestData().then(() => {
responseData();
});
and this is getUserConnectResponseData function that i want to pass the data from getUserConnectRequestData
export const getUserConnectResponseData = (responseData) => {
return new Promise((resolve, reject) => {
// console.log('THIS IS MY RESPONSE ==============>>>>>>>>>>>', responseData);
try {
fetch(
'https://hghghgghghg3223223',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
Req_Type: responseData.Req_Type,
Language_Code: responseData.Language_Code,
User_ID: responseData.User_ID,
Session_ID: responseData.Session_ID,
Session_Key: responseData.Session_Key,
Client_Type: responseData.Client_Type,
Req_Data: {
Bridge_ID: responseData.Bridge_ID,
},
}),
}
)
.then((response) => response.json())
.then((jsonResponse) => {
resolve(jsonResponse);
});
} catch (error) {
reject(error);
}
});
};
You need to accept the parameter and use it, and call the right function:
getUserConnectRequestData().then((responseData) => {
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^
getUserConnectResponseData(responseData);
// −^^^^^^^^^^^^^^^^^^^^^^^^^^−^^^^^^^^^^^^
});
But since getUserConnectResponseData takes just that one parameter you know that the then callback will only be called with that one single argument:
getUserConnectRequestData().then(getUserConnectResponseData);
You also need to handle errors, so:
getUserConnectRequestData()
.then(getUserConnectResponseData)
.catch(error => {
// Handle/report error
});
There are a couple of other things to point out, though:
getUserConnectRequestData is falling prey to a promise anti-pattern: You don't need new Promise when you already have a promise (from fetch) to use.
You need to check for HTTP success before calling .json() on the response. Sadly, fetch only rejects on network errors, not HTTP errors.
Here's an updated version of getUserConnectRequestData:
export const getUserConnectResponseData = (responseData) => {
return fetch('https://hghghgghghg3223223', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
Req_Type: responseData.Req_Type,
Language_Code: responseData.Language_Code,
User_ID: responseData.User_ID,
Session_ID: responseData.Session_ID,
Session_Key: responseData.Session_Key,
Client_Type: responseData.Client_Type,
Req_Data: {
Bridge_ID: responseData.Bridge_ID,
},
}),
})
.then((response) => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
return response.json();
});
};
Because of that need for the check, I never use fetch directly, I have wrappers to do the check so I don't have to code it Every Single Time.
// General purpose
function fetchGeneral(...args) {
return fetch(...args)
.then((response) => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
return response;
});
}
// JSON
function fetchJSON(...args) {
return fetch(...args)
.then((response) => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
return response.json();
});
}
Those reject on both network and HTTP errors.
I'm trying to work with async await and fetching data using the fetch api
My problem is, I just don't quite understand how I really get the answer from the server and not the status of the promise. I get the following in the console
Promise {<pending>}
-------------------------------
{locale: "en"}
but what I rather expect is the server response which should be "locale: en".
my code:
const locale = getLocale();
console.log(locale) // here I want to have "locale: en" as a output
async function fetchLocale() {
return await fetch('/get-language', {
headers: {
'Accept': 'application/json'
},
method: 'GET',
}).then(response => {
if (response.ok) {
return response.json()
}
return Promise.reject(Error('error'))
}).catch(error => {
return Promise.reject(Error(error.message))
})
}
async function getLocale() {
return await fetchLocale();
}
The goal I want to archive is, to return this "locale: en" response and store it in the "locale" const at the beginning of my code example.
KR
Your function should look more like this:
async function getLocale() {
let response = await fetch('/get-language', {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: 'GET',
});
// you can check for response.ok here, and literally just throw an error if you want
return await response.json();
}
And you can consume the result of that in an async function using await
const locale = await getLocale();
console.log(locale);
or by using the promise methods
getLocale().then(function(locale){
console.log(locale);
})
To get the value a Promise resolves with and not the promise itself, use .then() or await. Note that both require a callback or asynchronous context as it's simply not possible to bring this asynchronous result to a synchronous context such as the top level of your file.
getLocale().then(locale => {
console.log(locale);
//locale is only valid here
});
I am attempting to build a global API request function considering the repetitiveness of it. The problem I have is despite the responseBody object not being null when the function ends, the response seems to be null?
I can only assume this is in part due to the object being returned before it is updated.
Here is the function:
export function restRequest(url, method, content, body) {
fetch(API_BASE_URL + url, {
method: method,
headers: new Headers({
'Content-Type': content,
'Access-Control-Request-Method': method,
// 'Authorization': localStorage.getItem(ACCESS_TOKEN)
}),
body: body
}).then(
function (response) {
response.json().then((data) => {
let json = JSON.parse(JSON.stringify(data));
let responseBody = {
code: response.status,
body: json
};
//at this point the responseBody is not null
return responseBody;
});
}
)
.catch(function (err) {
console.log('Fetch Error :-S', err);
});
However if I make a call:
let response = restRequest('/app/rest/request', 'GET', 'application/json;charset=UTF-8', null);
response is always null.
What is the best way to handle this?
It's asynchronous, so any call of restRequest will not immediately return the responseBody = you need to properly chain the promises, and call .then on the restRequest call. Return the fetch call from the restRequest function, and avoid the promise-callback antipattern by returning response.json() immediately, rather than nesting a .then inside it:
export const restRequest = (url, method, content, body) => (
fetch(API_BASE_URL + url, {
method: method,
headers: new Headers({
'Content-Type': content,
'Access-Control-Request-Method': method,
// 'Authorization': localStorage.getItem(ACCESS_TOKEN)
}),
body
})
.then(response => Promise.all([response.status, response.json()])
.then(([code, body]) => ({ code, body }))
.catch(function(err) {
console.log('Fetch Error :-S', err);
})
);
then do
restRequest('/app/rest/request', 'GET', 'application/json;charset=UTF-8', null)
.then(response => {
// do stuff with response. (if there was an error, response will be undefined)
});