Alexa Skills: Lambda function to read contents from a file in S3 - amazon-s3

I have an Alexa Skill that tries to read the contents from a file stored in S3. The test event for the Lambda function for Alexa Start Session is successful. I understand that there is something wrong with my CompletedMyIntentHandler but I can't quite seem to figure it out. Any help on it is much appreciated. The lambda function takes help from https://github.com/alexa/alexa-cookbook/blob/master/aws/Amazon-S3/read/. Find my Lambda function below;
const Alexa = require('ask-sdk');
// 1. Text strings =====================================================================================================
// Modify these strings and messages to change the behavior of your Lambda function
const helpOutput = 'You can demonstrate the S3 Storage read capability by saying "Hello".';
const helpReprompt = 'Try saying "Hello World".';
var myBucket = 'jailalita'; // replace with your own bucket name!
var myObject = 'hello.txt'; // replace with your own file name!
// 2. Intent Handlers =============================================
const CompletedMyIntentHandler = {
canHandle(handlerInput) {
const request = handlerInput.requestEnvelope.request;
return request.type === 'IntentRequest' && request.intent.name === 'MyIntent';
},
handle(handlerInput) {
console.log('My Intent - handle');
const responseBuilder = handlerInput.responseBuilder;
const speechOutput = MyIntent();
return responseBuilder
.speak(speechOutput)
.getResponse();
},
};
const HelpHandler = {
canHandle(handlerInput) {
const request = handlerInput.requestEnvelope.request;
return request.type === 'IntentRequest' && request.intent.name === 'AMAZON.HelpIntent';
},
handle(handlerInput) {
const responseBuilder = handlerInput.responseBuilder;
return responseBuilder
.speak(helpOutput)
.reprompt(helpReprompt)
.getResponse();
},
};
const CancelStopHandler = {
canHandle(handlerInput) {
const request = handlerInput.requestEnvelope.request;
return request.type === 'IntentRequest' && (request.intent.name === 'AMAZON.CancelIntent' || request.intent.name === 'AMAZON.StopIntent');
},
handle(handlerInput) {
const responseBuilder = handlerInput.responseBuilder;
const speechOutput = 'Okay, talk to you later! ';
return responseBuilder
.speak(speechOutput)
.withShouldEndSession(true)
.getResponse();
},
};
const SessionEndedHandler = {
canHandle(handlerInput) {
const request = handlerInput.requestEnvelope.request;
return request.type === 'SessionEndedRequest';
},
handle(handlerInput) {
console.log(`Session ended with reason: ${handlerInput.requestEnvelope.request.reason}`);
return handlerInput.responseBuilder.getResponse();
},
};
const ErrorHandler = {
canHandle() {
return true;
},
handle(handlerInput, error) {
const request = handlerInput.requestEnvelope.request;
console.log(`Original Request was: ${JSON.stringify(request, null, 2)}`);
console.log(`Error handled: ${error}`);
return handlerInput.responseBuilder
.speak('Sorry, I can not understand the command. Please say again.')
.reprompt('Sorry, I can not understand the command. Please say again.')
.getResponse();
},
};
// 3. Helper Function =================================================================================================
function MyIntent() {
var myParams = {
Bucket: myBucket,
Key: myObject
};
S3read(myParams, myResult => {
console.log("sent : " + JSON.stringify(myParams));
console.log("received : " + myResult);
var speech = this.response.speak('The S 3 file says, ' + myResult );
return speech;
}
);
}
function S3read(params, callback) {
// call AWS S3
var AWS = require('aws-sdk');
var s3 = new AWS.S3();
s3.getObject(params, function(err, data) {
if(err) { console.log(err, err.stack); }
else {
var fileText = data.Body.toString(); // this is the complete file contents
callback(fileText);
}
});
}
// 4. Exports handler function and setup ===================================================
const skillBuilder = Alexa.SkillBuilders.custom();
exports.handler = skillBuilder
.addRequestHandlers(
//LaunchRequestHandler,
CompletedMyIntentHandler,
HelpHandler,
CancelStopHandler,
SessionEndedHandler,
)
.addErrorHandlers(ErrorHandler)
.lambda();
JSON Input
{
"version": "1.0",
"session": {
"new": true,
"sessionId": "amzn1.echo-api.session.e6f74d95-8d55-4aac-ade0-dd4ff4ed4f04",
"application": {
"applicationId": "amzn1.ask.skill.5edd47bc-525d-4ef4-9b6e-a83a7e79744f"
},
"user": {
"userId": "amzn1.ask.account.AF4SLRK5TC4SDSHL7LGK2IB6SMXCPGS7Y6YKYLPDGWRE7CA3K6MCKVVUW2OFMVCWJFXZDQBSYY5Z2RXZWQAJLDCMR3SXYCVA7ZARDRNQXA3TXBM4ILP77FKNOO4MCVPLWHIXW3QNZCRYPDQ7CCBP6QT7GMTBMQX2BVCNS22SZL4MC6WB7GDS44XN2DKGJQBMGIDQ3O7RBYD6GAI"
}
},
"context": {
"System": {
"application": {
"applicationId": "amzn1.ask.skill.5edd47bc-525d-4ef4-9b6e-a83a7e79744f"
},
"user": {
"userId": "amzn1.ask.account.AF4SLRK5TC4SDSHL7LGK2IB6SMXCPGS7Y6YKYLPDGWRE7CA3K6MCKVVUW2OFMVCWJFXZDQBSYY5Z2RXZWQAJLDCMR3SXYCVA7ZARDRNQXA3TXBM4ILP77FKNOO4MCVPLWHIXW3QNZCRYPDQ7CCBP6QT7GMTBMQX2BVCNS22SZL4MC6WB7GDS44XN2DKGJQBMGIDQ3O7RBYD6GAI"
},
"device": {
"deviceId": "amzn1.ask.device.AETD2DDUWNTWA5BNNDFHCRT26SLOZUTZUFJ5P3OEQGDCWWDSFWPKNONGMT4KZAJPUB6ZRD3YVCDEVFAGPLXHVP6XESWS6BKEYZHZRXT25QNK2RTFNUG4PKD347P5DAWE2H4WQLGTQVLNQ5JNFGHFUSUC3X7Q",
"supportedInterfaces": {}
},
"apiEndpoint": "https://api.amazonalexa.com",
"apiAccessToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IjEifQ.eyJhdWQiOiJodHRwczovL2FwaS5hbWF6b25hbGV4YS5jb20iLCJpc3MiOiJBbGV4YVNraWxsS2l0Iiwic3ViIjoiYW16bjEuYXNrLnNraWxsLjVlZGQ0N2JjLTUyNWQtNGVmNC05YjZlLWE4M2E3ZTc5NzQ0ZiIsImV4cCI6MTUzMDUxMzU2NCwiaWF0IjoxNTMwNTA5OTY0LCJuYmYiOjE1MzA1MDk5NjQsInByaXZhdGVDbGFpbXMiOnsiY29uc2VudFRva2VuIjpudWxsLCJkZXZpY2VJZCI6ImFtem4xLmFzay5kZXZpY2UuQUVURDJERFVXTlRXQTVCTk5ERkhDUlQyNlNMT1pVVFpVRko1UDNPRVFHRENXV0RTRldQS05PTkdNVDRLWkFKUFVCNlpSRDNZVkNERVZGQUdQTFhIVlA2WEVTV1M2QktFWVpIWlJYVDI1UU5LMlJURk5VRzRQS0QzNDdQNURBV0UySDRXUUxHVFFWTE5RNUpORkdIRlVTVUMzWDdRIiwidXNlcklkIjoiYW16bjEuYXNrLmFjY291bnQuQUY0U0xSSzVUQzRTRFNITDdMR0sySUI2U01YQ1BHUzdZNllLWUxQREdXUkU3Q0EzSzZNQ0tWVlVXMk9GTVZDV0pGWFpEUUJTWVk1WjJSWFpXUUFKTERDTVIzU1hZQ1ZBN1pBUkRSTlFYQTNUWEJNNElMUDc3RktOT080TUNWUExXSElYVzNRTlpDUllQRFE3Q0NCUDZRVDdHTVRCTVFYMkJWQ05TMjJTWkw0TUM2V0I3R0RTNDRYTjJES0dKUUJNR0lEUTNPN1JCWUQ2R0FJIn19.Fc-aAcaf4qTgf489cQsZ44KTq-yZ-xMJCBenq9DbpppkMgSscF0NodGYTK967AcGblwqOFqcwIC1PvGmISER9oDH5TIhKF1kLsTimRHRKsttElRl7FIEvki-sKLD4VTeStTKM-w5laBm6urAzlCXpJySU-InVH5_qE0M5LHnLZRrE_qy7EmIq2vsrq2Cekve-gQ3Y3ImW3_0b7ikg6gwO6si-O0IxXO6hxS5sTuQH4f4aRybHVO3jflHD7g7pGPFzfkpc_tg6KFkhFv6CMvkx25A2u7iO7vVQpMHdj-_2ZM0ZmO9JuP-v7ydKYT_1IDjfpZKfvgIGyYsNfCPDY5F2Q"
}
},
"request": {
"type": "LaunchRequest",
"requestId": "amzn1.echo-api.request.12ef23e3-a7e5-48a4-90f9-de9c253f72b9",
"timestamp": "2018-07-02T05:39:24Z",
"locale": "en-US",
"shouldLinkResultBeReturned": false
}
}
JSON Output
{
"body": {
"version": "1.0",
"response": {
"outputSpeech": {
"type": "SSML",
"ssml": "<speak>Sorry, I can not understand the command. Please say again.</speak>"
},
"reprompt": {
"outputSpeech": {
"type": "SSML",
"ssml": "<speak>Sorry, I can not understand the command. Please say again.</speak>"
}
},
"shouldEndSession": false
},
"sessionAttributes": {},
"userAgent": "ask-node/2.0.0 Node/v8.10.0"
}
}
JSON Editor
{
"interactionModel": {
"languageModel": {
"invocationName": "hello world",
"intents": [
{
"name": "AMAZON.FallbackIntent",
"samples": []
},
{
"name": "AMAZON.CancelIntent",
"samples": []
},
{
"name": "AMAZON.HelpIntent",
"samples": []
},
{
"name": "AMAZON.StopIntent",
"samples": []
},
{
"name": "MyIntent",
"slots": [],
"samples": [
"hello"
]
}
],
"types": []
}
}
}

