正在尝试使用 Fetch 在 JavaScript 中记录来自 REST API 的 JSON 响应

Question

我有一个我放在一起的小脚本。该脚本执行以下操作：

• 在数组中定义多个变量

• 将这些值传递给 API

• API 应该 return 访问令牌

   const fetch = require('node-fetch');
   var orgInfo = {
               client_id: 'idgoeshere', 
               client_secret: 'secretgoeshere', 
               username: 'usernamegoeshere', 
               password: 'passwordgoeshere', 
               grant_type: 'granttypegoeshere'
           };
  
   fetch('https://urlgoeshere', {
       method: "GET",
       body: JSON.stringify(orgInfo),
       headers: {
       "Content-Type": "application/json"
   },
  
   credentials: "include"
  
   }).then(function(response) {
  
   response.access_token
   response.bearer
   response.expires_in
   response.scope
  
   return repsonse.text()
  
   }, function(error) {
       error.message
   })
  
   console.log(orgInfo);
   console.log(response.access_token);
  

当我登录 orgInfo 时，我得到以下输出：

{ client_id: 'idgoeshere',
  client_secret: 'secretgoeshere',
  username: 'usernamegoeshere',
  password: 'passwordgoeshere',
  grant_type: 'granttypegoeshere' }

当我尝试记录 response.access_token 时，我收到 ReferenceError: response is not defined

我的问题是：

• 是否需要定义响应？很明显，我被骂是因为不是。
• 有没有办法查看我是否自动从 API 取回任何东西？

我不是在找人用勺子喂我一个答案，而是我只是在寻找正确方向的推动力。那将是一流的。

谢谢

更新

这就是我所拥有的：

const fetch = require('node-fetch');

const orgInfo = {
client_id: ' ', 
client_secret: ' ', 
username: ' ', 
password: ' ', 
grant_type: ' '
};

(async() => {

const response =  await fetch('https:// ', {
    method: "GET",
    body: JSON.stringify(orgInfo),
    headers: {
        "Content-Type": "application/json"
    }
});

const data = await response.json();
console.log(data)
})

当 运行 但 return 数据

的值时 return 没有错误

Answer 1

const fetch = require('node-fetch');
var orgInfo = {
             client_id: 'idgoeshere', 
             client_secret: 'secretgoeshere', 
             username: 'usernamegoeshere', 
             password: 'passwordgoeshere', 
             grant_type: 'granttypegoeshere'
};

fetch('https://urlgoeshere', {
     method: "GET",
     body: JSON.stringify(orgInfo),
     headers: {
          "Content-Type": "application/json"
     },
     credentials: "include"
}).then(function(response) {

     response.access_token
     response.bearer
     response.expires_in
     response.scope

     console.log(response.access_token);

     return repsonse.text()

 }, function(error) {
     error.message
 })

 console.log(orgInfo);

response ins 作用域在 then 方法调用的函数内部，因此只能在此函数内部访问它

Answer 2

fetch return 一个 Promise 对象。

A Promise 表示异步操作的最终 完成（或失败）及其结果值。这意味着 response.access_token 只保证在 .then 块内有一个值（如果有的话），因为 response 只在承诺 fulfilled[=67= 时才被评估].

你在控制台中什么也得不到的原因是你试图访问 access_token 但不能保证它有一个值（因此 console.log 什么都不输出 - 没有任何输出).

---

要解决此问题，您需要访问 access_token 属性 以确保您有回复。

那是在兑现承诺之后，所以：

1. 将 console.log(response.access_token); 移到 .then 子句中

或者更简洁、更现代的解决方案是：

2. 使用await（等效语法糖）

---

N.B。 Response 对象是 整个 HTTP 响应的表示。

您正在使用 response.text()，它将响应主体解析为 字符串 ，而不是具有属性 JS 对象 .

我假设您想将 Response 对象的正文内容作为 JSON 解析为 JS 对象。在这种情况下，使用 json() 方法，然后 return 第二个承诺使用从响应主体的解析中获得的 JavaScript 对象解析。

结果应该有你想要的 access_token 属性（考虑到 API 端点 return）。

这应该有效：

const response =  await fetch('https://urlgoeshere', {
     method: "GET",
     body: JSON.stringify(orgInfo),
     headers: {
     "Content-Type": "application/json"
 };

const data = await response.json();

console.log(data.access_token);
console.log(data.bearer);
console.log(data.expires_in);
console.log(data.scope);
...

Answer 3

return repsonse.text() 应该是----> return response.text()

根据Fetch Documentation

• "Fetch的Response接口API表示对a的响应 要求。您 可以 使用 Response.Response() 构造函数创建一个新的 Response 对象，但是您更有可能遇到正在 returned 的 Response 对象作为另一个 API 操作的结果——例如， service worker Fetchevent.respondWith、 或简单的 fetch()。

对于您的问题“有没有办法查看我是否自动从 API 取回任何东西？”

• 您可以尝试使用 console.log(response.status);，这将为您提供请求的状态代码。这些代码可以在 HERE. And an example of this being used HERE.

  中找到

• 我强烈建议您尝试使用 Postman 或 Thunder-client，如果可以的话，这会简化所有这些，并为您提供您需要了解的有关响应的所有信息。测试 API 调用并准确了解发生了什么非常有用。您还可以自动查看以其他语言编写的通话。