如何从 fetch 函数中返回对象？ [复制]答案

【问题标题】：How to return object from fetch function? [duplicate]如何从 fetch 函数中返回对象？ [复制]
【发布时间】：2020-07-08 23:51:45
【问题描述】：

我想创建一个外部函数来获取数据并返回结果。
但我不能让它工作，这是我的功能：

// Request.js:

import React from 'react'

import { authHeader } from "../../jwt/_helpers/auth-header";
import { handleResponse } from "../../jwt/_helpers/handle-response";

export default function Request(method,request) {
   const requestOptions = {
        method: method,
        withCrendtials: true,
        headers: authHeader(),
   };
   fetch(process.env.REACT_APP_API + request, requestOptions)
        .then(handleResponse)
        .then(
            (result) => {
                console.log(result); // This returns an object
                return result // This returns undefined
            },
            (error) => {
                return error
            }
        );
}

然后我就这样使用它：

// Main.js:

import Request from './Request';

let obj = Requete("GET", "/myPath/myQuery");
this.setState({foo: obj.items});

在我的 Request.js 文件中，我记录了结果并获得了正确的对象，然后我返回它并在我的 Main.js 中获得了该函数的未定义值。

如果我将代码从 Request.js 复制到 Main.js 中，它可以正常工作...
但是我的代码变得不可读，每个获取查询需要将近 20 行...
有什么想法吗？

【问题讨论】：

return result 不会“返回未定义”。 obj.items 未定义，因为 obj 是未解析的 Promise 实例。
您能否在代码示例标签中添加您的代码
问题是你的Request 函数没有返回任何东西。 then 回调可以很好地返回对象 - 但只会导致 promise 得到解决。

标签： javascript node.js reactjs fetch

【解决方案1】：

尝试从导出的函数中返回 fetch，并在 main.js 中使用 .then 等待结果，然后在 setState 中使用它：

export default function Request(method, request) {
  const requestOptions = {
    method: method,
    withCrendtials: true,
    headers: authHeader(),
  };
  return fetch(process.env.REACT_APP_API + request, requestOptions)
    .then(handleResponse)
    .then(
      (result) => {
        console.log(result); // This returns an object
        return result; // This returns undefined
      },
      (error) => {
        return error;
      }
    );
}

// Main.js:
import Request from './Request';

Request("GET", "/myPath/myQuery").then(obj => {
  this.setState({foo: obj.items});
})

解释是导出函数“Request”在获取完成之前返回，但它没有返回任何内容（undefined），因为没有返回语句。添加 return 语句使它返回一些东西：第二个返回的承诺然后附加到初始提取。在 main.js 中，我们用一个函数调用这个 Promise 的 .then 方法，当后者解析时，这个函数被赋予这个 Promise 的结果（obj）。然后它可以用它做它喜欢的事情。（您可以认为 .then 函数的主体存在于比周围代码晚的时间范围内，并且在 fetch 完成之后）。

【讨论】：