使用 Django rest 框架获取请求不返回数据答案

【问题标题】：fetch request using Django rest framework doesn't return data使用 Django rest 框架获取请求不返回数据
【发布时间】：2018-12-18 21:36:17
【问题描述】：

我已经设置了一个带有 React/Redux 前端的 Django 应用程序。我已经使用 Django Rest Framework 设置了一个简单的 API，并确认在 Django 开发服务器运行时，cURL 请求会从 mySQL 数据库返回有效数据。

但是，当我在网页中使用 fetch 请求时，没有数据返回到 JavaScript 代码。

这是我的 JavaScript：

let headers = { 'Content-Type': 'application/json' };
return fetch('/api/lists/', { headers, })
    .then(res => {
        console.log('res ', res);
});

这是控制台运行时打印的内容：

Response {type: "basic", url: "http://127.0.0.1:8000/api/lists/", redirected: false, status: 200, ok: true, …}
body
:
(...)
bodyUsed
:
false
headers
:
Headers {}
ok
:
true
redirected
:
false
status
:
200
statusText
:
"OK"
type
:
"basic"
url
:
"http://127.0.0.1:8000/api/lists/"
__proto__
:
Response

显然不一样的反应！

我已选择浏览器在“网络”选项卡中发送的请求，并选择“复制”>“复制为 cURL”：

curl 'http://127.0.0.1:8000/api/lists/' -H 'Accept-Encoding: gzip, deflate, br' -H 'Accept-Language: en-GB,en-US;q=0.9,en;q=0.8' -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36' -H 'Content-Type: application/json' -H 'Accept: */*' -H 'Referer: http://127.0.0.1:8000/' -H 'Connection: keep-alive' --compressed

如果我将它粘贴到终端窗口并运行它，我会收到 JSON 响应：

[{"id":1,"title":"My first list","description":"A list is useful","is_public":false}]

所以我认为一切都在服务器端工作，我一定是在客户端网页上做错了。

我在端口 8000 上运行 Django 开发服务器，这是发出请求时它记录的内容：

"GET /api/lists/ HTTP/1.1" 200 85

无论我是从客户端发送请求还是使用 cURL，它都会记录完全相同的输出。

所以，我很困惑。服务器认为它正在接收相同的请求。如果我将浏览器的请求复制为 cURL 并在终端中运行它，我会得到一个有效的 JSON 响应。但是客户端在响应中没有看到 JSON。

非常感谢任何想法！

【问题讨论】：

试试console.log(res.json())
res.json() 打印： Promise {: Array(1)} proto : Promise [[PromiseStatus]] : "resolved" [[PromiseValue]] : Array(1) 0 : {id: 1, title: "我的第一个列表", description: "一个列表很有用", is_public: false} length : 1 proto : Array(0)

标签： django api

【解决方案1】：

正文中的(...) 可在 chrome 控制台中单击。你的身体数据可能在那里。

【讨论】：

【解决方案2】：

非常感谢 Sergey Pugach 为我指明了正确的方向。我需要做一个额外的步骤来从响应中获取数据：

let headers = { 'Content-Type': 'application/json' };
return fetch('/api/lists/', { headers, })
    .then(res => res.json())
    .then(data => {
        console.log(data);
        // do something with data
    });

请注意，响应的形式会因您用于发送请求的库而异。例如 Django Rest Framework 需要与 Axios 不同的处理方式。

【讨论】：