You can't build your response and return inside the S3Read function as it's an async call to an external service. You need to wait for that call using async/await and once you get a value then craft the response and return.

Related

Query result doesn't give the list of items, but just an empty array [ ] in aws-amplify

I try to make a query to see the list of users. My custom lambda function (which I attached as policy) is as follows:
const aws = require('aws-sdk');
const ddb = new aws.DynamoDB();
exports.handler = async (event, context) => {
if (!event.request.userAttributes.sub) {
console.log("Error: No user was written to DynamoDB")
context.done(null, event);
return;
}
// Save the user to DynamoDB
const date = new Date();
const params = {
Item: {
'id': { S: event.request.userAttributes.sub },
'__typename': { S: 'User' },
'username': { S: event.userName },
'email': { S: event.request.userAttributes.email },
'createdAt': { S: date.toISOString() },
'updatedAt': { S: date.toISOString() },
},
TableName: process.env.USERTABLE,
}
try {
await ddb.putItem(params).promise();
console.log("Success");
} catch (e) {
console.log("Error", e);
}
context.done(null, event);
}
And the schema model is as follows:
type User #model
#auth(rules: [
{ allow: public, operations: [read]}
{ allow: owner }
])
{
id: ID!
username: String!
email: String!
}
Although there is one user in the dynamoDb, when I make a query by:
query listUsers {
listUsers {
items {
email
id
username
}
}
}
the result is as follows:
{
"data": {
"listUsers": {
"items": []
}
}
}
As can be seen, the array of "items" is empty, the items are not shown, when I look at the console dynamoDb table, I see user items with id, username and email values. But it should give the results, where do I make mistake? Meanwhile I am new on aws-amplify.

