当我的代码中创建为JavaScript模块时，从获取中获取数据响应

发布于 2025-02-01 03:51:47 字数 1946 浏览 3 评论 0原文

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

我使用烧瓶，在页面中，我将模块加载到标题中。

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

在我在模块文件中的第一次尝试中，我具有此函数：

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代码调用函数时，如何获得响应？

原文

I have been trying for a days that a function created as a module can return the data.

I use flask and in a page I am loading the module in the header.

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

In my first attempt in the modules.js file I have this function:

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

In the html page within the javascript part when I call the function this data does not arrive.

<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("---------------------------------------------")

    }

the other test is as follows:

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);
}

How can I get the response when I call the function from the javascript code in the html page?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巡山小妖精 2025-02-08 03:51:47

fetch（...）和.json（）之类的功能是异步函数。这些返回一个类型承诺的对象。这意味着该功能的结果未立即返回。
使用等待可以等待最终结果，然后可以使用。使用等待关键字的函数必须定义为异步。

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

但是，作为等待的替代方案，回调函数也可以传递给。然后（...）调用。然后，同步函数也可以用于调用异步函数。
在这种情况下，同步函数返回Promise对象是由异步提取调用的回调产生的。然后在上述功能中等待返回的对象，并在获得最终结果后倾倒。

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（模板/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)

Functions like fetch(...) and .json() are asynchronous functions. These return an object of type Promise. This means that the result of the function is not returned immediately.
With await the final result can be awaited and can then be used. Functions that use the await keyword must be defined as asynchronous.

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

As an alternative to await, however, a callback function can also be passed to a .then(...) call. Then a synchronous function can also be used to call an asynchronous function.
In this case, a synchronous function returns a Promise object resulting from the callback of the asynchronous fetch call. The returned object is then awaited in the above function and dumped after getting the final result.

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()
  });
}

In order to catch an error, there is the option of using a try-catch block, as well as the use of a callback within .catch(...).

So a simple example would look like this.

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>

Flask (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)

回复收藏 0 原文

~没有更多了~