× Typeerror: Cannot Read Property 'then' of Undefined
Resolving the JavaScript Promise Error "TypeError: Cannot Read 'Then' of Undefined"
Introduction
Working with JavaScript Promise comes with its ain array of errors, and a popular one is
TypeError: Cannot read property 'and then' of undefined.
In this guide, we will embrace ii lawmaking examples containing a bugs that cause this TypeError and and so refactor the code to resolve the outcome.
Case 1
Say you have the function getTaxAmount(price, taxRate) . It takes two arguments, toll and taxRate , calculates the corporeality of tax using the inputs, and is expected to return a Promise that resolves to the calculated tax amount.
Adjacent, phone call getTaxAmount() function with two arguments and log the returned value on the console.
1 const getTaxAmount = ( cost , taxRate ) => { 2 Math . floor ( ( price * taxRate ) / 100 ) ; three } ; four 5 getTaxAmount ( 100 , 12 ) . then ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
If you run this buggy code on your browser panel or using Node CLI, you lot volition become this error:
1 TypeError: Cannot read belongings 'then' of undefined sh
Example two
Hither's another case. getGithubOrgs(url) is a function that takes a URL and uses Fetch API to get GitHub organization information for a given user(deekshasharma). fetch() makes a network request to the destination URL and returns a Promise that resolves to a response object. The response is then parsed into a JSON. This function is expected to render a Promise 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 console.
1 function getGithubOrgs ( url ) { 2 fetch ( url ) . then ( ( response ) => response . json ( ) ) ; 3 } four 5 getGithubOrgs ( 6 "https://api.github.com/users/deekshasharma/orgs" seven ) . and so ( ( jsonData ) => panel . log ( jsonData ) ) ; js
When you lot run this lawmaking in the browser panel, you will become an error:
one TypeError: Cannot read holding 'so' of undefined sh
What Causes This TypeError
TypeError - Cannot read belongings 'and then' of undefined is thrown when the caller is expecting a Promise to be returned and instead receives undefined . Permit's consider the to a higher place examples.
In Example one, the getTaxAmount(cost, taxRate) function, when chosen, should take returned a Promise that resolves to a value of 12 . Currently this role simply calculates the tax corporeality using the two inputs and does not return a value. Hence, the undefined value is returned.
In Case two, the getGithubOrgs(url) function calls the Fetch API, which returns a Hope that resolves to a response object. This resulting Hope is received past the and so() method, which parses the response to JSON using the json() method. Finally, then() returns a new Promise that resolves to JSON. But yous may have noticed there is no render argument inside the getGithubOrgs(url) office, which means the resulting Promise from the then() method is never returned to the calling code.
How to Fix This Fault
To resolve the effect in both code examples, you'll need to refactor the functions. Let'southward look at them 1 by one.
Instance 1
The function getTaxAmount() should be refactored to the code beneath.
Promise.resolve() returns a resolved Hope with the value of the taxation amount calculated past the function. And then the calling code volition ever receive a Promise as long as valid arguments were passed.
one const getTaxAmount = ( cost , taxRate ) => { 2 return Hope . resolve ( Math . floor ( ( price * taxRate ) / 100 ) ) ; 3 } ; 4 five getTaxAmount ( 100 , 12 ) . and then ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
Run this code on your browser console or Node CLI, and you lot should go an ouput of 12 .
Case two
The function getGithubOrgs(url) should be refactored to include a return statement so that a Promise can exist returned to the caller.
one office getGithubOrgs ( url ) { 2 render fetch ( url ) . then ( ( response ) => response . json ( ) ) ; three } 4 5 getGithubOrgs ( "https://api.github.com/users/deekshasharma/orgs" ) . then ( ( res ) => 6 console . log ( res ) 7 ) ; js
Determination
Whenever you come across this TypeError while working with JavaScript Promise, the first step is to inspect the code that was expected to return a Promise . Afterwards all, you get this error when calling the then() method on a Hope . And the TypeError indicates you lot are calling then() on undefined , which is a hint that the Promise itself is undefined . The next pace is to get and debug the code to effigy out why a Promise is not returned. We looked at 2 different code examples to run into what can potentially cause this error and how to resolve it.
You tin can read more almost Promise.then() on MDN.
Source: https://www.pluralsight.com/guides/javascript-promise-typeerror:-cannot-read-then-of-undefined
0 Response to "× Typeerror: Cannot Read Property 'then' of Undefined"
Post a Comment