I have this working fine with get.JSON but when I try and use the fetch API instead, it gives me the error "Required parameter: part".
export const fetchYoutube = () => {
return dispatch => {
fetchAsync()
.then(data => console.log(data))
.catch(reason => console.log(reason.message))
dispatch({
type: INCREMENT
})
}
}
async function fetchAsync () {
var query = {
part: 'snippet',
key: 'AIzaSyA3IHL73MF00WFjgxdwzg57nI1CwW4dybQ',
maxResults: 6,
type: 'video',
q: 'music'
}
let response = await fetch('https://www.googleapis.com/youtube/v3/search', {
data : query,
method: 'GET'
});
let data = await response.json();
return data;
}
How do I pass the query object using the fetch API?
Try attaching the query as params:
replace:
let response = await fetch('https://www.googleapis.com/youtube/v3/search', {
data : query,
method: 'GET'
});
with:
var url = new URL("https://www.googleapis.com/youtube/v3/search"),
query = {
part: 'snippet',
key: '#####################################',
maxResults: 6,
type: 'video',
q: 'music'
}
Object.keys(query).forEach(key => url.searchParams.append(key, query[key]))
let response = await fetch(url)
Setting query string using Fetch GET request
Related
I have method that renders EJS templates and pass in the i18next.t function for the EJS template to do translations by setting the i18next t function as an attribute on the data object:
const data = {
email: user.email,
id: user.id,
t: i18nT
};
The data object is passed into ejs.renderFile(). The only way I can get the translation in the EJS template to work is when I set the i18nT variable to the t function from the i18next.init() functions call back. Otherwise it comes out blank. I see from the console output that the t function of the i18next instance, i18nInstance, is different to the t function set by the callback when initializing i18next.
function t() {
var _this$translator;
return this.translator && (_this$translator =
this.translator).translate.apply(_this$translator, arguments);
}
versus:
function () {
return _this4.t.apply(_this4, arguments);
}
Why is the t function of the i18nInstance object obtained from calling i18next.createInstance() different than the one from the callback? The one from the instance object doesn not work in the EJS template render.
The full code sample:
let i18nInstance: i18n;
let i18nT;
const i18nextInitOptions = {
backend: {
loadPath: path.join(__dirname, '/locales/{{lng}}/{{ns}}.json'),
addPath: path.join(__dirname, '/locales/{{lng}}/{{ns}}.missing.json')
},
debug: true,
fallbackLng: 'da',
preload: ['da', 'en', 'nl'],
returnEmptyString: false,
returnNull: false,
saveMissing: true
};
i18nInstance = await i18next
.createInstance();
await i18nInstance
.use(i18nextBackend)
.init(i18nextInitOptions, async function (error, t) {
if (error) {
console.log(error)
}
i18nT = t;
});
console.log("i18nT: " + i18nT)
/*
The console.log outputs below show that i18nT when set from the callback is different to the
i18nInstance.t.
i18nT: function () {
return _this4.t.apply(_this4, arguments);
}
*/
console.log("i18nInstance.t: " + i18nInstance.t)
/*
console output:
i18nInstance.t: function t() {
var _this$translator;
return this.translator && (_this$translator =
this.translator).translate.apply(_this$translator, arguments);
}
*/
const data1 = {
email: user.email,
id: user.id,
t: i18nT
};
// Calling htmlFromTemplate with data1 with t = i18nT the translation in the EJS template works.
html = await this.htmlFromTemplate('ejsTemplateName.ejs', data1);
const data2 = {
email: user.email,
id: user.id,
t: i18nextInstance.t
};
// Calling htmlFromTemplate with data2 with t = i18nextInstance.t the translation in the EJS is empty.
html = await this.htmlFromTemplate('ejsTemplateName.ejs', data2);
private htmlFromTemplate(templateName: string, data: Object): Promise<String> {
if (!templateName) return;
const htmlPath = path.join(__dirname, '../assets/mail-templates/' + templateName);
return new Promise((resolve, reject) => {
ejs.renderFile(htmlPath, data,(renderErr, str) => {
if (renderErr) {
appLogger.error('MAIL_RENDER: ' + renderErr, { templateName, data });
reject(renderErr);
} else resolve(str);
});
});
}
As soon as you pass the t function like this:
const data2 = {
email: user.email,
id: user.id,
t: i18nextInstance.t
};
the t function is not bound to its original "this" anymore...
pass it this way:
const data2 = {
email: user.email,
id: user.id,
t: i18nextInstance.t.bind(i18nextInstance)
};
more information here: https://github.com/i18next/i18next/issues/1528#issuecomment-748263313
i need to take url with params example:
https://domain.pl/ptpdf-gen?selected_posts=4871&advisor=magda,wojciech
But axios response is an object like:
{"https://domain.pl/ptpdf-gen?selected_posts":"4871","advisor":"magda,wojciech"}
How to send url as string via axios?
Optionally the request above could also be done as
axios.get('/user', {
params: {
selected_posts: 4871
advisor: ["magda", "Wojciech"]
},
paramsSerializer: params => {
return qs.stringify(params)
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
The qs is an external library,
https://www.npmjs.com/package/qs
var selected = 4871
var advisor = ["magda","wojciech"]
axios.post('https://domain.pl/ptpdf-gen', {selected, advisor })
So i made the url split like this, using URLSearchParams:
const currHref = window.location.search;
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('selected_posts');
const myParam2 = urlParams.get('advisor');
Then with axios.post i can send params:
axios.post("http://domain.pl/create", {myParam, myParam2})
On server i did handle params like:
const state = req.body;
const stateValues = Object.values(state);
And then i can concat url with stateValues[0] and stateValues[1];
let linkUrl = "https://domain.pl/ptpdf-gen?selected_posts=" + stateValues[0] + "&advisor=" + stateValues[1];
Works.
I am getting ** Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'validateStatus' in 5f8425a33a14f026f80133ed** where 5f8425a33a14f026f80133ed is the id passed to the axios url
I want to display the services based on the user id. My url works perfectly in postman but when i access it from the veux store it gives an error.
services.js (store)
import axios from 'axios';
const state = {
services : {},
status: '',
error: null
};
const getters = {
services : state => { return state.services }
};
const actions = {
async fetchServices({commit}, userId) {
let res = await axios.get('http://localhost:5000/api/services/displayUser' , userId)
commit('setProducts', res.data)
return res;
}
};
const mutations = {
setProducts (state, items) {
state.services= items
},
};
export default {
state,
actions,
mutations,
getters
};
This is how I am calling the action :
computed: {
...mapGetters(["services"]),
},
methods: {
...mapActions(["fetchServices"]),
getData(){
this.fetchServices(this.user._id)
},
},
async created() {
await this.getProfile();
await this.getData();
}
The axios route is defined as
router.get('/displayUser', (req,res) => {
const query = user = req.body ;
Services.find(query)
.exec((err, services) => res.json(services))
})
the error screenshot :
Error screenshot
GET request should not have a body. Either use query params, indicate an id in a path, or use POST request.
In case of query params this may look like this:
let res = await axios.get('http://localhost:5000/api/services/displayUser' , { params: { userId })
router.get('/displayUser', (req,res) => {
const query = user = req.query;
Services.find(query)
.exec((err, services) => res.json(services))
})
This worked for me too:
In front end: Vue Js
let res = axios.get("http://localhost:3000/api/v1/role/getRoleByName",
{ params: { roleName: "name of role you want to send as params" },
});
In back end: Node Js
router.get('/getRoleByName', (req,res)=>{
let roleName = req.query.roleName;
roleModule.getRoleByName(roleName).then(data =>{
response.json(res,data)
}
).catch(err=> {
response.badRequest(res, err);
})
});
it's a silly mistake axios.post req.
async addTodo({ commit }, title) {
try {
const res = await axios.post(BASE_URL, { title, complete: false });
commit("newTodo", res.data);
} catch (err) {
console.log(err.message);
}
},
I currently have the following mongoose function in a hapi.js api call
server.route({
method: "PUT",
path:"/api/blockinfo/{hash}",
handler: async (request, h) => {
try{
var jsonPayload = JSON.parse(request.payload)
console.log(jsonPayload)
var result = await BlockModel.findOneAndUpdate(request.params.hash, {$set: { height : jsonPayload[Object.keys(jsonPayload)[0]]}}, {new: true});
return h.response(result);
}catch{
return h.response(error).code(500);
}
}
})
Its goal is basically to update a value using a PUT. In the case above, it will update the field height, and it will work just fine.
But what if I want to update an arbitrary field?
For example my object format is the following:
{"_id":"5cca9f15b1b535292eb4e468", "hash":"d6e0fdb404cb9779a34894b4809f492f1390216ef9d2dc0f2ec91f95cbfa89c9", "height":301651, "size":883, "time":1556782336, "__v":0}
In the case above I updated the height value using the $set, but what if I decide to input 2 random fields to update, for example, size and time.
This would be my put in postman:
{
"size": 300,
"time": 2
}
Well obviously it wont work in the code above because those fields are missing in the set.
SO how do i make that set to recognize automatically whatever it needs to update?
I tried to simplify it with the following code but it wont update anything
server.route({
method: "PUT",
path:"/api/blockinfo/{hash}",
handler: async (request, h) => {
try{
var result = await BlockModel.findOneAndUpdate(request.params.hash, request.payload, {new: true});
return h.response(result);
}catch{
return h.response(error).code(500);
}
}
})
Schema
const BlockModel = Mongoose.model("blocks", {
hash: String,
height: Number,
size: Number,
time: Number
});
Problem is with your hash key. First parameter/argument in findOneAndUpdate function should be the key value pair. And here you are directly putting the key.
So it should be
handler: async (request, h) => {
try {
const { hash } = request.params
var result = await BlockModel.findOneAndUpdate({ hash }, request.payload, { new: true })
return h.response(result)
} catch (err) {
return h.response(error).code(500)
}
}
Update:
You are defining mongoose model in incorrect way. Schema is not just an object. It should be mongoose object. Something like this
const schema = new Mongoose.Schema({
hash: String,
height: Number,
size: Number,
time: Number
})
export default Mongoose.model("blocks", schema)
handler: async (request, h) => {
try{
var result = await BlockModel.findOneAndUpdate(request.params.hash, JSON.parse(request.payload ), {new: true});
return h.response(result);
}catch{
return h.response(error).code(500);
}
}
SInce we are updating a JSON, the payload must be in JSON format
You have not added $set in your simplified code, adding that it should work.
Send payload as an object with the required fields.
server.route({
method: "PUT",
path:"/api/blockinfo/{hash}",
handler: async (request, h) => {
try{
var result = await BlockModel.findOneAndUpdate(request.params.hash, { $set: request.payload } , {new: true});
return h.response(result);
}catch{
return h.response(error).code(500);
}
}
})
Can anyone suggest any ways to get response times from Axios? I've found axios-timing but I don't really like it (controversial, I know). I'm just wondering if anyone else has found some good ways to log response times.
You can use the interceptor concept of axios.
Request interceptor will set startTime
axios.interceptors.request.use(function (config) {
config.metadata = { startTime: new Date()}
return config;
}, function (error) {
return Promise.reject(error);
});
Response interceptor will set endTime & calculate the duration
axios.interceptors.response.use(function (response) {
response.config.metadata.endTime = new Date()
response.duration = response.config.metadata.endTime - response.config.metadata.startTime
return response;
}, function (error) {
error.config.metadata.endTime = new Date();
error.duration = error.config.metadata.endTime - error.config.metadata.startTime;
return Promise.reject(error);
});
This is my solution, by setting the header in the interceptor:
import axios from 'axios'
const url = 'https://example.com'
const instance = axios.create()
instance.interceptors.request.use((config) => {
config.headers['request-startTime'] = process.hrtime()
return config
})
instance.interceptors.response.use((response) => {
const start = response.config.headers['request-startTime']
const end = process.hrtime(start)
const milliseconds = Math.round((end[0] * 1000) + (end[1] / 1000000))
response.headers['request-duration'] = milliseconds
return response
})
instance.get(url).then((response) => {
console.log(response.headers['request-duration'])
}).catch((error) => {
console.error(`Error`)
})
Here's another way to do it:
const instance = axios.create()
instance.interceptors.request.use((config) => {
config.headers['request-startTime'] = new Date().getTime();
return config
})
instance.interceptors.response.use((response) => {
const currentTime = new Date().getTime()
const startTime = response.config.headers['request-startTime']
response.headers['request-duration'] = currentTime - startTime
return response
})
instance.get('https://example.com')
.then((response) => {
console.log(response.headers['request-duration'])
}).catch((error) => {
console.error(`Error`)
})
piggybacking off of #user3653268- I modified their answer to use with react hooks and display x.xxx seconds using a modulo.
import React, { useState } from 'react';
import axios from 'axios';
export default function Main() {
const [axiosTimer, setAxiosTimer] = useState('');
const handleSubmit = () => {
let startTime = Date.now();
axios.post('urlstuff')
.then(response => {
console.log('handleSubmit response: ', response);
axiosTimerFunc(startTime);
})
.catch(err => {
console.log("handleSubmit error:", err.response.data.message)
axiosTimerFunc(startTime);
setLoading(false);
});
}
const axiosTimerFunc = (startTime) => {
let now = Date.now();
let seconds = Math.floor((now - startTime)/1000);
let milliseconds = Math.floor((now - startTime)%1000);
setAxiosTimer(`${seconds}.${milliseconds} seconds`);
}
return(
<div>
<h2>Load Time: {axiosTimer}</h2>
</div>
)
}
easy way do this with async \ await, but not ideal :
const start = Date.now()
await axios.get(url)
const finish = Date.now()
const time = (finish - start) / 1000
This would be time about of axios call. Not so ideal, but showing and easy to implement
Another simple way to do it :
axios.interceptors.response.use(
(response) => {
console.timeEnd(response.config.url);
return response;
},
(error) => {
console.timeEnd(error.response.config.url);
return Promise.reject(error);
}
);
axios.interceptors.request.use(
function (config) {
console.time(config.url );
return config;
}, function (error) {
return Promise.reject(error);
});
Its way long after but this is my simple workaround
function performSearch() {
var start = Date.now();
var url='http://example.com';
var query='hello';
axios.post(url,{'par1':query})
.then(function (res) {
var millis = Date.now() - start;
$('.timer').html(""+Math.floor(millis/1000)+"s")
})
.catch(function (res) {
console.log(res)
})
}
this is my workaround
actually you can get it through the "x-response-time" header that you get from the response on the axios request
axios({
method: 'GET',
url: 'something.com',
})
.then((response) => {
console.log(response.headers['x-response-time']);
})