How to resolve Cloud Function Error:401 Unauthorized

I have coded an Apps Script that creates an event in the Calendar.
Apps Script is stand alone, and event in also created in my personal Gmail account.
This Script is linked to GCP project linked to same account as Script.
Oauth consent screen is created in the GCP account and also credentials for Oauth2.0 client ID.
Now I created a cloud function to call this appsScript but it is giving an Error:401
following is code for the cloud function
let message = req.query.message || req.body.message || 'Hello World!';
const axios = require('axios');
const {google} = require('googleapis');
//Authorization
const { GoogleAuth } = require('google-auth-library');
const auth1 = new GoogleAuth({
keyFile: 'credentials.json',
scopes: ['https://www.googleapis.com/auth/drive','https://www.googleapis.com/auth/drive.metadata'
, 'https://www.googleapis.com/auth/calendar','https://www.googleapis.com/auth/calendar.events' ],
});
const drive = google.drive({version: 'v3', auth: auth1 });
const calendar = google.calendar({version : "v3"});
//calling formSchedule function with all the variables
async function formSchedule(eventDate,claimId, garageId, claimDet,startTime,cEmailG){
//Schedule Meeting Json Data
var evDurtion=30;
var startDateTime = startTime;
var endDateTime=new Date(startDateTime.getTime()+(evDurtion*60000));
// console.log(endDateTime)
var subject="Claim ID : "+claimId+' - Call';
var attendees=[{
"email": garageId,
},
];
var eventData={
"summary":subject,
'start': {
'dateTime': startDateTime,
'timeZone': 'Asia/Kolkata'
},
'end': {
'dateTime': endDateTime,
'timeZone': 'Asia/Kolkata'
},
"attendees":attendees,
"conferenceData": {
"createRequest": {
"conferenceSolutionKey": {
"type": "hangoutsMeet"
},
"status": {
"statusCode": "success"
},
"requestId": "test1235"
}
},
"description":claimDet,
"defaultReminders": [
{
"method": "popup",
"minutes": "5"
}
]
}
console.log("after all variables initialization")
// Schedule Meeting
axios({
method: "post",
url : //API Executable deployed Apps Script link,
data: {
'eventdata' : eventData,
'serviceId' : cEmailG
},
headers: {
'Content-Type': 'text/plain;charset=utf-8',
},
}).then(function (response) {
try{
console.log('Event Added Successfully.')
}
catch (error){
console.log('------error-----',error)
}
})
}
res.status(200).send(message);
};```

Why am I getting data undefined when I can see the data?

I have been staring at these action creators:
import * as types from './constants';
import * as endpoints from 'endpoints';
import * as requester from 'services/Requester';
import * as helpers from 'account-settings/helpers/data-helpers';
export function fetchPrefences({Key}) {
return dispatch => {
const url = `${endpoints.v2.INDIVIDUALS}/${Key}/preferences`;
requester.sendGet(url).then(data => {
const payload = helpers.sortPreferences(data);
dispatch({
type: types.SET_USER_PREFERENCES,
payload,
});
});
};
}
export function fetchTopics() {
return dispatch => {
requester.sendGet(endpoints.TOPICS_OF_CONCERN).then(data => {
dispatch({
type: types.SET_USER_TOPICS,
payload: data.Items,
});
});
};
}
export function handleStateChange(payload) {
return {
type: types.SET_NEW_PREFERENCES,
payload,
};
}
export function handleUpdateTopics({topics, involved}, updateBoth = false) {
return dispatch => {
return requester
.sendPut(endpoints.TOPICS_OF_CONCERN, {
Items: topics,
})
.then(data => {
dispatch({
type: types.SET_USER_TOPICS,
payload: data.Items,
});
if (updateBoth) {
dispatch(handleUpdatePreferences({involved}));
}
});
};
}
export function handleUpdateGetInvoved({involved}) {
return (dispatch, getState) => {
const {auth} = getState();
//prettier-ignore
const url = `${endpoints.v2.INDIVIDUALS}/${auth.user.Key}/preferences`;
return requester
.sendPut(url, {
Items: involved,
})
.then(data => {
const payload = helpers.sortPreferences(data);
dispatch({
type: types.SET_USER_PREFERENCES,
payload,
});
});
};
}
And it's clear I am getting data as undefined with this message:
What is not clear is why? When I do a curl, the data is there:
{"items":[{"category":"None","key":"2883040c-88b8-4899-bd47-114a560d085b","displayText":"Energy
Costs","isSelected":false,"order":1},{"category":"None","key":"a745a3d6-0f64-4595-8734-6082d9c914f7","displayText":"Regulations","isSelected":false,"order":7},{"category":"None","key":"51797a61-8016-4817-a46e-72dee3d8239a","displayText":"Minimum
Wage","isSelected":false,"order":5},{"category":"None","key":"381e24d0-2668-4a69-a993-7d5e1ecaec3b","displayText":"Taxes","isSelected":false,"order":8},{"category":"None","key":"dfaf22cb-111a-46f3-bce3-93fbf4a91490","displayText":"Unemployment
Insurance","isSelected":false,"order":9},{"category":"None","key":"c55b5d2a-a0f3-4c35-bf59-b433259b2059","displayText":"Workers
Compensation","isSelected":false,"order":10},{"category":"None","key":"d4b787d4-550b-4866-a5cc-c6a2de61a91a","displayText":"Healthcare","isSelected":false,"order":4},{"category":"None","key":"c2557854-421d-4b2f-810f-caadf938cded","displayText":"Government
Spending","isSelected":false,"order":3},{"category":"None","key":"cf91f638-c5fa-4252-be01-dce504ae369d","displayText":"Private
Property
Rights","isSelected":false,"order":6},{"category":"None","key":"0eae5ccf-2ba5-41bd-9111-efe7acafa512","displayText":"Finding
Qualified Employees","isSelected":false,"order":2}]}%
In Swagger, I check, the data is there:
{
"items": [
{
"category": "None",
"key": "2883040c-88b8-4899-bd47-114a560d085b",
"displayText": "Energy Costs",
"isSelected": false,
"order": 1
},
{
"category": "None",
"key": "a745a3d6-0f64-4595-8734-6082d9c914f7",
"displayText": "Regulations",
"isSelected": false,
"order": 7
},
{
"category": "None",
"key": "51797a61-8016-4817-a46e-72dee3d8239a",
"displayText": "Minimum Wage",
"isSelected": false,
"order": 5
},
{
"category": "None",
"key": "381e24d0-2668-4a69-a993-7d5e1ecaec3b",
"displayText": "Taxes",
"isSelected": false,
"order": 8
},
{
"category": "None",
"key": "dfaf22cb-111a-46f3-bce3-93fbf4a91490",
"displayText": "Unemployment Insurance",
"isSelected": false,
"order": 9
},
{
"category": "None",
"key": "c55b5d2a-a0f3-4c35-bf59-b433259b2059",
"displayText": "Workers Compensation",
"isSelected": false,
"order": 10
},
{
"category": "None",
"key": "d4b787d4-550b-4866-a5cc-c6a2de61a91a",
"displayText": "Healthcare",
"isSelected": false,
"order": 4
},
{
"category": "None",
"key": "c2557854-421d-4b2f-810f-caadf938cded",
"displayText": "Government Spending",
"isSelected": false,
"order": 3
},
{
"category": "None",
"key": "cf91f638-c5fa-4252-be01-dce504ae369d",
"displayText": "Private Property Rights",
"isSelected": false,
"order": 6
},
{
"category": "None",
"key": "0eae5ccf-2ba5-41bd-9111-efe7acafa512",
"displayText": "Finding Qualified Employees",
"isSelected": false,
"order": 2
}
]
}
I noticed that in the code the items property was written as Items, I tried to change it to items to match the data property, that did nothing.
A colleague suggested the issue could be in the requester object, I do have a question about it too:
import axios from 'axios';
import LocalStorage from './LocalStorage';
import env from 'env';
import * as appcenter from 'utils/appcenterLogger';
import * as titlesHelper from 'utils/titleCaser';
let expired = false;
export const instance = axios.create({
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
NFIBAppID: env.NFIBAppID,
},
});
let preHeaders = {};
async function mergeConfig(config) {
try {
const access = await LocalStorage.get('access');
preHeaders = access;
return {...config, headers: {...access}};
} catch (error) {
return {...config};
}
}
export async function sendGet(url, config = {}) {
if (expired) {
return;
}
const now = new Date();
return instance
.get(url, await mergeConfig(config))
.then(response => {
return saveHeaders(response, now, url);
})
.catch(error => {
return catchErros(error, now, url);
});
}
export async function sendPost(url, data, config = {}) {
if (expired) {
return;
}
const now = new Date();
return instance
.post(url, titlesHelper.lowerCaser(data), await mergeConfig(config))
.then(response => {
console.log(response);
return saveHeaders(response, now, url);
})
.catch(error => {
return catchErros(error, now, url);
});
}
export async function sendPut(url, data, config = {}) {
if (expired) {
return;
}
const now = new Date();
return instance
.put(url, titlesHelper.lowerCaser(data), await mergeConfig(config))
.then(response => {
return saveHeaders(response, now, url);
})
.catch(error => {
return catchErros(error, now, url);
});
}
export async function sendPatch(url, data, config = {}) {
if (expired) {
return;
}
const now = new Date();
return instance
.patch(url, data, await mergeConfig(config))
.then(response => {
return saveHeaders(response, now, url);
})
.catch(error => {
return catchErros(error, now, url);
});
}
export async function sendDelete(url, data, config = {}) {
if (expired) {
return;
}
const now = new Date();
return instance
.delete(url, await mergeConfig(config))
.then(response => {
return saveHeaders(response, now, url);
})
.catch(error => {
return catchErros(error, now, url);
});
}
export function saveHeaders({data, headers}, timeSent, url) {
try {
if (headers && headers.authorizationtoken) {
LocalStorage.save('access', {
AuthorizationToken: headers.authorizationtoken,
});
}
const timeReceived = new Date();
LocalStorage.save('lastTimeRequestSent', timeReceived);
appcenter.trackRequestTiming(timeSent, timeReceived, headers, url, false);
return titlesHelper.toTitleCase(data);
} catch (_e) {
return false;
}
}
function catchErros({error, timeSent}, url) {
try {
const timeReceived = new Date();
LocalStorage.save('lastTimeRequestSent', timeReceived);
appcenter.trackRequestTiming(timeSent, timeReceived, error, url, true);
if (error && error.response) {
saveHeaders({
headers: preHeaders,
});
const {data} = error.response;
const message = data.message || data.Message;
if (message.includes('TokenExpired')) {
expired = true;
}
}
return Promise.reject(titlesHelper.toTitleCase(error.response.data));
} catch (_e) {
return error;
}
}
export function resetTokenExpired() {
expired = false;
}
I am seeing Promise syntax being mixed with async/await syntax, could this be causing an issue?
I tried to see if perhaps the issue was with the authorization token, so I console logged it:
let preHeaders = {};
async function mergeConfig(config) {
try {
const access = await LocalStorage.get('access');
console.log(access);
preHeaders = access;
return {...config, headers: {...access}};
} catch (error) {
return {...config};
}
}
but I am successfully getting that back:
{AuthorizationToken: "<bunch-o-numbers>"}
What I know at this point is that without the logic inside of the saveHeaders() function, a registered users' password will return undefined.
To complicate things, this application uses action helpers, which I have never implemented, but I see that Items property in there all over the place, keep in mind that the original warning read Items, but I changed it everywhere to items to make it match the JSON item property in the hope that would be the fix.
However, I have now come across these action helper files with the following code, action-helpers.js:
import * as endpoints from 'endpoints';
import * as requester from 'services/Requester';
import compareDesc from 'date-fns/compare_desc';
export async function fetchTransaction() {
try {
const response = await requester.sendGet(endpoints.TRANSACTIONS);
const {Items = []} = response;
return Items.sort((a, b) => compareDesc(a.DateTime, b.DateTime));
} catch (error) {
return [];
}
}
and in data-helpers.js:
export function sortPreferences(data) {
const sorted = data.Items.sort((a, b) => a.Order - b.Order);
const communications = sorted.filter(
p => p.Category === 'CommunicationPreferences'
);
const privacy = sorted.filter(p => p.Category === 'MemberPrivacy');
const involved = sorted.filter(p => p.Category === 'GetInvolved');
const format = data.EmailFormatType === 'HTML' ? 'HTML' : 'Plain Text';
return {
communications,
privacy,
involved,
emailFormatType: format,
isEmailAllowed: data.IsEmailAllowed,
isPhoneAllowed: data.IsPhoneAllowed,
};
}
Most probably you are not getting the expected response from your requester function.
Try logging the response from the requester and see the output. You might have to use response.json() to resolve the promise correctly. This is assuming your requester class/function works like that.

How to access local component variable from a callback in vue?

I am trying to set my components variable using an api rest command. I wanted to handle all responses through a function in its own file called handleResponse() which is below.
// api/tools/index.js
function handleResponse (promise, cb, cbError) {
var cbErrorRun = (cbError && typeof cb === "function")
promise.then(function (response) {
if (!response.error) {
cb(response)
}
else if (cbErrorRun) {
cbError(response)
}
}).catch(function (error) {
console.log(error)
if (cbErrorRun) {
var responseError = {
"status": 404,
"error": true,
"message": error.toString()
}
cbError(responseError)
}
})
}
export {handleResponse}
In my component file I have this
.... More above....
<script>
import { fetchStock } from '#/api/stock'
export default {
data () {
return {
stock: {},
tabs: [
{
title: 'Info',
id: 'info'
},
{
title: 'Listings',
id: 'listings'
},
{
title: 'Company',
id: 'company'
}
],
}
},
validate ({params}) {
return /^\d+$/.test(params.id)
},
created: function() {
var params = {'id': this.$route.params.stockId}
//this.$route.params.stockId}
fetchStock(
params,
function(response) { //on successful data retrieval
this.stock = response.data.payload // payload = {'name': test123}
console.log(response)
},
function(responseError) { //on error
console.log(responseError)
}
)
}
}
</script>
The current code gives me this error: "Uncaught (in promise) TypeError: Cannot set property 'stock' of undefinedAc". I think this happens because I no longer have access to 'this' within the callback I pass in the fetchStock function. How would I fix this without changing the current handleResponse layout.
You can try this trick
created: function() {
var params = {'id': this.$route.params.stockId}
//this.$route.params.stockId}
var self = this;
fetchStock(
params,
function(response) { //on successful data retrieval
self.stock = response.data.payload // payload = {'name': test123}
console.log(response)
},
function(responseError) { //on error
console.log(responseError)
}
)
}
You can either use an arrow function for you callback since arrow functions maintain and use the this of their containing scope:
created: function() {
var params = {'id': this.$route.params.stockId}
//this.$route.params.stockId}
fetchStock(
params,
(response) => { //on successful data retrieval
self.stock = response.data.payload // payload = {'name': test123}
console.log(response)
},
(responseError) => { //on error
console.log(responseError)
}
)
}
Or you can assign const vm = this n the beginning of your method before the callbacks like so.
vm stands for "View Model"
created: function() {
var params = {'id': this.$route.params.stockId}
//this.$route.params.stockId}
const vm = this;
fetchStock(
params,
function(response) { //on successful data retrieval
self.stock = response.data.payload // payload = {'name': test123}
console.log(response)
},
function(responseError) { //on error
console.log(responseError)
}
)
}
I advise using the const as opposed to var in the vm declaration to make it obvious the value of vm is a constant.

Issue with mocking ajax request

I am writing a test for webclient viewmodel in Qunit and used Mockjax for moking ajax request, but it seems i am doing something wrong while moking, please help me to solve the following problem.
function WebmailViewModel() {
// Data
var self = this;
self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
self.chosenFolderId = ko.observable();
self.chosenFolderData = ko.observable();
self.chosenMailData = ko.observable();
// Behaviours
self.goToFolder = function(folder) {
self.chosenFolderId(folder);
self.chosenMailData(null); // Stop showing a mail
$.post('/mail', { folder: folder }, function(returnedData) {
self.chosenFolderData(returnedData);
});
}
self.goToMail = function(mail) {
self.chosenFolderId(mail.folder);
self.chosenFolderData(null); // Stop showing a folder
$.get("/mail", { mailId: mail.id }, self.chosenMailData);
};
self.goToFolder('Inbox');
};
$(function() {
ko.applyBindings(new WebmailViewModel());
});
test("web mail client test", function() {
stop(2);
var returnedData = {
"from": "deba#tieto.com",
"to": "test1#tieto.com",
"subject": "Subject1",
"date": "22/05/2014"
};
vm = new WebmailViewModel();
$.mockjax({
url: "/mail",
contentType: "application/json",
responseTime: 0,
response: function (settings) {
this.responseText = {"from": "deba#xyz.com", "to": "test1#xyz.com", "subject":"Subject1", "date":"22/05/2014"};
start();
}
});
vm.goToFolder('Inbox');
setTimeout(function() {
deepEqual(vm.chosenFolderData,returnedData, "Two objects can be the same in value" );
start();
}, 150);
});
Test Result:
Two objects can be the same in valueExpected: {
"date": "22/05/2014",
"from": "deba#tieto.com",
"subject": "Subject1",
"to": "test1#tieto.com"
}
Result: function c( ){
[code]
}
Diff: {
"date": "22/05/2014",
"from": "deba#tieto.com",
"subject": "Subject1",
"to": "test1#tieto.com"
function c( ){
[code]
}
Source: at Anonymous function (file:///C:/Users/dasssdeb/Desktop/JS%20Tests/QUnit/tests/tests.js:174:8)
I belive issue is with moking the ajax request. please help me with your valuable experience.
Your mockjax setup must come before your source code. In the code above you initialize the WebmailViewModel (which performs ajax requests) before you set up the mockjax request handler. Try structuring things like this instead:
// SOURCE CODE
// in your source code you will need to have a callback for your WebmailViewModel method arguments...
function WebmailViewModel() {
// ...
// Behaviours
self.goToFolder = function(folder, callback) {
self.chosenFolderId(folder);
self.chosenMailData(null); // Stop showing a mail
$.post('/mail', { folder: folder }, function(returnedData) {
self.chosenFolderData(returnedData);
callback(returnedData);
});
}
self.goToMail = function(mail) {
self.chosenFolderId(mail.folder);
self.chosenFolderData(null); // Stop showing a folder
$.get("/mail", { mailId: mail.id }, function(returnedData) {
self.chosenMailData(returnedData);
callback(returnedData);
});
};
};
Now you can create your test code with callbacks when they finish to hook your assertions into...
// TEST CODE
// Set up the request handler first...
$.mockjax({
url: "/mail",
contentType: "application/json",
responseTime: 0,
response: function (settings) {
this.responseText = {"from": "deba#xyz.com", "to": "test1#xyz.com", "subject":"Subject1", "date":"22/05/2014"};
}
});
// then create your test...
test("web mail client test", function() {
stop();
var returnedData = {
"from": "deba#tieto.com",
"to": "test1#tieto.com",
"subject": "Subject1",
"date": "22/05/2014"
};
vm = new WebmailViewModel();
vm.goToFolder('Inbox', function(returnedData) {
// this is the callback for when going to the folder finishes...
deepEqual(vm.chosenFolderData, returnedData, "Two objects can be the same in value" );
start();
});
});