Develop Reference

Attempting to send POST request to API with JavaScript function

I am attempting to make an api get request using JS's built in XMLHttpRequest system. I am not sure why this function fails to work.
function updateStats(username){
const request = new XMLHttpRequest;
var url = "https://pitpanda.rocks/api/players/" + username;
request.open("GET", url);
request.send();
request.onload = (e) => {
return request.response;
}
}
My code is running on CodePen right now https://codepen.io/casperqf/pen/NWXGeqa

I recommend using fetch. Allows you to set the method and some other values.
Can do with fetch and not with XHR:
You can use the API with the request and response objects.
You can perform no-cors requests, getting a response from a server that doesn't implement CORS. You can't access the response body directly from JavaScript.
async function postData(url = '', data = {}) {
// Default options are marked with *
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return response.json(); // parses JSON response into native JavaScript objects
}
function updateStats(username, stats){
postData('https://pitpanda.rocks/api/players/' + username, { stats: stats })
.then(data => {
console.log(data); // JSON data parsed by `data.json()` call
});
}
updateStats('otik', 123);

How to set header and parameter for route.get in node js?

How to set header and parameter for route.get in node js?
I want to set header value and parameter to API data call URL.
router.get("/getdata", async (req, res) => {
res.header({
'key': '123456'
});
await fetch(`https://example.com/api?param=${data}`)
.then((data) => data.json())
.then((data) => res.json({ msg: data }))
.catch((err) => console.log(err));
});
my question is how to set header and parameter data in router.get in node js ?

The question is not clear and you should add more details to it and ask the specific things which might be causing an issue.
Headers are set on the response which can be done directly on res object like this:
res.set({
'Content-Type': 'text/plain',
'Content-Length': '123',
'ETag': '12345'
})
Check this for more details.
If you need to set headers on fetch API call, You can do that directly on fetch as below:
async function postData(url = '', data = {}) {
// Default options are marked with *
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return response.json(); // parses JSON response into native JavaScript objects
}
If you want to read params in the req object:
router.get("/getdata", async (req, res) => {
const query = req.query // its an object containing all the params
await fetch(`https://example.com/api?param=${data}`)
.then((data) => data.json())
.then((data) => res.json({ msg: data }))
.catch((err) => console.log(err));
});

Read the documentation for Express around routing. It explains on how to e.g. use req.query to access the param in that fetch URL.

fetch-mock: No fallback response defined for POST

All my GET requests are going through but POST ones fail. This happens when I update fetch-mock from 7.3.0 to 7.3.1 or later.
console.warn Unmatched POST to url
Error fetch-mock: No fallback response defined for POST to url
http.js
export const get = (url) => {
const options = {
method: 'GET',
credentials: 'same-origin'
};
return fetch(url, options).then(handleJsonResponse);
};
export const post = (url, body) => {
const headers = {
'content-type': 'application/json',
'pragma': 'no-cache',
'cache-control': 'no-cache'
};
return fetch(url, {
credentials: 'same-origin',
method: 'POST',
cache: 'no-cache',
body: JSON.stringify(body),
headers
}).then(handleJsonResponse);
};
http.spec.js
const url = '/path/to/url'
describe('get', () => {
it('makes a GET request', async () => {
fetchMock.mock({
name: 'route',
matcher: url,
method: 'GET',
credentials: 'same-origin',
response: {
status: 200,
body: []
}
});
const response = await get(url);
expect(fetchMock.called()).toEqual(true);
expect(fetchMock.calls().length).toEqual(1);
expect(fetchMock.calls('route').length).toEqual(1);
expect(response).toEqual([]);
});
});
describe('post', () => {
const requestBody = {request: 'request'};
it('makes a POST request', async () => {
fetchMock.mock({
name: 'route',
matcher: url,
method: 'POST',
credentials: 'same-origin',
cache: 'no-cache',
body: JSON.stringify(requestBody),
headers: {
'content-type': 'application/json',
'pragma': 'no-cache',
'cache-control': 'no-cache'
},
response: {
status: 200,
body: []
}
});
const response = await post(url, requestBody);
expect(fetchMock.called()).toEqual(true);
expect(fetchMock.calls().length).toEqual(1);
expect(fetchMock.calls('route').length).toEqual(1);
expect(fetchMock.lastOptions().headers).toEqual({
'content-type': 'application/json',
'pragma': 'no-cache',
'cache-control': 'no-cache'
});
expect(response).toEqual([]);
});
});
Any thoughts on what's causing this? Is there a way to get more meaningful logs to help with debugging this?
I would rather not go the alternative path of trying nock or jest-fetch-mock.

Alright, after hours of digging into the library itself I have found out where the issue was.
In my code (and the snippet above) I am stringifying the body JSON.stringify(body). The library's generate-matcher.js is parsing it JSON.parse(body) and then compares the two - the point which was causing the failure. I am now just sending it as the raw object.

In case anyone else ends up here in the future, I had the same error accompanied with fetch-mock unmatched get.
I saw the response to this issue filed to fetch-mock which prompted me to double check my expected values and mocked values.
It turns out my problem was exactly as the error described, where the mock route I was expecting and the actual route that was being called were mismatched because of a typo.

Using Fetch: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

I want to use the new Fetch in javascript to do an ajax request. This is the code I've written for that
// Example POST method implementation:
var initial_data = {
'id': 1,
'model-name': 'Joke'
};
postData('/start-jokes', initial_data)
.then(data => console.log(data)) // JSON from `response.json()` call
.catch(error => console.error(error))
function postData(url, data) {
// Default options are marked with *
return fetch(url, {
body: JSON.stringify(data), // must match 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
})
.then(response => response.json()) // parses response to JSON
}
but it throws an error on load like so
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Trying it out on the console this is the response also of calling postData
Promise { <state>: "pending" }
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Don't use then(response => response.json() in fetchData like this. If there is an error when you call API, you can't catch that.
// Example POST method implementation:
var initial_data = {
'id': 1,
'model-name': 'Joke'
};
postData('/start-jokes', initial_data)
.then(response => response.json()) // parses response to JSON
.then(data => console.log(data)) // JSON from `response.json()` call
.catch(error => console.error(error))
function postData(url, data) {
// Default options are marked with *
return fetch(url, {
body: JSON.stringify(data), // must match 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
})
}

how to convey auth token in header with help the fetch?

I'm need send user data at request to my endpoint (rest api), but gets 401 error only if make request from the js side. If make request from Postman, I get 200 status. I did everything as in the documentation. for reference: make request from Nodejs. Thanks
var token = 'Token 897d3c9991952bc715fcf6c3e262e5b3866342';
var myHeaders = new Headers();
myHeaders.append('Authorization', token);
fetch(this.domain + '/v1.0/user/data/', {method: 'GET', headers: myHeaders, mode: 'no-cors'})
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('error');
}
})

Check this link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch or you can use axios to make request.
const axios = require('axios');
// Make a request for a user with a given ID
axios.get('http://<host>:<port>/<end-point>?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
fetch:
// Example POST method implementation:
postData(`http://<host>:<port>/<end-point>`, {answer: 42})
.then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
.catch(error => console.error(error));
function postData(url = ``, data = {}) {
// Default options are marked with *
return fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, same-origin, *omit
headers: {
"Content-Type": "application/json; charset=utf-8",
// "Content-Type": "application/x-www-form-urlencoded",
},
redirect: "follow", // manual, *follow, error
referrer: "no-referrer", // no-referrer, *client
body: JSON.stringify(data), // body data type must match "Content-Type" header
})
.then(response => response.json()); // parses response to JSON
}