+qunit Typeerror: Cannot Read Property 'config' of Undefined
Resolving the JavaScript Hope Mistake "TypeError: Cannot Read 'Then' of Undefined"
Introduction
Working with JavaScript Promise comes with its own array of errors, and a popular one is
TypeError: Cannot read property 'then' of undefined.
In this guide, nosotros will cover 2 code examples containing a bugs that cause this TypeError and then refactor the lawmaking to resolve the issue.
Example 1
Say you accept the function getTaxAmount(price, taxRate) . It takes two arguments, cost and taxRate , calculates the amount of tax using the inputs, and is expected to return a Promise that resolves to the calculated tax amount.
Adjacent, call getTaxAmount() function with two arguments and log the returned value on the panel.
1 const getTaxAmount = ( price , taxRate ) => { ii Math . floor ( ( price * taxRate ) / 100 ) ; 3 } ; four v getTaxAmount ( 100 , 12 ) . and so ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
If you run this buggy code on your browser console or using Node CLI, you will become this error:
1 TypeError: Cannot read property 'then' of undefined sh
Instance ii
Here's some other example. getGithubOrgs(url) is a part 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 Hope that resolves to a response object. The response is then parsed into a JSON. This function is expected to return a Promise that should resolve to JSON data.
The getGithubOrgs() function is and then called with an statement containing a valid URL and logs the resulting JSON on the panel.
1 function getGithubOrgs ( url ) { 2 fetch ( url ) . so ( ( response ) => response . json ( ) ) ; 3 } 4 5 getGithubOrgs ( half dozen "https://api.github.com/users/deekshasharma/orgs" seven ) . and then ( ( jsonData ) => panel . log ( jsonData ) ) ; js
When yous run this code in the browser panel, you will get an fault:
ane TypeError: Cannot read belongings '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 i, the getTaxAmount(price, taxRate) part, when called, should have returned a Hope that resolves to a value of 12 . Currently this part just calculates the taxation corporeality using the two inputs and does non return a value. Hence, the undefined value is returned.
In Instance 2, the getGithubOrgs(url) role calls the Fetch API, which returns a Promise that resolves to a response object. This resulting Promise is received past the then() 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 at that place is no return argument inside the getGithubOrgs(url) function, which means the resulting Promise from the then() method is never returned to the calling code.
How to Set This Error
To resolve the issue in both lawmaking examples, you'll need to refactor the functions. Let's look at them one by one.
Instance 1
The function getTaxAmount() should be refactored to the code below.
Promise.resolve() returns a resolved Promise with the value of the revenue enhancement corporeality calculated past the office. So the calling code will always receive a Promise every bit long as valid arguments were passed.
1 const getTaxAmount = ( price , taxRate ) => { 2 return Promise . resolve ( Math . floor ( ( price * taxRate ) / 100 ) ) ; 3 } ; 4 5 getTaxAmount ( 100 , 12 ) . then ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
Run this code on your browser panel or Node CLI, and you should get an ouput of 12 .
Case ii
The office getGithubOrgs(url) should exist refactored to include a return argument so that a Promise can be returned to the caller.
ane office getGithubOrgs ( url ) { 2 return fetch ( url ) . so ( ( response ) => response . json ( ) ) ; 3 } four 5 getGithubOrgs ( "https://api.github.com/users/deekshasharma/orgs" ) . so ( ( res ) => 6 console . log ( res ) seven ) ; js
Decision
Whenever you see this TypeError while working with JavaScript Promise, the first step is to audit the code that was expected to return a Promise . Afterward all, you get this fault when calling the so() method on a Promise . And the TypeError indicates you are calling and so() on undefined , which is a hint that the Promise itself is undefined . The next step is to go and debug the lawmaking to figure out why a Promise is not returned. We looked at two different code examples to see what can potentially cause this error and how to resolve information technology.
Y'all tin read more about Promise.so() on MDN.
Source: https://www.pluralsight.com/guides/javascript-promise-typeerror:-cannot-read-then-of-undefined
0 Response to "+qunit Typeerror: Cannot Read Property 'config' of Undefined"
Post a Comment