Javascript 如何在发布到后端后获取数据？

我正在尝试将数据发布到后端，并在运行函数后检索结果。post方法可以工作，但立即调用get则不行

// Front end

import React, {Component} from 'react';
import './App.css';
import MicrolinkCard from '@microlink/react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      practiceText: "",
      description: "",
      value: "",
      image: "",
      title: "",
      desc: "",
      favi: ""
    };
  }

 grabityAPI() {
    return fetch("http://localhost:9000/grabityLink" , { method: 'GET' })
        .then(res =>  res.json())
        .then(res => this.setState({ title: res.title, image: res.image, desc: res.description, favi: res.favicon }))
  }

  callAPI() {
    fetch("http://localhost:9000/testAPI")
        .then(res => res.json())
        .then(res => this.setState({ practiceText: res }));
  }

  componentWillMount() {
    this.callAPI();
  }

  handleChange = async (e) => {
    e.preventDefault();
    this.setState({value: this.refs.value.value})
    const data = { value: this.state.value}
    const options = {
      method: 'POST',
      headers: { "Content-Type": "application/json"},
      body: 
        JSON.stringify(data),
    };
    await fetch("http://localhost:9000/grabityLink", options);  

    // The get response after the post
    const getUrl = await this.grabityAPI();
    return getUrl;
  }


  render(){

    return (
      <div className="App">
        <p className="App-intro">{this.state.practiceText}</p>
        <h2>Enter URL here to compare plugins</h2>
        <input
            type="text"
            ref="value"
            name="url"
            placeholder='Enter URL'
         />
         <button className="btn" onClick={this.handleChange}>Submit</button>
         <hr />
        <div className="Url_box">
            <div className="Url_box1">
              <h3>Microlink Plugin for URL Link Preview</h3>
              <MicrolinkCard url={this.state.value} style={{marginLeft: "10px", width: "500px"}} video size="large"/>
            </div>
            <h2 className="Url_box2">VS.</h2>
            <div className="Url_box1">
              <h3>Grabity Link Preview</h3>
              <div className="grabContainer">
              <img className="imgbox" src={this.state.image} alt="img1"/>
              <div className="descText">
                <p><b>{this.state.title}</b></p>
                <p>{this.state.desc}</p>
                <img src={this.state.favi} alt="img2"/>
              </div>
              </div>
            </div>
        </div>

      </div>
    );
  }
}

export default App;

---

我希望看到检索到的数据，但它不会记录get响应。它记录get响应的唯一方式是在componentwillmount生命周期中，但如果没有向后端发布Url，则会出现Url缺失错误。

因为后端和前端之间没有连接，所以无法确定node是否知道何时应该触发结果。也许可以用WebSocket解决方案来处理它。

正如我所见，前端除了URL之外没有问题。您正在访问此终结点，但在后端，您正在使用“”作为get和post。那么这个“/testAPI”端点将如何与后端匹配。

---

你需要像这样使用，router.post（'/testAPI'，（））

谢谢你的回复。我解决了这个问题。。。不需要get请求。在get fetch上添加到fetch的承诺被添加到post fetch，并且它起作用了。将数据变量fetch更改为this.refs.value.value后，应用程序按预期工作

路线？在前端，您可以发布到

http://localhost:9000/grabityLink

，在后端使用

/

，应该是

router.post（'/grabityLink'，…）

？这是一个节点问题。看看“节点存储”。举一个简单的例子：我使用路由器中间件路由到一个单独的位置以便于阅读。后端和前端在两个不同的主机上运行，但是在将它们代理到单个端点之后，我必须指定提取的位置。

// Backend

const express = require('express');
const router = express.Router();
const grabity = require("grabity");
const { URL } = require('url');

router.post('/', sharedHandler);
router.get('/', sharedHandler);

async function sharedHandler(req, res, next) {

  const url1 = await req.body.value;
  console.log("log1",url1);
  const it = await grabity.grabIt(url1);
  console.log(it)
  res.json(it)

}