async / await function and return value

Question

From the highest level, I'm trying to pass a Blob to a function that will transcribe the data and return the transcript. I'm struggling to get the async parts of the process lined up correctly. Any insight would be appreciated.

The two files I'm working with are below. In the record.jsx file, I'm calling the googleTranscribe function ( that is located in the second file ) to do the transcription work and hopefully return the transcript. This is where I'm running into the problem - I can get the transcript but cannot return it as a value. I know I'm doing something wrong with async / await / promises, I just can't quite figure out what I'm doing wrong.

record.jsx

import React from "react";
import googleTranscribe from '../../functions/googletranscribe.js';
const audioType = 'audio/wav';

class Record extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recording: false,
      audioUrl: '',
      audios: [],
    };
  }

   componentDidMount() {

    const player = document.getElementById('player');
    const stopButton = document.getElementById('stop');
    const startButton = document.getElementById('start');

    const initalizeRecorder = function(stream) {

      if (window.URL) {
        player.srcObject = stream;
      } else {
        player.src = stream;
      }

      const options = {mimeType: 'audio/webm'};
      let recordedChunks = [];
      const mediaRecorder = new MediaRecorder(stream, options);

      mediaRecorder.addEventListener('dataavailable', function(e) {
        if (e.data.size > 0) {
          recordedChunks.push(e.data);
        }
      });

      mediaRecorder.addEventListener('stop', function() {
        const audioData = recordedChunks;

        // convert saved chunks to blob
        const blob = new Blob(audioData, {type: audioType});

        // generate video url from blob
        const audioUrl = window.URL.createObjectURL(blob);
        
        googleTranscribe(blob)
          .then((response) => {
            console.log('transcript: ' + response);
          }).catch((error) => {
            console.log('error: ' + error);
          });

      });

      startButton.addEventListener('click', function() {
        mediaRecorder.start(1000);
      });

      stopButton.addEventListener('click', function() {
        mediaRecorder.stop();
      });

    };

    navigator.mediaDevices.getUserMedia({ audio: true, video: false })
      .then(initalizeRecorder);
  
  render() {
    
    return (
      <section>
        <button id="start">Record</button>
        <button id='stop'>Stop</button>
      </section>
    );
  }
}

export default Record;

googletranscribe.jsx

import axios from 'axios';

const googleTranscribe = async (audioBlob) => {

  const apiUrl = "http://localhost:8080/api/google-transcribe";
  
  const url = encodeURI(apiUrl); 

  // Send blob to the server
  const formData = new FormData();
  formData.append('file', audioBlob, 'blobby.wav');
  
  var config = {
    method: 'post',
    url: url,
    headers: { "Content-Type": "multipart/form-data" },
    data : formData,
  };

  axios(config)
  .then(function (res) {
    console.log('AXIOS success');
    console.log(res);
    return res.data;
  })
  .catch(function (err) {
    console.log('AXIOS error');
    console.log(err.message);
    return 'AXIOS we found an error';
  });

}

export default googleTranscribe;

Answer 1

The problem is in the second file. The line with your Axios should be modified as such:

return axios(config)
  .then(function (res) {
    console.log('AXIOS success');
    console.log(res);
    return res.data;
  })
...

The axios call internally returns the value, but you never return it from googletranscribe

Answer 2

Let me get you some context on async-await The async keyword turns a method into an async method, which allows you to use the await keyword in its body. When the await keyword is applied, it suspends the calling method and yields control back to its caller until the awaited task is complete. The best place for more information would be Here