使用 fetch 测试对 next.js 的 fastapi 响应，promise 卡在待定状态？

Question

当我在本地开发中查询 fastapi 端点时，我的提取卡在待定状态。

关注此博客和其他一些博客 - https://damaris-goebel.medium.com/promise-pending-60482132574d

使用这个获取代码（已经大大简化它只是为了让一个简单的解决方案起作用）

function fastapiRequest(path) {
    return fetch(`${path}`)
      .then((response) => {
        return response;
      }
      );

转换成常量变量，即

const xxxx = fastapiRequest(
    `http://0.0.0.0:8008/xcascasc/Dexaa/Emo.json?Magic=Dexxaa&emotion=expressions`
  );

理想情况下，我想使用 UseSWR 来执行此操作，因为我正在使用 next.js，但首先，只需要它工作:)

像这样的邮递员查询可以很好地处理 return 一个值

curl --location --request GET 'http://0.0.0.0:8008/xcaxc/dexxa/emo.json?analysis=statistical&substance=dexxa&emo=powa' \
--header 'x_token: 13wdxaxacxasdc1'

console.log

中的值是这样留下的

data show here? Promise {<pending>}

初始响应为

Response {type: 'cors', url: 'url', redirected: false, status: 200, ok: true, …}

根据回答更新。

使用每个建议的答案，我仍然没有得到适当的数据 returned。即，

function fastApiRequest(path) {
    console.log("really begins here");
    return fetch(`${path}`, { mode: 'cors' })
      .then((response) => {
        console.log('response', response);
        return response.json();
      })
      .catch((err) => {
        throw err;
      });
  }

async function test() {
    console.log('begins');

    return await fastApiRequest(
      `http://0.0.0.0:8008/xxxx/dex/adea.json?deaed=adedea&adee=deaed&adeada=adeeda`
    );
  }

  const ansa = test();

目前正在给出待处理的响应。

后端是用fastapi搭建的，有这些CORS，我想知道我是否需要给它更多的时间来获取数据？（邮递员工作正常:/)

def get_db():
    try:
        db = SessionLocal()
        yield db
    finally:
        db.close()

origins = [
    "http://moodmap.app",
    "http://localhost:3000/dashboard/MoodMap",
    "http://localhost:3000",
    "http://localhost",
    "http://localhost:8080",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
        max_age=3600,

)

我也是运行 docker 容器中的 fastapi 代码 btw

Answer 1

首先，如果响应是 json API，则需要将响应解析为 json。

function fastapiRequest(path) {
    return fetch(`${path}`)
      .then((response) => {
        return response.json();
       });
}

您需要 'await' 才能回复

you need to write the below code in an async function

const xxxx = await fastapiRequest(
    `http://0.0.0.0:8008/xcascasc/Dexaa/Emo.json?Magic=Dexxaa&emotion=expressions`
  );

当你在 javascript 中使用 fetch 发出 http 请求时，它会 return 一个 Promise，它没有卡住，只是需要重新解决，你可以像上面的代码用了async await，也可以用.then(() => { /* code... */ })函数，也可以用.catch(() => { /* handle error... */ })函数来处理错误。

Answer 2

根据Documentation

The Response object, in turn, does not directly contain the actual JSON response body but is instead a representation of the entire HTTP response. So, to extract the JSON body content from the Response object, we use the json() method, which returns a second promise that resolves with the result of parsing the response body text as JSON.

.json() 是一个异步方法（它 returns 本身就是一个 Promise），所以你必须在下一个 .then() 中分配解析的值。所以你的代码可以这样改。

function fastApiRequest(path) {
    let res;
    fetch(`${path}`)
    .then((response) => response.json())
    .then((data) => (res = data))
    .then(() => console.log(res));
    
    return res;
}

response =  fastApiRequest('https://proton.api.atomicassets.io/atomicassets/v1/accounts?limit=10');
console.log('response')

如果你想使用async/await方法，下面是代码。

async function fastApiRequest(path) {
  try {
    const response = await fetch(path);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

async function test() {
  console.log(await fastApiRequest('https://proton.api.atomicassets.io/atomicassets/v1/accounts?limit=10'))
}
test()

Answer 3

在您的 curl 中，您使用 x_token 作为 header 变量，如果需要，您也需要在路径中传递 header。所有其他答案也有效。

使用 fetch 测试对 next.js 的 fastapi 响应，promise 卡在待定状态？

testing fastapi response to next.js with fetch, promise stuck in pending?

javascript

reactjs

next.js

fetch

根据回答更新。