如何从 fetch javascript 请求的响应中获取数据

Posted 2023-02-19

【中文标题】如何从 fetch javascript 请求的响应中获取数据

【英文标题】：how to get data from response from fetch javascript request

【发布时间】：2022-01-22 21:12:58

【问题描述】：

我在 javascript 中发出 fetch 请求。当我为控制台播种时，它正在获取数据，它会向我显示数据。但当 我尝试在然后功能中提醒它它显示为空。它会在页面加载时及时显示警报。我认为它会在请求响应之前发出警报

这是我的 javascript 代码

fetch("https://01b4e41e6262.ngrok.io/api/get_schedule_orders/" + gUser.getData().id).then(res => 
        if (res.ok) 
        alert(res)
        
    );

【问题讨论】：

您应该转换为 res.json 或 res.text 以从响应中获取内容。

这能回答你的问题吗？ How do I return the response from an asynchronous call?

这能回答你的问题吗？ Pure Javascript fetch() method to java Servlet, how do i get and pass data?

在fetch 的回复中有很多很多关于如何访问数据的 Stack Overflow 问题。您研究了其中的哪些，为什么它们没有解决您的特定问题？

【参考方案1】：

fetch() 最初返回 Promise，因此 res 最初是一个承诺，要么已解决，要么已被拒绝。 然后res.json() 再次返回一个promise 而不是直接返回值（您可以通过在第一个then() 中执行console.log(res) 来验证这一点，在原型中您将看到json()，它再次基于Promise。

这就是为什么我们通过 return res.json() 链接承诺并在第二个承诺解析中获取我们的数据，并在被拒绝的情况下调用 catch() 回调。

fetch("https://01b4e41e6262.ngrok.io/api/get_schedule_orders/" + gUser.getData().id).then(res => 
    if (res.status>=200 && res.status <300) 
      return res.json()
    else
      throw new Error();
    
).then(data=>console.log(data))
 .catch(err=>console.log('fetch() failed'))

更新：您的 API 返回一个空数组。

请检查 API 参数。

【讨论】：

@Bilal arshad：上面的代码也可以处理您的错误，并且在所有情况下都能很好地工作。一定要评价接受答案。谢谢 :) 上帝保佑编码快乐

我正在尝试这个但不工作fetch("https://01b4e41e6262.ngrok.io/api/get_schedule_orders/" + gUser.getData().id).then(res => if (res.status===200) return res.json(); ).then(data=> $scope.schedule_orders = data.data; alert(JSON.stringify(data.json())) );

检查 API 是否工作正常。在你的 catch() 块中尝试 console.log()。同时我会看看问题可能出在哪里:)

我检查过了，你的 API 实际上返回了一个空数组。代码一切正常。

在预览部分我看到0: id: 10, devy_user_id: 129731,… created_at: null data: ""paymethod_id":1,"business_id":76,"delivery_type":"1","driver_tip":0,"delivery_zone_id":6569,"delivery_datetime":null,"location":RPM\",\"tag\":\"home\""" devy_user_id: 129731 id: 10 schedule_date: "2020-12-12 21:06:00" updated_at: null

【参考方案2】：

Fetch API 启动由两个 Promises 组成的链。

第一个承诺从服务器检索数据 第二个 promise 解析检索到的数据（使用 .text()、.json() 等）

示例（使用async / await 语法）：

const getScheduleOrders = async (gUser) => 

  const response = await fetch('https://01b4e41e6262.ngrok.io/api/get_schedule_orders/' + gUser.getData().id);
  const scheduleOrder = await response.text();
  await window.alert(scheduleOrder);