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

【问题标题】：how to get data from response from fetch javascript request如何从 fetch javascript 请求的响应中获取数据
【发布时间】：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 问题。您研究了其中的哪些，为什么它们没有解决您的特定问题？

标签： javascript fetch

【解决方案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);
}

【讨论】：