Issue
Now i'm doing build a front page use ReactJS but base CDN format not base node/npm. now i want to integrate AXIOS on it but face an issue about that. All the code that i implement error.. i will share my code
this is my index.html code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Buynow Project</title>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" >
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="catalog/view/theme/default/template/account/purpletree_multivendor/buynow/App.js"></script>
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
this is my app.js code
function Product() {
axios.post('http://<domainName>.com/api/product_ec7cac9007758d89656160f668_1381')
.then(function (response) {
// handle success
console.log("result response");
console.log(response);
})
.catch(function (error) {
// handle error
console.log("result error");
console.log(error);
})
.then(function () {
console.log("last");
// always executed
});
return (
<div>
DISPLAY PRODUCT DETAIL
{/* will display detail product value */}
</div>
)
}
class App extends React.Component {
render() {
return(
<div>
<Product />
</div>
)
}
}
from this code. there are no result for the response. evendo the console.log for
console.log("result response");
console.log("result error");
console.log("last");
not display also. so i don't know what is response when run this code.
actually i also tried another code for fetch data. i will share the code
second code
const uf = await axios.post("http://<domainName>.com/api/product_ec7cac9007758d89656160f668_1381");
const response = await fetch(uf);
const data = await response.jso(response);
console.log("second code");
console.log(data);
third code
const fetchOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
}
};
const response = await fetch('http://<domainName>.com/api/product_ec7cac9007758d89656160f668_1381', fetchOptions);
console.log(response);
and both have same error result
Uncaught SyntaxError: http://localhost:81/website/App.js: await is a reserved word (36:13) (at babel.min.js:7:10099)
34 |
35 | function Product() {
> 36 | const uf = await axios.get("http://<domainName>.com/api/product_ec7cac9007758d89656160f668_1381");
| ^
37 | const response = await fetch(uf);
38 | const data = await response.jso(response);
39 |
please help. i not sure how to solve this
Solution
You can only use await, when async function is there.
async function Product() {
const uf = await axios.get("http://<domainName>.com/api/product_ec7cac9007758d89656160f668_1381");
const response = await fetch(uf);
const data = await response.jso(response);
Learn more here - https://www.w3schools.com/js/js_async.asp
Answered By - cptiwari20 Answer Checked By - Clifford M. (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.