Script.js:48 Uncaught Typeerror: Cannot Read Property 'quote' of Undefined
Resolving the JavaScript Hope Error "TypeError: Cannot Read 'Then' of Undefined"
Introduction
Working with JavaScript Promise comes with its own array of errors, and a pop one is
TypeError: Cannot read belongings 'then' of undefined.
In this guide, we will embrace two code examples containing a bugs that cause this TypeError and and so refactor the code to resolve the issue.
Case 1
Say you have the part getTaxAmount(price, taxRate) . Information technology takes ii arguments, price and taxRate , calculates the amount of revenue enhancement using the inputs, and is expected to return a Promise that resolves to the calculated tax corporeality.
Next, call getTaxAmount() function with two arguments and log the returned value on the console.
1 const getTaxAmount = ( cost , taxRate ) => { ii Math . floor ( ( price * taxRate ) / 100 ) ; three } ; iv v getTaxAmount ( 100 , 12 ) . and then ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
If you run this buggy code on your browser console or using Node CLI, you volition get this mistake:
1 TypeError: Cannot read property 'then' of undefined sh
Case ii
Here's another case. getGithubOrgs(url) is a function that takes a URL and uses Fetch API to go GitHub arrangement information for a given user(deekshasharma). fetch() makes a network asking to the destination URL and returns a Promise that resolves to a response object. The response is and then parsed into a JSON. This part is expected to return a Hope that should resolve to JSON data.
The getGithubOrgs() function is then called with an argument containing a valid URL and logs the resulting JSON on the panel.
1 office getGithubOrgs ( url ) { 2 fetch ( url ) . then ( ( response ) => response . json ( ) ) ; three } iv v getGithubOrgs ( 6 "https://api.github.com/users/deekshasharma/orgs" vii ) . then ( ( jsonData ) => panel . log ( jsonData ) ) ; js
When yous run this code in the browser console, you volition go an fault:
1 TypeError: Cannot read property 'and then' of undefined sh
What Causes This TypeError
TypeError - Cannot read property 'and then' of undefined is thrown when the caller is expecting a Promise to be returned and instead receives undefined . Let's consider the above examples.
In Example 1, the getTaxAmount(cost, taxRate) function, when called, should have returned a Promise that resolves to a value of 12 . Currently this function simply calculates the revenue enhancement amount using the 2 inputs and does non render a value. Hence, the undefined value is returned.
In Case ii, the getGithubOrgs(url) office calls the Fetch API, which returns a Hope that resolves to a response object. This resulting Hope is received by the then() method, which parses the response to JSON using the json() method. Finally, then() returns a new Promise that resolves to JSON. But you lot may have noticed there is no return statement inside the getGithubOrgs(url) function, which means the resulting Promise from the then() method is never returned to the calling code.
How to Ready This Fault
To resolve the issue in both code examples, you'll demand to refactor the functions. Allow's look at them one by ane.
Example 1
The function getTaxAmount() should be refactored to the code below.
Hope.resolve() returns a resolved Promise with the value of the tax amount calculated past the function. So the calling lawmaking volition always receive a Hope every bit long equally valid arguments were passed.
one const getTaxAmount = ( cost , taxRate ) => { ii return Promise . resolve ( Math . floor ( ( price * taxRate ) / 100 ) ) ; three } ; 4 5 getTaxAmount ( 100 , 12 ) . then ( ( taxAmount ) => panel . log ( taxAmount ) ) ; js
Run this code on your browser console or Node CLI, and you should get an ouput of 12 .
Example 2
The function getGithubOrgs(url) should exist refactored to include a return argument and so that a Promise can be returned to the caller.
1 function getGithubOrgs ( url ) { 2 render fetch ( url ) . then ( ( response ) => response . json ( ) ) ; iii } 4 5 getGithubOrgs ( "https://api.github.com/users/deekshasharma/orgs" ) . then ( ( res ) => half dozen console . log ( res ) seven ) ; js
Conclusion
Whenever you run into this TypeError while working with JavaScript Promise, the first step is to inspect the code that was expected to return a Promise . Subsequently all, yous become this error when calling the then() method on a Hope . And the TypeError indicates you lot are calling so() on undefined , which is a hint that the Promise itself is undefined . The next step is to get and debug the code to figure out why a Promise is not returned. Nosotros looked at two dissimilar lawmaking examples to run across what can potentially crusade this error and how to resolve it.
You tin can read more than about Promise.then() on MDN.
Script.js:48 Uncaught Typeerror: Cannot Read Property 'quote' of Undefined
Source: https://www.pluralsight.com/guides/javascript-promise-typeerror:-cannot-read-then-of-undefined