i want this function to return either true or false, instead I get
/**
* Sends request to the backend to check if jwt is valid
* #returns {boolean}
*/
const isAuthenticated = () => {
const token = localStorage.getItem('jwt');
if(!token) return false;
const config = {headers : {'x-auth-token' : token}};
const response = axios.get('http://localhost:8000/user' , config)
.then(res => res.status === 200 ? true : false)
.catch(err => false);
return response;
}
export default isAuthenticated;
I tried separating them and using async/await :
const isAuthenticated = async () => {
const response = await makeRequest();
return response;
}
const makeRequest = async () => {
const token = localStorage.getItem('jwt');
const config = {headers : {'x-auth-token' : token}};
const response = await axios.get('http://localhost:8000/user' , config)
.then(res => res.status === 200 ? true : false)
.catch(err => false);
return response;
}
And still the same..
After some suggestions :
const isAuthenticated = () => {
const response = makeRequest();
return response;
}
const makeRequest = async () => {
try {
const token = localStorage.getItem('jwt');
const config = {headers : {'x-auth-token' : token}};
const response = await axios.get('http://localhost:8000/user', config);
if (response.status === 200) { // response - object, eg { status: 200, message: 'OK' }
console.log('success stuff');
return true;
}
return false;
} catch (err) {
console.error(err)
return false;
}
}
export default isAuthenticated;
First of all if.
If you are using the default promise then & catch, then the success action should be handled within the 'then' function.
axios.get('http://localhost:8000/user', config)
.then(res => console.log('succesfull stuff to be done here')
.catch(err => console.error(err)); // promise
if you want to use the async/await syntactic sugar, which I personally like it's
const makeRequest = async () => {
try {
const token = localStorage.getItem('jwt');
const config = {headers : {'x-auth-token' : token}};
const response = await axios.get('http://localhost:8000/user', config);
if (response.status === 200) { // response - object, eg { status: 200, message: 'OK' }
console.log('success stuff');
return true;
}
return false;
} catch (err) {
console.error(err)
return false;
}
}
You have to employ the use of async/await,like this:
const isAuthenticated =async () => {
const token = localStorage.getItem('jwt');
if(!token) return false;
const config = {headers : {'x-auth-token' : token}};
const response =await axios.get('http://localhost:8000/user' , config)
.then(res => res.status === 200 ? true : false)
.catch(err => false);
return response;
}
Related
I was using workbox5.14 (#nuxtjs/pwa) to precache the 'message' event by passing the URL to PrecacheController when received. (from workbox-window)
At this time, PrecacheController.addToCacheList() would not execute the cache, and for some reason PrecacheController.install() would do so.
However, with v6, PrecacheController.install() now requires an 'install' event or an 'activate' event, and I cannot execute PrecacheController.install(event) with a 'message' event. This results in an error.
"sw.js:238 Uncaught (in promise) DOMException: Failed to execute 'waitUntil' on 'ExtendableEvent': The event handler is already finished and no extend lifetime promises are outstanding."
How can we execute PrecacheController's caching process on the 'message' event?
Library Affected:
workbox-precaching
Browser & Platform:
Google Chrome 106.0.5249.103（Official Build）
Issue or Feature Request Description:
v5 ok
/* global importScripts, workbox, consola, processFuncPromise */
const cacheName = workbox.core.cacheNames.precache
const precacheController = new workbox.precaching.PrecacheController(cacheName)
addEventListener('message', async (event) => {
if (event.data.type === 'ADD_PRECACHE') {
const cacheTargetFiles = event.data.payload
const addCaches = async (cacheTargetFiles) => {
for (const file of cacheTargetFiles) {
const cacheKey = precacheController.getCacheKeyForURL(file.filePath)
const cached = await caches
.match(cacheKey)
.then((response) => response !== undefined)
if (!cached) {
precacheController.addToCacheList([{ url: file.filePath, revision: file.revision }])
}
}
}
const checkCaches = async () => {
const cachedList = cacheTargetFiles.map(async (file) => {
const cacheKey = precacheController.getCacheKeyForURL(file.filePath)
const cached = await caches
.match(cacheKey)
.then((response) => response !== undefined)
return cached
})
const cachedListResult = await Promise.all(cachedList)
const cachedListResultFilterd = cachedListResult.filter((response) => {
return response
})
if (cachedListResultFilterd.length === cacheTargetFiles.length) {
return Promise.resolve({ isCompleted: true })
} else {
return Promise.resolve(null)
}
}
await addCaches(cacheTargetFiles)
// ★Caching is started with this INSTALL
precacheController.install()
await processFuncPromise(checkCaches)
self.clients.matchAll().then((clients) =>
clients.forEach((client) => {
client.postMessage({ type: 'FINISHED_ADD_PRECACHE' })
})
)
}
})
addEventListener('install', (event) => {
event.waitUntil(precacheController.install())
event.waitUntil(self.skipWaiting())
})
addEventListener('activate', (event) => {
workbox.precaching.cleanupOutdatedCaches()
event.waitUntil(precacheController.activate())
event.waitUntil(self.clients.claim())
})
addEventListener('fetch', (event) => {
const cacheKey = precacheController.getCacheKeyForURL(event.request.url)
event.respondWith(
caches.match(cacheKey).then(function (response) {
// Cache hit - return the response from the cached version
if (response) {
return response
}
// Not in cache - return the result from the live server
// `fetch` is essentially a "fallback"
return fetch(event.request)
})
)
})
// ↓processFuncPromise()
// export const processFuncPromise = (func, interval = 500) => {
// const retryFunc = (resolve, reject) =>
// func()
// .then((result) => ({ result, isCompleted: result !== null }))
// .then(({ result, isCompleted }) => {
// if (isCompleted) {
// return resolve(result)
// } else {
// return setTimeout(() => retryFunc(resolve, reject), interval)
// }
// })
// .catch(reject)
// return new Promise(retryFunc)
// }
v6 ng
/* global importScripts, workbox, consola, processFuncPromise */
const cacheName = workbox.core.cacheNames.precache
const precacheController = new workbox.precaching.PrecacheController(cacheName)
addEventListener('message', async (event) => {
if (event.data.type === 'ADD_PRECACHE') {
const cacheTargetFiles = event.data.payload
const addCaches = async (cacheTargetFiles) => {
for (const file of cacheTargetFiles) {
const cacheKey = precacheController.getCacheKeyForURL(file.filePath)
const cached = await caches
.match(cacheKey)
.then((response) => response !== undefined)
if (!cached) {
precacheController.addToCacheList([{ url: file.filePath, revision: file.revision }])
}
}
}
const checkCaches = async () => {
const cachedList = cacheTargetFiles.map(async (file) => {
const cacheKey = precacheController.getCacheKeyForURL(file.filePath)
const cached = await caches
.match(cacheKey)
.then((response) => response !== undefined)
return cached
})
const cachedListResult = await Promise.all(cachedList)
const cachedListResultFilterd = cachedListResult.filter((response) => {
return response
})
if (cachedListResultFilterd.length === cacheTargetFiles.length) {
return Promise.resolve({ isCompleted: true })
} else {
return Promise.resolve(null)
}
}
await addCaches(cacheTargetFiles)
// ★ERROR
precacheController.install(event)
await processFuncPromise(checkCaches)
self.clients.matchAll().then((clients) =>
clients.forEach((client) => {
client.postMessage({ type: 'FINISHED_ADD_PRECACHE' })
})
)
}
})
addEventListener('install', (event) => {
precacheController.install(event)
event.waitUntil(self.skipWaiting())
})
addEventListener('activate', (event) => {
workbox.precaching.cleanupOutdatedCaches()
precacheController.activate(event)
event.waitUntil(self.clients.claim())
})
addEventListener('fetch', (event) => {
const cacheKey = precacheController.getCacheKeyForURL(event.request.url)
event.respondWith(
caches.match(cacheKey).then(function (response) {
// Cache hit - return the response from the cached version
if (response) {
return response
}
// Not in cache - return the result from the live server
// `fetch` is essentially a "fallback"
return fetch(event.request)
})
)
})
// ↓processFuncPromise()
// export const processFuncPromise = (func, interval = 500) => {
// const retryFunc = (resolve, reject) =>
// func()
// .then((result) => ({ result, isCompleted: result !== null }))
// .then(({ result, isCompleted }) => {
// if (isCompleted) {
// return resolve(result)
// } else {
// return setTimeout(() => retryFunc(resolve, reject), interval)
// }
// })
// .catch(reject)
// return new Promise(retryFunc)
// }
I asked the question on githubbut could not get an answer, so I came here.
Goal
My goal is to call componentDidMount() function to return some values from another method called getUserPlaylists().
Problem
The problem I am encountering is that the componentDidMount() shows me value of undefined and getUserPlaylists() shows me a result of an array.
Actual result
Code
Within Spotify.js file I have the following code:
const clientId = 'Cleint ID Here';
const redirectUri = 'http://localhost:3000/';
let accessToken;
let userId;
const Spotify = {
getAccessToken() {
if (accessToken) {
return accessToken;
}
const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
const expiryInMatch = window.location.href.match(/expires_in=([^&]*)/);
if (accessTokenMatch && expiryInMatch) {
accessToken = accessTokenMatch[1];
const expiresIn = Number(expiryInMatch[1]);
window.setTimeout(() => accessToken = '', expiresIn * 10000);
window.history.pushState('Access Token', null, '/');
return accessToken;
} else {
const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`;
window.location = accessUrl;
}
},
async getUserPlaylists() {
await Spotify.getCurrentUserId().then(userId => {
const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
fetch(` https://api.spotify.com/v1/users/${userId}/playlists`, {
headers : headers
})
.then(res => res.json())
.then(res => {
if(!res.items) {
return [];
} else {
console.log(res.items)
return res.items;
}
})
})
},
getCurrentUserId() {
if (userId) {
return new Promise((resolve) => {
resolve(userId);
})
} else {
return new Promise((resolve) => {
const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
return fetch("https://api.spotify.com/v1/me", { headers: headers })
.then(res => res.json())
.then(jsonRes => {
userId = jsonRes.id;
resolve(userId);
});
})
}
}
}
export { Spotify };
Summary
I have 3 objects that can be called as methods within my app.js file.
Here is how I call the componentDidMount() within my app.js file:
async componentDidMount() {
const val = await Spotify.getUserPlaylists();
console.log(val)
}
Expected result
The componentDidMount() should return the same value as getUserPlaylists()
Question
I don't understand why componentDidMount() is returning value of undefined?
Cause you're not returning anything from getUserPlaylists
async getUserPlaylists() {
// here return missed
return await Spotify.getCurrentUserId().then(userId => {
const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
// here return too
return fetch(` https://api.spotify.com/v1/users/${userId}/playlists`, {
headers : headers
})
.then(res => res.json())
.then(res => {
if(!res.items) {
return [];
} else {
console.log(res.items)
return res.items.map(playlist => ({
playlistId: playlist.id,
playListName: playlist.name
}));
}
})
})
},
You can simply use the below code, which does the same
async getUserPlaylists() {
// here return missed
try {
const userId = await Spotify.getCurrentUserId()
const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
// here return too
const result = await fetch(` https://api.spotify.com/v1/users/${userId}/playlists`, { headers })
const res = await result.json()
if(!res.items) return [];
console.log(res.items)
return res.items.map(playlist => ({ playlistId: playlist.id, playListName: playlist.name }));
} catch(err) {
console.log({ err })
}
}
I am using jest to test my code:
export const getReq = async () => {
let data = '';
await fetch(
'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits',
)
.then((response) => {
let status = null;
if (response.status === 200) {
status = response.status;
} else {
status = 'error';
}
if (status === 200) {
alert('success');
} else {
data = '';
alert('Error');
}
return response.json();
})
.then((commits) => {
data = commits.map(({ sha }: any) => sha)[0];
});
return data;
};
And now i want to test the situation when in my alert should appear: alert('Error'); and data = '';. So, for this i created this test:
test('Asynchronous return values error', async() => {
global.alert = jest.fn();
global.fetch = jest.fn().mockResolvedValueOnce({
json: () =>
Promise.reject(new Error('my error')),
status: 401,
});
const result = await getReq();
expect(global.alert).toHaveBeenCalledWith('Error');
expect(global.fetch).toHaveBeenCalledWith(
'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits',
);
expect(result).toEqual('');
});
But when i run the test i get: Error: my error and my test does not work
What could be the issue and how to test the things that i described above?
I'm trying to build a react-native app with expo and while trying to sign up I get the following error message stemming from my api.js file:
response.text is not a function. (In 'response.text()', 'response.text' is undefined).
Here is my code:
const BASE_URL = "my local IP:5000";
export const api = async (url, method, body = null, headers = {}) => {
try {
const endPoint = BASE_URL.concat(url);
const reqBody = body ? JSON.stringify(body) : null;
const fetchParams = {method, headers};
if((method === "POST" || method === "PUT") && !reqBody) {
throw new Error("Request body required");
}
if(reqBody) {
fetchParams.headers["Content-type"] = "application/json";
fetchParams.body = reqBody;
}
const fetchPromise = fetch(endPoint, fetchParams);
const timeOutPromise = new Promise((resolve, reject) => {
setTimeout(() => {
reject("Request Timeout");
}, 3000);
});
const response = await Promise.race([fetchPromise, timeOutPromise]);
return response;
} catch (e) {
return e;
}
}
export const fetchApi = async (url, method, body, statusCode, token = null, loader = false)
=> {
try {
const headers = {}
const result = {
token: null,
success: false,
responseBody: null
};
if(token) {
headers["x-auth"] = token;
}
const response = await api(url, method, body, headers);
console.log(response);
if(response.status === statusCode) {
result.success = true;
if(response.headers.get("x-auth")) {
result.token = response.headers.get("x-auth");
}
Here is response.text()
let responseBody;
const responseText = await response.text();
//const responseText = await response.json();
try {
responseBody = JSON.parse(responseText);
} catch (e) {
responseBody = responseText;
}
result.responseBody = responseBody;
return result;
}
Here is response.text()
let errorBody;
const errorText = await response.text();
//const errorText = await response.json();
try {
errorBody = JSON.parse(errorText);
} catch (e) {
errorBody = errorText;
}
result.responseBody = errorBody;
console.log(result);
throw result;
} catch (error) {
return error;
}
}
Any help would be immensely appreciated.
I am using google cloud function to handle data's. And in one of my function, i am doing nested .then's.
The problem is, everything works find, but i am getting error of "Unhandled rejection" in function log.
I don't know what, mistake i am doing. This is my cloud function code :
const admin = require('firebase-admin');
const rp = require('request-promise');
module.exports = function(req, res) {
const phone = String(req.body.phone).replace(/[^\d]/g, '');
const amount = parseInt(req.body.amount);
const couponCodeName = (req.body.couponCodeName);
const couponUsage = parseInt(req.body.couponUsage);
const usersCouponUsage = parseInt(req.body.usersCouponUsage);
const finalAddress = (req.body.finalAddress);
const planName = (req.body.planName);
const saveThisAddress = (req.body.saveThisAddress);
const orderNumber = (req.body.orderNumber);
const options = {
method: 'POST',
uri:`https://....`,
body: {
amount
},
json: true
};
return admin.auth().getUser(phone)
.then(userRecord => {
return rp(options)
})
.then((orderResponse) => {
return admin.database().ref('trans/'+ phone)
.push({ amount: orderResponse.amount })
})
.then(() => {
return admin.database().ref('ordersOfUsers/'+ phone)
.push({ amount })
})
.then(() => {
return saveThisAddress === true ?
admin.database().ref('SavedAddress/'+phone)
.push({address: finalAddress}) : null
})
.then(() => {
return admin.database().ref('delivery/'+phone+'/'+orderNumber)
.set({ plan: planName === "" ? "Single Day Plan" : planName, delivered: false}, () => {
res.status(200).send({ success:true })
})
})
.then(() => {
return couponCodeName === "" ? null :
admin.database().ref(`couponCodes/${couponCodeName}`)
.update({couponUsage: couponUsage + 1 })
})
.then(() => {
return usersCouponUsage === "" ? null :
admin.database().ref(`couponUsage/${phone}`)
.update({ [couponCodeName]: usersCouponUsage + 1 })
})
.catch((err) => {
res.status(422).send({ error: err })
})
.catch((err) => {
res.status(422).send({error: err });
});
}
Your code already has return statement inside promise(except in the catch block). So may be removing the return from return admin.auth().getUser(phone) can resolve your error.