如何让 JavaScript 等待 API 请求返回？

先决条件： Javascript 中的 Async/Await函数

JavaScript 是一种同步语言，即 JavaScript 一次执行一行代码。它将正在运行的事件排队并按顺序执行它们。但在某些情况下，Javascript 表现为异步，例如在AJAX或Axios调用中。它调用 API，但不等待 API 返回结果，并继续处理下一个排队事件。

JavaScript 中的 Async/Await函数将为此类 API 调用延迟程序提供帮助。 Async 和 Await函数根据 JavaScript 中的 Promise 原则执行。

• 异步：它使 javascript 执行基于 promise 的代码，就好像它们是同步的并返回一个值而不中断执行线程。如果没有返回值，它会包装 promise 并恢复正常执行。
• Await：用于等待 promise 返回。它仅在异步块内使用。

Python脚本：我们将调用托管在 localhost 上的Python API，该 API 返回一个基本语句。 API 的代码如下：

程序：

from flask import Flask, jsonify, request
from flask_cors import CORS
  
app = Flask(__name__)
CORS(app)
  
@app.route('/test', methods =['GET'])
def test():
    return jsonify({"result": "Statement 1"})
  
if __name__ == '__main__':
    app.run(debug = True)

注意：您必须安装以下软件包才能托管此 API： flask、jsonify、request、flask_cors 。只需运行Python代码即可在http://127.0.0.1:5000/上启动 API

JS 脚本：以下代码是一个 Javascript 程序，用于调用 API，无需 Async/Await函数。

程序：

function makeGetRequest(path) {
    axios.get(path).then(
        (response) => {
            var result = response.data;
            console.log('Processing Request');
            return (result);
        },
        (error) => {
            console.log(error);
        }
    );
}
function main() {
    var response = makeGetRequest('http://127.0.0.1:5000/test');
    console.log(response);
    console.log('Statement 2');
}
main();

预期输出：

获得的输出：

说明：发生这种情况是因为 JavaScript 调用了 API，使其成为一个单独的进程，然后继续进行。它找到了console.log(response);，但是响应没有签名，所以控制台显示未定义。程序进行并打印了“声明 2”。此时，API 甚至还没有到达处理语句。这就是 Javascript 表现为异步语言的地方。使用 Async/Await 函数可以解决此问题。下面给出了建立 Promise 的相应代码。

• 程序：

  function makeGetRequest(path) {
      return new Promise(function (resolve, reject) {
          axios.get(path).then(
              (response) => {
                  var result = response.data;
                  console.log('Processing Request');
                  resolve(result);
              },
                  (error) => {
                  reject(error);
              }
          );
      });
  }
    
  async function main() {
      var result = await makeGetRequest('http://127.0.0.1:5000/test');
      console.log(result.result);
      console.log('Statement 2');
  }
  main();
  

• 输出：
  

说明: async函数使函数继续在同一个线程上执行，而不会中断一个单独的事件。 await 关键字标记了程序必须等待 promise 返回的点。因此，程序等待 API 返回响应，然后继续执行程序，因此，输出是按要求的完美顺序。