Vue如何获取Axios事务的结果从服务器传输到客户端？答案

【问题标题】：How do I get the results of the Axios transaction to transfer from the server to the client with Vue?Vue如何获取Axios事务的结果从服务器传输到客户端？
【发布时间】：2020-06-17 06:16:38
【问题描述】：

我正在 MEVN 堆栈上构建一个应用程序。一切都运行良好，除了付款完成后，我获得反馈的唯一方法就是刷新页面。

服务器端显示交易结果：（即Insufficient Funds）

我在客户端得到的只是“200 - 成功”

我是 Axios 的新手，我知道这一定是一个非常愚蠢的疏忽。

客户端 Vue

runSelectedPmts() {
    if (this.selected.length > 0) {
      for (let i = 0; i < this.selected.length; i++) {
        let pId = this.selected[i].pId;
        let date = this.selected[i].paymentDate.split("T")[0];
        axios
          .get(`http://localhost:${this.port}/api/v1/gateway/${pId}/${date}`, {
            //
          })
          .then(function(response) {
            console.log(response);
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    } else {
      alert("No Payments Selected");
    }
  }

服务器端

app.get(`/api/v1/gateway/:pId/:date`, (req, res) => {
    var date = req.params.date;
    var pId = req.params.pId;
    let queryBuilder = mySqlToRedPayments(pId, date);
    var query = db.query(queryBuilder, (err, results) => {
      if (err) {
        console.log(err);
      } else if (results == 0) {
        res.send(`No Results\n ${results} \n - ${err}`);
        return;
      }
      res.send(results);
      var i = 0;
      var paymentInformation = results;
      var pid = paymentInformation[0].orderid;
      var filenumber = paymentInformation[0].ponumber;
      var fullname = paymentInformation[0].first_name
        .concat(" ")
        .concat(paymentInformation[0].last_name);
      axios
        .post(
          `https://special-gateway.com/api/transact.php?type=sale&security_key=${my_key}&ccnumber=${results[i].ccnumber}&ccexp=${results[i].ccexp}&cvv=${results[i].cvv}&amount=${results[i].amount}&currency=USD&payment=creditcard&orderid=${results[i].orderid}&shipping=0.00&ponumber=${results[i].ponumber}&first_name=${results[i].first_name}&last_name=${results[i].last_name}&address1=${results[i].address1}&city=${results[i].city}&state=${results[i].state}&zip=${results[i].zip}`
        )
        .then((res) => {
          var [
            response,
            responsetext,
            authcode,
            transactionid,
            avsresponse,
            cvvresponse,
            orderid,
            type,
            response_code
          ] = res.data.split("&");
          var responseNum = response.split("=")[1];
          var responseText = responsetext.split("=")[1];
          var authCode = authcode.split("=")[1];
          var transactionId = transactionid.split("=")[1];
          var addressVer = avsresponse.split("=")[1];
          var cvvResponse = cvvresponse.split("=")[1];
          var orderId = orderid.split("=")[1];
          var txType = type.split("=")[1];
          var responseCode = response_code.split("=")[1];
          let transactionResult = `${checkTransaction(responseCode)}
            \nAddress: ${checkAVS(addressVer)}
            \nCVV: ${checkCVV(cvvResponse)}`;
          let txResult = checkTransaction(responseCode);
          if (responseCode == 100) {
            console.log(
              `CLEARED - filenumber: ${filenumber} - fullname: ${fullname} - authCode: ${authCode}`
            );
          } else if (responseCode > 100 && responseCode < 462) {
            console.log(
              `DECLINED - filenumber: ${filenumber} - fullname: ${fullname}`
            );
          }
          var notationToLog = `${transactionResult}\nFull Name: ${fullname}\nFile Number: ${filenumber}\nPayment ID: ${pid} | \n${
            results[i].ccnumber
          } - EXP: ${results[i].ccexp} - CVV: ${
            results[i].cvv
          }\nTransaction Amount: $${results[i].amount.toFixed(
            2
          )} - Auth ${authCode}`;
          if (responseCode == 100) {
            insertTransaction(pid);
          } else {
            insertNotation(filenumber, notationToLog);
          }
        })
        .catch((err) => console.error(err));
    });
  });

【问题讨论】：

您的服务器端以res.send(results) 响应（我个人会使用res.json(results)），因此响应将在response.data 客户端
@Phil 这是否意味着使用 res.send(results) 不提供数据？在发布此之前，我将不得不重构我删除的大量其他代码，因为它不太相关。我愿意这样做，但前提是它确实能解决问题。我正在尝试发布 MVP，但我已经卡在这里一段时间了。
我不太明白你在问什么。您可以使用 res.send() / res.json() / 等获取服务器端代码以响应 something 的请求（请参阅上面的链接文档）。它的反应取决于你。当 Axios 收到此响应时，它会将其放入 data 属性中，例如 axios.get(url).then(response => console.log(response.data))。同样，您如何处理该响应数据取决于您

标签： mongodb express axios

【解决方案1】：

问题是我有 axios 和 express 争夺 res 和 express 正在获胜。我只需要在 axios 中将 res.send 更改为 gatewayResults.send 就可以了。

【讨论】：