Callback, Asynch awai & Promise di ReactJs

1. //Promise digunakan unutk mengatur fungsi callback
2. 
   
3. import React, { Component } from "react";  
4. import ReactDOM from "react-dom";  
5.   
6. import "./styles.css";  
7.   
8. class App extends Component {  
9.   state = {  
10.     text: "text disini"  
11.   };  
12.   
13.   callFirstName = () => {  
14.     return new Promise(resolve => {  
15.       setTimeout(() => {  
16.         resolve("Ichwan");  
17.       }, 3000);  
18.     });  
19.   };  
20.   
21.   callMiddleName = () => {  
22.     return new Promise(resolve => {  
23.       setTimeout(() => {  
24.         resolve(" Setyawan");  
25.       }, 3000);  
26.     });  
27.   };  
28.   
29.   callLastName = () => {  
30.     return new Promise(resolve => {  
31.       setTimeout(() => {  
32.         resolve(" Rambe");  
33.       }, 3000);  
34.     });  
35.   };  
36.   
37.   login = () => {  
38.     Promise.all([  
39.       this.callFirstName(),  
40.       this.callMiddleName(),  
41.       this.callLastName()  
42.     ]).then(([result, result2, result3]) => {  
43.       this.setState({ text: result + result2 + result3 });  
44.     });  
45.   };  
46.   
47.   render() {  
48.     const login = this.login;  
49.     const text = this.state.text;  
50.   
51.     return (  
52.       <div>  
53.         <h1>Asynchorinus Await</h1>  
54.         <hr />  
55.         <button onClick={login}>LOGIN</button>  
56.         <h3>{text}</h3>  
57.       </div>  
58.     );  
59.   }  
60. }  
61.   
62. const rootElement = document.getElementById("root");  
63. ReactDOM.render(<App />, rootElement);  

Cara lain 

1. import React, { Component } from "react";  
2. import ReactDOM from "react-dom";  
3.   
4. import "./styles.css";  
5.   
6. class App extends Component {  
7.   state = {  
8.     text: "text disini"  
9.   };  
10.   
11.   
12.   
13.   callFirstName = () => {  
14.     return new Promise(resolve => {  
15.       setTimeout(() => {  
16.         resolve("Ichwan");  
17.       }, 3000);  
18.     });  
19.   };  
20.   
21.   callMiddleName = () => {  
22.     return new Promise(resolve => {  
23.       setTimeout(() => {  
24.         resolve(" Setyawan");  
25.       }, 3000);  
26.     });  
27.   };  
28.   
29.   callLastName = () => {  
30.     return new Promise(resolve => {  
31.       setTimeout(() => {  
32.         resolve(" Rambe");  
33.       }, 3000);  
34.     });  
35.   };  
36.   
37.   //mengkonsumsi promise bisa menggunakan asyn  
38.   login = async() =>{  
39.     const first = await this.callFirstName();  
40.     const middle = await this.callMiddleName();  
41.     const last = await this.callLastName();  
42.     const name = first + middle + last;  
43.     this.setState({  
44.       text: name  
45.     })  
46.   }  
47.     
48.     
49.   
50.   
51.   render() {  
52.     const login = this.login;  
53.     const text = this.state.text;  
54.   
55.     return (  
56.       <div>  
57.         <h1>Asynchorinus Await</h1>  
58.         <hr />  
59.         <button onClick={login}>LOGIN</button>  
60.         <h3>{text}</h3>  
61.       </div>  
62.     );  
63.   }  
64. }  
65.   
66. const rootElement = document.getElementById("root");  
67. ReactDOM.render(<App />, rootElement);  
68.   
69.   
70.   
71. // Memanggil dengan callback  
72. // callFirstName = (callback)=>{  
73. //   setTimeout(()=>{  
74. //     callback('Wawan');  
75. //   }, 3000)  
76. // }  
77.   
78. // callMiddleName = (callback2)=>{  
79. //   setTimeout(()=>{  
80. //     callback2('Wawan');  
81. //   }, 3000)  
82. // }  
83. // callLastName = (callback3)=>{  
84. //   setTimeout(()=>{  
85. //     callback3('Wawan');  
86. //   }, 3000)  
87. // }  
88.   
89. //mengkonsumsi promise dengan promise all  
90.   // login = () => {  
91.   //   Promise.all([  
92.   //     this.callFirstName(),  
93.   //     this.callMiddleName(),  
94.   //     this.callLastName()  
95.   //   ]).then(([result, result2, result3]) => {  
96.   //     this.setState({ text: result + result2 + result3 });  
97.   //   });  
98.   // };