typescript axios 返回未定义的 GET 请求

GET request with axios returning undefined

提问by blazerix

I'm trying to perform a get request using the following:

我正在尝试使用以下方法执行获取请求：

router.get('/marketUpdates',((request, response) => {
  console.log("market updates");
  var data: Order[]
  axios.get('http://localhost:8082/marketUpdates')
  .then(function (response) {
    console.log("GET Response")
    console.log(response.data);
    data = response.data;
  })
  .catch(function (error) {
    console.log("Error in fetching market updates");
  });  

  console.log("Data before sending is ")
  console.log(data);
  response.send(data);
}))

However, my console.log near the bottom gets executed before the console.log in .then.

但是，靠近底部的 console.log 在 .then 中的 console.log 之前执行。

data is undefined when it is being sent. Does anyone know how I can avoid this?

数据在发送时未定义。有谁知道我如何避免这种情况？

回答by Marek Urbanowicz

1. The code is async, so all code below the request is getting executed while the request is waiting for the response. You can just move logs from bottom avoe the axios.get
2. Your data inside thenis not the same dataas you're sending... You are using function(response)instead of arrow func. (response) => {}so you're binding another this.

1. 代码是异步的，所以在请求等待响应时，请求下面的所有代码都会被执行。你可以从底部移动日志 avoe axios.get
2. 您内部的数据then与data您发送的数据不同......您正在使用function(response)而不是箭头功能。(response) => {}所以你绑定了另一个 this。

Try it this way:

试试这个方法：

router.get('/marketUpdates',((request, response) => {
  console.log("market updates");
  let data: Order[]
  console.log("Data before sending is ")
  console.log(data);
  axios.get('http://localhost:8082/marketUpdates')
  .then((getResponse) => {
    console.log("GET Response")
    console.log(getResponse.data);
    data = getResponse.data;
    response.send(data);
  })
  .catch(function (error) {
    console.log("Error while fetching market updates");
  });  
}))

回答by Johannes Klau?

Requests sent to a server are always asynchronous. That means, that the function .then()will be executed when the server responded.

发送到服务器的请求总是异步的。这意味着，该函数.then()将在服务器响应时执行。

Let me reformat your code:

让我重新格式化您的代码：

router.get('/marketUpdates',((request, response) => {
  console.log("market updates");

  var data: Order[];

  console.log("Data before sending is ")
  console.log(data);

  axios.get('http://localhost:8082/marketUpdates')
  .then((response) => {
    console.log("GET Response")
    console.log(response.data);
    data = response.data;

    response.send(data);
  })
  .catch(function (error) {
    console.log("Error in fetching market updates");
  });  
}))

With the line axios.get('http://localhost:8082/marketUpdates')you are triggering a request to the server, who will respond, but this takes time. JavaScript will not stop it's execution of the function to keep the user interface running while the program is waiting for the server to respond.

通过该行，axios.get('http://localhost:8082/marketUpdates')您正在向服务器发出请求，服务器将做出响应，但这需要时间。JavaScript 不会停止执行函数以在程序等待服务器响应时保持用户界面运行。

So .getreturns a Promise, that holds several function that get invoked in different scenarios. The function that is given as first parameter to .thenwill be invoked as soon as the server returned 200 and a response.

所以.get返回一个 Promise，它包含几个在不同场景中被调用的函数。.then一旦服务器返回 200 和响应，作为第一个参数给出的函数将被调用。

That means that your logs at the bottom of the code will be executed as soon as axios triggers the call to the server. At this point there is no data, because the server hasn't reacted yet.

这意味着一旦 axios 触发对服务器的调用，代码底部的日志就会被执行。此时没有数据，因为服务器还没有反应。