标签: fetch-api

我正在使用 fetchApi 从我的 API 获取数据。在我的 RequestHelpers.js 中，我执行以下代码

module.exports = {
    fetchQuizCollection(){
      return fetch(HOST+API_KEY)
        .then((response) => response.json())
        .then((responseData) => {
          let gameData = responseData
          console.log(responseData) //It work
          return responseData
        })
      .done();
    }
}

我在另一个文件中调用该函数，但无法获取我的responseData

    let sampleQuiz = RequestHelpers.fetchQuizCollection()
    console.log(sampleQuiz) //undefined 

有什么办法可以获取承诺之外的数据吗？

非常感谢任何人的帮助。我对 React 开发还比较陌生，使用 Mac OSX 和 Chrome 作为浏览器。我有一个小型应用程序，尝试使用“isomorphic-fetch”从 Yelp Fusion 的 API 发出异步 GET 请求，但收到以下错误：

Fetch API 无法加载https://api.yelp.com/v3/businesses/search？[剩余 URL]对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问来源“ http://localhost:3000 ”。响应的 HTTP 状态代码为 500。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我做了很多搜索，看看已经存在对相同问题的回应，但我对如何用我对这种开发环境相对较新的知识来解决我的问题感到更加困惑。（似乎特别有用的答案是：对预检请求的响应未通过访问控制检查和在 componentDidMount 内部使用 HTTP 授权标头的 API 请求，但我并不真正了解如何在我的环境中实际实现这些解决方案。我所做的任何尝试看起来不正确并且不会导致更改。）。

附带说明：我已经在 Chrome 浏览器上安装了 Allow-Control-Allow-Origin: * 扩展程序，但我收到了相同的错误 - 只是对其进行了简短、不太详细的描述：

Fetch API 无法加载https://api.yelp.com/v3/businesses/search？[剩余网址]。预检响应具有无效的 HTTP 状态代码 500

以下是我在代码中调用 fetch 的方式：

var options = (
    method: 'get',
    headers: new Headers({
        'Access-Control-Allow-Origin': '*',
        'Authorization': [my token]
        'Content-Type': 'application/json'
    }) …

我的目标是从两个 URL 获取数据，并仅在两个 URL 均成功返回时才执行操作。另一方面，如果其中任何一个失败，我想返回错误。我已经尝试了我的代码并设法获得了预期的效果。

我的问题是，是否有更有效、更简洁的方法来实现相同的功能？

辅助函数

let status = (r) => {  
  if (r.ok) {  
    return Promise.resolve(r)  
  } else {  
    return Promise.reject(new Error(r.statusText))  
  }  
}

let json = (r) => r.json();

要求

let urls = [
    'http://localhost:3000/incomplete',
    'http://localhost:3000/complete'
]

let promises = urls.map(url => {

    return fetch(url)  
    .then(status)  
    .then(json)  
    .then(d => Promise.resolve(d))
    .catch(e => Promise.reject(new Error(e)));

});

Promise.all(promises).then(d => {
    // do stuff with d
}).catch(e => {
    console.log('Whoops something went wrong!', e);
});

我想获取一个 URL 并确定它具有什么状态代码，特别是如果它具有 HTTP 301 或 HTTP 302 状态代码：

fetch('https://httpstat.us/301', {
    redirect: 'true'})
    .then(response => {
       console.log(response);
       const headers = response.headers.entries();
       for (h of headers) {
        console.log(h);
        }
    }).catch(err => {
        console.log("in error case")
        console.log(err);
    })

这确实给了我很多信息，特别是它通过以下方式告诉我：

response.redirected 

这是真的。但这只告诉我它重定向了，而不告诉我状态代码是什么。

有没有办法使用 Fetch API 来确定请求的真实状态码？

In my Project when conditions are insufficient my Django app send JSON response with message.

I use for this JsonResponse() directive,

Code:

data = {
    'is_taken_email': email
}
return JsonResponse(data)

Now I want using Javascript fetch API receive this JSON response and for example show alert.

I don't know how to use fetch API to do this. I want to write a listener who will be waiting for my JSON response from Django App.

I try:

function reqListener() {
  var …

这是函数：

const getUserIP = async () => {
  let response = await fetch('https://jsonip.com/');
  let json = await response.json();

  console.log(json.ip)
  return json.ip;
};

在控制台中，IP 地址按预期记录。但是，当我将“IP 地址”保存到变量时：

const ip = getUserIP();

然后ip在控制台输入，值显示为：

Promise { <state>: "fulfilled", <value>: "/* my IP here*/" }

我在 YouTube 上观看过视频，这些视频使用了相同的逻辑/语法，尽管 API 不同，但它确实有效。我搜索了 Google 和 SO，但找不到有相同问题的线程。

我缺少什么？

谢谢。

我对 React 还很陌生。我正在从 API 获取数据，并且在检查控制台日志时可以看到数据。但是，我不知道如何使用 map() 创建一个新数组，然后选项元素可以使用该数组来显示货币代码。

目前它填充下拉列表，但选项元素都是空的，结果显示为 NaN。

下面是我获取数据的代码示例。

state = {
    currencies: [],
    base: "USD", //default value
    amount: "",
    convertTo: "EUR",
    result: ""
  };

componentDidMount() {
    fetch("https://api.exchangeratesapi.io/latest")
      .then(response => {
        return response.json();
      })
      .then(data => {
        let currenciesFromApi = Object.keys(data.rates);
        console.log(currenciesFromApi);
        this.setState({
          currencies: currenciesFromApi
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

预期结果：下拉列表将填充来自 API 的货币代码（例如英镑、欧元、美元）和值以显示汇率而不是 NaN。

实际结果：下拉列表是空的，选择其中任何一个也会返回 Nan。

以下代码获取一个 json 列表，然后为每个列表项执行另一个获取调用以更改它们的值。问题是它不是同步完成的。“new”在“update”之前打印到控制台。

fetch(API_URL_DIARY)
.then(response => response.json())
.then(data => {
  console.log("old", data);
  return data;
})
.then(data => {
  data.forEach(function(e, index,array) {
    fetch(API_URL_FOOD_DETAILS + e.foodid)
    .then(response => response.json())
    .then(data => {
      array[index] = {...e, ...data};
      console.log("update");
    })
  });

  console.log("new", data)
});

更新

以下是我如何合并@Andy 的解决方案：

function fetchFoodDetails(id, index) {
  return fetch(API_URL_FOOD_DETAILS + id)
  .then(response => response.json())
  .then(data => {
      return [index, data];
  });
}

function fetchDiary() {
  return fetch(API_URL_DIARY)
  .then(response => response.json())
  .then(data => {
    return data;
  })
}

(async () => …

我正在 d3.js v5.8.2 中处理一些图表，我想加载从需要授权标头的 API 请求中获取的 JSON 数据。我试过类似的东西：

d3.json('url')
  .header("Authorization", "Bearer 7tsBVpsiYT")
  .get(function(error, data) {
    // callback
    console.log(data);
  });

我收到以下错误消息：

未捕获的类型错误：d3.json(...).header 不是函数

我有一个网站/投资组合，我在其中使用 Github API 显示我的所有项目。我的目标是为这些项目创建一个过滤器，所以我在一些名为“built-with.json”的存储库的根目录中创建了一个文件，该文件仅存在于两个存储库中仅用于测试目的，这是我的一系列技术在项目中使用（例如：["React", "Javascript", ...]）。所以我需要获取 Github APi（它运行良好的那部分），然后获取该文件，并返回一个新的项目数组，但带有一个“过滤器”键，其中值是“built-with.json”中的数组. 例子：

Github API 返回（仅返回一个项目的示例）：

[{
"id": 307774617,
"node_id": "MDEwOlJlcG9zaXRvcnkzMDc3NzQ2MTc=",
"name": "vanilla-javascript-utility-functions",
"full_name": "RodrigoWebDev/vanilla-javascript-utility-functions",
"private": false
}]

我需要的新对象数组：

[{
"id": 307774617,
"node_id": "MDEwOlJlcG9zaXRvcnkzMDc3NzQ2MTc=",
"name": "vanilla-javascript-utility-functions",
"full_name": "RodrigoWebDev/vanilla-javascript-utility-functions",
"private": false,
"filters": ["HTML5", "CSS3", "JS", "React"]
}]

这就是我所做的：

const url = "https://api.github.com/users/RodrigoWebDev/repos?per_page=100&sort=created";
fetch(url)
  .then((response) => response.json())
  .then((data) => {
      return data.map(item => {
        //item.full_name returns the repositorie name
        fetch(`https://raw.githubusercontent.com/${item.full_name}/master/built-with.json`)
          .then(data => {
            item["filters"] = data
            return item
          })
      })
    })
  .then(data => console.log(data)) …