从快递取货时获取最后一个 Object

Question

I'm sorry if this is stupid question, but I'm new to this "backend job". I have this code below, and the problem is that whenever i call the fetchSum() the data is succesfuly sent to server, but when it goes back to client it gives me this error. Unexpected token < in JSON at position 0 I googled that this happens when the data is none or not ended. The wierdest think is, that if I fetch it for second time, it returns the 1st value. On 3rd fetch return 2nd etc.

NUXT.JS

<script>
export default {
  data() {
    return {
      sumInput: '',
      regInput: 'EUNE',
      summonerSearched: '',
      loadedSummoner: ''
    };
  },
  methods: {
    async fetchSum() {
      fetch('http://localhost:3001', {
        method: 'POST',
        headers: {
          'Content-type': 'application/json; charset=UTF-8'
        },
        body: JSON.stringify({
          summoner: this.sumInput,
          region: this.regInput
        })
      });
      this.loadedSummoner = await fetch('http://localhost:3001/loadedSum', {}).then(t => t.json());
      console.log(this.loadedSummoner.summoner);
    }
  }
};
</script>

and EXPRESS

const express = require('express');
const bodyParser = require('body-parser');
const PORT = process.env.PORT || 3001;
const cors = require('cors');

const app = express();

app.use(cors());
app.use(bodyParser());

let summoner;
app.post('/', async (req, res) => {
  summoner = 
req.body;
  console.log(summoner);
});

app.get('/loadedSum', (req, res) => {
  res.json(summoner);
});

app.listen(PORT, () => {
  console.log('Server is running on port ' + PORT);
});

Answer 1

The problem is that you are not waiting on the first fetch where you submit the data. I hope that this code is just for testing as you should not share globally the data meant for request context.

async fetchSum() {
      await fetch('http://localhost:3001', {
        method: 'POST',
        headers: {
          'Content-type': 'application/json; charset=UTF-8'
        },
        body: JSON.stringify({
          summoner: this.sumInput,
          region: this.regInput
        })
      });
      const response = await fetch('http://localhost:3001/loadedSum', {});
      console.log(response.json().summoner);
    }

EDIT You are storing the request globally and this has problems when more than 1 client uses such api. Take following scenario:

1. User A calls Post and sets summoner
2. User B calls Post and sets summoner
3. User A calls Get and gets the wrong summoner because user B overwrote it at step 2

This happen when you store specific request data to global variables.