新的后端 - .json 格式化数据

Question

大家好，我已经编码一年多了，几乎完全专注于前端（js、BUNCHA 框架、CSS、html 等）

直到昨天，我才遇到了 Spotify API 的臭名昭著的 CORS 问题。

虽然我已经完成了一门 udemy 课程，该课程教会了我大量的 node.js/express，但直到前几天我真的不明白如何将它们与前端（反应）结合起来。我开始练习 在去 spotify 之前从 pokemon API 获取数据只是因为它更容易做（大声笑）......但我也知道我可以使用 express 为 spotify 应用程序启用 cors 等。除此之外，我的问题本质上是关于使用简单的 .json() 方法将数据解析为 json。

如何在我的后端（我获取结果的地方）我必须使用 data.json()，然后我必须再次完成这一切？为什么我还必须在两个迭代中重新实现异步/等待的东西，而这一切都应该在初始 fetchdata 函数中完成？

这是我的 fetchData.js 文件 ---- 我最初调用 API 的地方

import fetch from "node-fetch"

const fetchData=async()=>{
  const data=await fetch('https://pokeapi.co/api/v2/ability')
  const res=await data.json()
  const final=res.results
  return res.results
}


export default fetchData

这是我的 server.js 文件，当我的客户端从路径“/api/data”请求某些内容时，我调用该函数并发送数据

import express from 'express';
const app=express()
import axios from 'axios'
import cors from 'cors'
import fetchData from './fetchData.js'

app.use(cors())

app.get('/api/data', async (req, res)=>{
  const data=await fetchData()
  res.send(data)
})

app.listen(3000, ()=>{
  console.log('listening on port 3000')
})

最后这是我的反应组件，它使用检索（）函数调用该路径......当数据似乎已经被解析时，我为什么必须继续重复异步等待逻辑和 .json（）调用准备好进入 fetchData() 函数了吗？

import React, {useState, useEffect} from 'react'


const Customers = () => {
  const [pokemon, setPokemon]=useState([])
  useEffect(()=>{
    const retrieval=async()=>{
      const data=await fetch('api/data')
      const res=await data.json()
      setPokemon(res)
    }
    retrieval()
    console.log(pokemon)
  },[])


  return (
    <div>
    <ul>{pokemon.map(poke=>(
        <li>{poke.name}</li>
    ))}</ul>
    </div>
  )
}

我想如果有人可以用外行的话来引导我完成整个过程。我在前端、ui 和 react 等方面相当不错。但是连接后端对我来说是全新的，而且 json.stringify()、json.parse() 和 .json() 的东西总是让我感到困惑......我通常只是猜测直到它起作用哈哈。提前谢谢...

Answer 1

您每次都需要调用.json() 的原因是因为您实际上是在进行两次 API 调用。

第一个调用是在 fetchData() 函数中，您正在调用 Pokemon API。

第二个调用是在您的 retrieval() 函数中，您实际上是在其中调用自己的 API。

这是标准的行业惯例，始终建议通过自定义 API 端点从前端调用外部 API，而不是直接从前端调用外部 API。

附带说明一下，您可以轻松地使用您似乎已经导入的axios，以使代码更简洁。

fetchData.js

import axios from 'axios';

const fetchData = async () => {
    const response = await axios.get('https://pokeapi.co/api/v2/ability');
    return response.data;
};


export default fetchData;

server.js

import express from 'express';
const app = express();
import cors from 'cors';

import fetchData from './fetchData.js';

app.use(cors());

app.get('/api/data', async (req, res) => {
    const data = await fetchData();
    return res.send(data);
});

app.listen(3000, () => {
    console.log('listening on port 3000');
});

page.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Customers = () => {
    const [pokemon, setPokemon] = useState([]);
    useEffect(() => {
        const retrieval = async () => {
            const response = await axios.get('http://localhost:3000/api/data');
            setPokemon(response.data);
        };
        retrieval();
        console.log(pokemon);
    }, []);
    
    return (
        <div>
            <ul>{pokemon.map(poke => (
                <li>{poke.name}</li>
            ))}</ul>
        </div>
    );
};