Javascript 异步/等待函数和返回值

从最高层来看，我试图将一个Blob传递给一个函数，该函数将转录数据并返回转录本。我正在努力使流程的异步部分正确对齐。如有任何见解，将不胜感激

下面是我正在处理的两个文件。在record.jsx文件中，我调用googleTranscribe函数（位于第二个文件中）进行转录工作，并希望返回转录本。这就是我遇到的问题所在——我可以获取成绩单，但不能将其作为值返回。我知道我在使用async/await/Promissions时犯了一些错误，我只是不太明白我做错了什么

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;

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;

---

问题在第二个文件中。与Axios的连线应进行如下修改：

返回axios（配置）
.然后（功能（res）{
console.log（'AXIOS success'）；
控制台日志（res）；
返回res.data；
})
...

---

axios调用在内部返回该值，但您从未从googletranscribe返回该值。问题在第二个文件中。与Axios的连线应进行如下修改：

返回axios（配置）
.然后（功能（res）{
console.log（'AXIOS success'）；
控制台日志（res）；
返回res.data；
})
...

---

axios调用在内部返回该值，但您永远不会从googletranscribe返回该值

---

async关键字将方法转换为async方法，这允许您在其主体中使用await关键字。当应用wait关键字时，它将暂停调用方法并将控制权返回给调用方，直到等待的任务完成。获取更多信息的最佳位置是

让我为您提供一些有关async Wait的上下文

---

async关键字将方法转换为async方法，这允许您在其主体中使用await关键字。当应用wait关键字时，它将暂停调用方法并将控制权返回给调用方，直到等待的任务完成。获取更多信息的最佳位置是

可能是一个dup of。您没有使用

await

而不是

。然后（）

，尽管尝试使用

async

/

await

。因此，您的

返回

不起作用。您应该

返回axios（配置）。然后…

，它返回承诺。可能是一个副本。您没有使用

等待

而不是

。然后（）

，尽管尝试使用

异步

/

等待

。因此，您的

返回

无效。您应该

返回axios（配置）。然后…

，它将返回承诺。很好，感谢上下文；对我来说，这无疑增加了清晰度。很好，谢谢你的背景；对我来说，这无疑增加了清晰度。这可能会有所帮助。但是请记住，为了“获取”返回值

res

，您需要等待异步函数

googleTranscribe（）

解析，如：

googleTranscribe（audioBlob）。这可能会有所帮助。但是请记住，为了“获取”返回值
res
，您需要等待异步函数
googleTranscribe（）
解析，如：
googleTranscribe（audioBlob）。