2020年9月4日 星期五

[javascript, async, await] Promise, await and the async arrow inline anonymous listener function

github

class MyClass {

    operator(){

          this.data = null;  

    }

    // Step 1: Define the async long run task

    longRunTask(){

        return new Promise(resolve => {

              var request = new XMLHttpRequest();

            request.open('GET', url, true);

            request.responseType = 'arraybuffer';

           

            request.onload = () => {

                        // lots of callbacks and tasks

                        ...

                        resolve(this.data);

             } // end of onload

        }); // end of Promise

    } // end of method

    

    // Step 2: async await the long run task

    useData() {

        let button = document.createElement('button');

        button.innerHTML = 'LongRun';

        this.button.addEventListener('Play', async () => {

             this.data = await this.longRunTask();  // <-- wait task finished

             this.playSound(this.data);

       });


    }


} // end of class