标签: fetch-api

我正在尝试使用本机响应简单的应用程序.我想从页面下载一个json数组并将其显示为listview.我这样做

var listApp = React.createClass({

fetchData : function() {
  fetch(requestURL)
    .then((response) => response.json())
    .then((responseData) => {
      console.log(responseData);
    })
    .done();
},
componentDidMount: function() {
  this.fetchData();
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(elements)
  });
},

但是这样做我fetch is not a function从Chrome调试器中得到了错误.我以这种方式获取var fetch = require("fetch");

我想知道，我该怎么做才能在获取中以诺言方式调用函数？

请注意这一行： .then(json => this.processReq(json))

我不得不用this.，因为如果没有它说，processReq是undefined。应该不是这样的：.then(json => processReq(json))因为是ES6？

这是我的代码（我正在使用Babel ES6和React）：

import React, { Component, PropTypes } from 'react'
import fetch from 'isomorphic-fetch'

export default class Batchprodpry extends Component {
  constructor(props) {
    super(props) {
  .
  .
  .
  processReq(json) {
    Object.keys(json).forEach(item => {
      if (item === 'error') {
        Object.keys(json[item]).forEach(propry => {
          alert('Conflicto! '+'\n'+
            'Id: ' + JSON.stringify(json[item][propry]['propryid'])+'\n'+
            'Id Operador: ' + JSON.stringify(json[item][propry]['fkempid'])+'\n'+
            'Hora inicio: ' + JSON.stringify(json[item][propry]['propryhoraini'])+'\n'+
            'Hora fin: ' + JSON.stringify(json[item][propry]['propryhorafin']))          
        })
      } …

我一直在玩 Google+ API 并尝试使用以下网址获取 Google+ 用户的个人资料图片网址：

https://www.googleapis.com/plus/v1/people/ {user_id}?key={API_KEY}

不需要 OAuth，您也可以在这里尝试一下（不需要 API 密钥）：

https://developers.google.com/apis-explorer/#p/plus/v1/plus.people.get?userId=116725099929439898086&_h=1&

起初我使用 Fetch API 来获取数据，因为我也想使用 service worker 来做到这一点：

fetch('https://www.googleapis.com/plus/v1/people/116725099929439898086?key=MY_API_KEY')
.then(function(response){
    console.log(response);
});

但它只给了我这个回应：

{
    body: ReadableStream
    bodyUsed: false
    headers: Headers
    ok: true
    status: 200
    statusText: ""
    type: "cors"
    url: "https://www.googleapis.com/plus/v1/people/115681458968227650592?key=MY_API_KEY"
}

但是，如果我改用 jQuery 的 getJSON 方法：

$.getJSON( "https://www.googleapis.com/plus/v1/people/115681458968227650592?key=MY_API_KEY", function( data ) {
    console.log(data);
}); 

它就像一个魅力，我可以得到我需要的东西：

{
 "kind": "plus#person",
 "etag": "\"FT7X6cYw9BSnPtIywEFNNGVVdio/DgskSQn7XXHCvjcdFBFkiqEbsfo\"",
 "gender": "male",
 "urls": [ ... ],
 "objectType": "person",
 "id": "116725099929439898086",
 "displayName": "Kevin Lai",
 ...
}

有人可以解释为什么他们会做出如此不同的行为吗？而且，如何在仍然使用 Fetch API …

我将音频文件托管在服务器上，我希望我的应用程序在身份验证后可以访问。用户发送包含身份验证令牌的GET请求，然后服务器返回二进制音频数据。

据我所知，没有办法将此“ blob”作为音频文件保存到文件系统。当前在react-native中实现的抓取功能不支持Blob：link

...而且expo也不支持理想的react-native-fetch-blob库：link

此外，我看不到任何从服务器流式传输音频文件的方法。包含有expo的音频库允许从URL（例如http://example.com/myaudio.mp3）流式传输音频，但是我看不到将授权标头附加到请求的任何方法（例如“ Authorization”：“不记名[我的令牌]“）。

是否可以通过下载和保存音频Blob或从包含请求中包含授权标头的URL进行流传输来实现此目的？我可以将项目与世博会分离，但我想把它留作最后的手段。

用户登录后我需要帮助。如果数据有结果，我尝试重定向页面，但如果我登录了错误的电子邮件或密码，它仍然会重定向页面而不是警告错误。顺便说一下，我正在使用来自 API 的令牌。

function loginUser(){

fetch('http://example_website.com/api/login', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        email: document.getElementById("email").value,
        password: document.getElementById("password").value
    })
})
.then(data => data.json() )
.then(data =>  { 

    if(data){
        redirect: window.location.replace("../Sample/home.html") 
    } else{
        alert("Invalid Email or Password");
    }
}) 
.catch((err) => {
    console.error(err);
})

}

function registerUser(){

fetch('http://example_website.com/api/register', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        given_name: document.getElementById("given_name").value,
        last_name: document.getElementById("last_name").value,
        email: document.getElementById("email").value,
        password: document.getElementById("password").value,
        password_confirmation: document.getElementById("confirm_password").value
    })
})
.then(data => data.json())
.then(data =>  { console.log(data); 
})
.catch((err) => {
     alert ("Error!"); …

这是有效的：

    const limit = 1000
    // fetchMyProducts(page, limit, flag)
    return fetchMyProducts(1, 1, true)
    .then(function (products) {
        return fetchMyProducts(2, limit, false)
    }).then(function (totalProducts) {
        return fetchMyProducts(3, limit, false)
    }).then(function (totalProducts) {
        return fetchMyProducts(4, limit, false)
    }).then(function (totalProducts) {
        return fetchMyProducts(5, limit, false)
    }).then(function (totalProducts) {
        return fetchMyProducts(6, limit, false)
    }).then(function (totalProducts) {
        return fetchMyProducts(7, limit, false)
    })

我正在尝试通过 fetch 获取我们系统中的所有产品。问题是，目前，我知道有多少产品，但在 1 年 / 3 年内......谁知道？

我正在尝试动态循环获取并获取所有产品。

我试过这个，但它似乎根本没有被调用。

    return fetchMyProducts(1, 1, true)
    .then(function (numberOfProducts) {
        let pages = Math.ceil(numberOfProducts / 1000) + …

我将 Fetch API 与 cross-fetch polyfill https://www.npmjs.com/package/cross-fetch 一起使用

已经在 SO 上放屁了几个小时，试图让文件上传工作使用它。无论我做什么，我似乎都无法避免“不受支持的 BodyInit 类型”错误。

<input
    name="file"
    type="file"
    onChange={event => {
      event.preventDefault();
      var f = event.target.files[0];
      var data = new FormData();
      data.append("file", f);

      fetch("/my-api", {
        method: "POST",
        body: data
      });
    }}
  />

这是一个可运行的示例：https : //codesandbox.io/s/v08lpj24wy

当然，我不会直接在 onChange 处理程序中执行此类操作，但该示例说明了错误。我究竟做错了什么？

感谢您抽出宝贵的时间查看此内容。我遇到了一些意外的行为，在aws lambda中工作时无法弄清楚。

我正在执行一个访存，然后根据其成功还是失败做一些不同的事情，如果一切都顺利，最终希望使用fetch.json（）方法。我正在使用await使lambda处理程序的内部“同步”。

当我将获取的结果分配给一个变量然后检查它时，一切都很好。但是我喜欢整洁的代码，所以我决定使用解构分配，突然事情开始崩溃。

为了说明我的困惑，我提供了一个代码段，该代码段重复了该问题并显示了五种不同的内容-前两项工作，其余部分休息。

在第三个示例中，“ r”是一个空对象。其余的运算符将其破坏，我不理解。它是在创建一个新对象并拒绝复制属性吗？销毁时属性不存在吗？如果是这样，为什么还可以正确地破坏状态？

四只是三者问题的简化示例。

五也让我感到困惑，因为我能够获取json方法，但是当我尝试执行它时，它抛出了非法调用异常。

摘录如下：

const one = async () => {
  const r = await fetch('https://reqres.in/api/users?page=2');
  console.log(await r.json());
}

const two = async () => {
  const r = await fetch('https://reqres.in/api/users?page=2');
  const { ok } = r;
  console.log(await r.json());
  console.log(ok);
}

const three = async () => {
  const { ok, status, ...r } = await fetch('https://reqres.in/api/users?page=2');
  try {
    console.log(await r.json());
  } catch (e) {
     console.log(e);
     console.log(ok);
     console.log(status);
     console.log(r);
  }
}

const four = …

这不是完全重复；下面提供的答案与建议的重复答案中的评论相同。

从 asp.net 控制器操作内部，我很想知道该调用是否是由 javascript fetch() 调用进行的。我可以询问 Request 对象的任何部分以发现这一点吗？

例如，如果我想知道调用者是否是 javascript $.ajax 调用，在服务器端我可以调用这个方法：

Request.IsAjaxRequest();

如果它返回 true 我知道调用是这样的：

       $.ajax({
        url: '/MyDomain/MyControllerAction',
        type: 'GET',
        success: function (data) {
            doSomething(data);
        },
        error: function (XMLHttpRequest, ajaxOptions, ex) {
            doSomethingElse(XMLHttpRequest, ajaxOptions, ex);
    });

是否有类似 Request.IsAjaxRequest() 我可以调用或询问来发现调用者是否是 javascript fetch()，例如这样的调用：

fetch('/MyDomain/MyControllerAction')
       .then(function (data) {
          if(data.ok){
            return data.json();
           }
        })
        .then(function (data) {
            doSomething(data)
        })
        .catch(function (error) {
            doSomethingElseAgain(error);
        });

我正在尝试制作通用功能，该功能将处理来自任何地方的所有 API 调用

我正在使用 react": "^16.8.6" 和 fetch 进行 api 调用

到目前为止，我想出的是

Helper.js

export function ApiHelper(url, data = {}, method = 'POST') {
    let bearer = 'Bearer ' + localStorage.getItem('user_token');
    var promise = fetch(url, {
        method: method,
        withCredentials: true,
        // credentials: 'include',
        headers: {
            'Authorization': bearer,
            'X-FP-API-KEY': 'chaptoken', 
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(
        (result) => {
            console.log(result);
        },
        (error) => {
            error = error;
        }
    )
}

export function AnyOtherHelper() {
    return 'i am from helper function'; …