在我的代码中创建为 javascript 模块时从 fetch 获取数据响应

Question

我已经尝试了几天，作为模块创建的函数可以 return 数据。

我使用 flask，在一个页面中我正在 header 中加载模块。

<script src="{{url_for('static', filename = 'js/modules.js')}}"></script>

在我第一次尝试 modules.js 文件时，我有这个功能：

function send_to_backend_old(data){

let coucou = fetch('/toronto', {
    method: 'post',
    headers: {
      'Accept': 'application/json, text/plain, */*',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  }).then(function(response) {
    response.json().then(function(data_received) {

        return data_received;
        
    }).then((data_received)=>{
        return data_received;
    })

});

return coucou

在 javascript 部分的 html 页面中，当我调用该函数时，此数据未到达。

<button type="button" class="btn btn-primary btn-sm" onclick="pruebas_fetch_to_backend();">fetch módulo</button>


function pruebas_fetch_to_backend(){


        let datos_json = {};
        datos_json.url_api = '/toronto'
        datos_json.test1 = 'valor1'
        datos_json.test2 = 'valor2'



        
        console.log("---------------------------------------------")
        riri = send_to_backend(datos_json)
        console.log("valor de riri: "+JSON.stringify(riri))
        console.log("---------------------------------------------")

    }

其他测试如下：

async function send_to_backend(data) {
    let apiResponse = await fetch("/toronto", {
        method: 'post',
        headers: {
          'Accept': 'application/json, text/plain, */*',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      });
    let response = apiResponse.json();
    // Since we waited for our API to respond using await
    // The response variable will return the response from the API
    // And not a promise.
    console.log(response);
    return  Promise.all(response);
}

在html页面的javascript代码中调用函数时如何得到响应？

Answer 1

fetch(...) 和 .json() 等函数是异步函数。这些 return 一个 Promise 类型的对象。这意味着函数的结果不会立即 returned。
使用 await 可以等待最终结果，然后可以使用。使用 await 关键字的函数必须定义为异步的。

async function sendFetchRequest() {
  const data = await fetchJSONData({
    test1: 'value1',
    test2: 'value2'
  });
  console.log(data);
}

但是，作为 await 的替代方法，回调函数也可以传递给 .then(...) 调用。那么一个同步函数也可以用来调用一个异步函数。
在这种情况下，同步函数 return 是一个 Promise 对象，该对象由异步获取调用的回调产生。然后在上述函数中等待 returned 对象，并在获得最终结果后转储。

function fetchJSONData(data) {
  return fetch('/echo', {
    method: 'post',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  }).then(resp => {
    return resp.ok && resp.json()
  });
}

为了捕获错误，可以选择使用 try-catch 块，以及在 .catch(...).

中使用回调

所以一个简单的例子看起来像这样。

JS (static/js/module.js)

function fetchJSONData(data) {
  return fetch('/echo', {
    method: 'post',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  }).then(resp => {
    return resp.ok && resp.json()
  });
}

HTML (templates/index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Index</title>
    <script src="{{url_for('static', filename='js/module.js')}}"></script>
  </head>
  <body>
    <button type="button" onclick="sendFetchRequest()">Click me!</button>
    <script type="text/javascript">
      async function sendFetchRequest() {
        const data = await fetchJSONData({
          test1: 'value1',
          test2: 'value2'
        });
        console.log(data);
      }
    </script>
  </body>
</html>

烧瓶 (app.py)

from flask import (
    Flask,
    jsonify,
    render_template,
    request,
)

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.post('/echo')
def echo():
    return jsonify(request.json)

在我的代码中创建为 javascript 模块时从 fetch 获取数据响应

Get data response from fetch when is created as javascript module in my code

javascript

fetch

flask

JS (static/js/module.js)

HTML (templates/index.html)

烧瓶 (app.py)