无法解决客户端 JS 表单 express res.json 上的 Promise

分享于2023年02月22日 express javascript node.js 问答
【问题标题】:Not able to resolve the Promise on client side JS form express res.json无法解决客户端 JS 表单 express res.json 上的 Promise
【发布时间】:2023-02-18 23:55:41
【问题描述】:

一旦 expressjs 服务器返回 JSON 响应,我无法调试或弄清楚为什么我的请求正在记录原始 HTTP 响应,如浏览器控制台上的图像所示。让我输入所有相关代码,然后我们可以谈谈

索引.html


  
    
    
    
    Infinite Scroll
    
  
  
    

无限滚动.js

async function fetchAndAppendTestimonials(limit = 5, after = 0) {
  const testimonials = await fetch('/testimonials');
  console.log(testimonials);
}
fetchAndAppendTestimonials(5, 0);

我开始逐步添加 server.js ,这样我就可以绕过 CORS 来调用外部 API - 'https://api.frontendexpert.io/api/fe/testimonials';

服务器.js

const express = require('express');
const cors = require('cors');
const path = require('path');
const axios = require('axios');

const app = express();
const port = process.env.PORT || 80;
app.use(cors());
app.use(express.static('public'));
const API_BASE_URL = 'https://api.frontendexpert.io/api/fe/testimonials';

async function fetchTestimonials(limit = 5, after = 0) {
  const testimonialUrl = new URL(API_BASE_URL);
  testimonialUrl.searchParams.set('limit', limit);
  //   testimonialUrl.searchParams.set('after', after);
  try {
    const testimonials = await axios.get(testimonialUrl);
    // console.log(testimonials);
    return testimonials.data;
  } catch (error) {
    console.log(error);
    return error;
  }
}
app.get('/testimonials', async function (req, res) {
  const testimonials = await fetchTestimonials(5, 10);
  console.log(testimonials);
  res.json(testimonials);
});
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, '/index.html'));
});

app.listen(port, function () {
  console.log('Server is running on port', port);
});

所以在客户端控制台上,我得到了原始 HTTP 响应的日志,而不是实际的 JSON。在快速服务器功能上,我得到了准确的响应。不知道缺少什么。

  • “我无法调试”——为什么不呢?

【解决方案1】:
 const testimonials = await fetch('/testimonials');
 console.log(testimonials);

我无法调试或弄清楚为什么我的请求正在记录原始 HTTP 响应

那么,第一步是 read the documentation for fetch

返回值:解析为 Response 对象的 Promise。

fetch 返回包裹在承诺中的 Response object

您正在使用 await 展开它,然后记录 Response 对象。

它上面有各种方法(比如 the json method 等待body数据到达,并通过各种方式处理。

【讨论】: