标签: fetch-api

当我向某个端点发送删除请求时,例如使用来自终端的httpie

http delete http://localhost:8181/admin/applications/uspecs

我得到了一个有效的行为,就像在{ success: true }响应体中一样.但是,当我这样做

fetch (
  'http://localhost:8181/admin/applications/uspecs',
  { method: 'DELETE' }
)
.then(res => doSomethingWithResponse())
.catch(err => console.error(err))

在javascript代码中,然后我得到了一个

Fetch API cannot load http://localhost:8181/admin/applications/uspecs.
Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

控制台上的错误.我错过了什么？我在选项请求上获得了有效的方法列表.

React Native的fetch存在奇怪的问题.它以前工作,不知道我改变了什么,但它已停止工作.

login(data,success,fail){
    console.log('doing fb login');
    fetch(host+'/api/login?credentials='+data.credentials)
        .then( (response) => {
            console.log('got login response');
            return response.json();
        } )
        .then( json => {
            console.log('got login json');
            if(json.result!='fail'){
                success(json);
            } else {
                fail(json);
            }
            return json;
        })
        .catch((error) => {
          console.warn(error);
        });
}

问题是我看到第一个"获得登录响应"消息,但它只是挂起,没有任何反应,直到我按下触发"登录json"的屏幕并按预期继续.

令人沮丧的是因为这种情况一直在发生,我无法理解为什么第二个.then()不会自动触发.

任何帮助深表感谢.

编辑:发现了一个类似的问题:什么可能导致反应原生的这种缓慢提取？

似乎已经在考虑:https://github.com/facebook/react-native/issues/6679

此外,只有在Chrome调试工具启用时才会看到这种行为......很有趣

我想要实现的是让 Chrome 将视频文件作为数据加载（通过 Fetch API、XHR 等），并<video>在它仍在下载时使用它来播放它，而无需对同一 URL 发出两个单独的请求，也无需等到文件已完全下载。

ReadableStream从 Fetch API ( response.body)获取 a 很容易，但我找不到将它提供给video元素的方法。我发现我需要一个blobURL，它可以使用MediaSource对象创建。但是，该SourceBuffer#appendStream方法听起来正是所需要的，但并未在 Chrome 中实现，因此我无法将流直接连接到MediaSource对象。

我可能可以分块读取流，从中创建Uint8Arrays 并使用SourceBuffer#appendBuffer，但这意味着除非块大小非常小，否则播放不会立即开始。此外，感觉就像手动做一些所有这些 API 应该能够立即完成的事情。如果没有其他解决方案，而我走这条路，我应该期待什么警告？

是否有其他方法可以为 a 创建 blob URL ReadableStream？或者有没有办法提出fetch和<video>分享请求？有很多新的 API，我很容易错过一些东西。

我很新的反应,我试图从rails api引入数据,但我收到错误 TypeError: Cannot read property 'map' of undefined

如果我使用react dev工具,我可以看到状态,如果我在控制台中乱用它,我可以看到联系人$r.state.contacts可以帮助我做错了吗？我的组件看起来像这样:

import React from 'react';
import Contact from './Contact';

class ContactsList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  componentDidMount() {
    return fetch('http://localhost:3000/contacts')
      .then(response => response.json())
      .then(response => {
        this.setState({
          contacts: response.contacts
        })
      })
      .catch(error => {
        console.error(error)
      })
  }

  render(){
    return(
     <ul>
        {this.state.contacts.map(contact => { return <Contact contact{contact} />})}
      </ul>
    )
  }
}

export default ContactsList;

我正在使用浏览器的本机提取API来处理网络请求.此外,我正在使用whatwg-fetch polyfill用于不支持的浏览器.

但是,如果请求失败,我需要重试.现在我找到了这个npm包whatwg-fetch-retry,但他们没有解释如何在他们的文档中使用它.有人可以帮我这个或建议我另类吗？

我正在尝试自动化与旧的Web界面进行交互,该界面目前只暴露用户驱动的表单,因此我需要从带有动态请求的网页中抓取一些信息.

如果我使用XHR,我可以将响应视为a Document,这使我可以使用类似方法querySelector从特定节点检索信息.我想尝试使用Fetch API,它只给我一个Body.这blob,formData,json,和text,但我没有看到任何东西,会让我把它作为一个Document.

我错过了什么吗？我可以直接从中查询文档或其他内容fetch吗？如果没有,是否有一种简单的方法来获取字符串(从Body.text())并将其转换为文档？

fetch api 非常有用，但不幸的是它不适用于大多数浏览器，尤其是 Internet Explorer。我尝试使用 babel 将我的代码从 es6 转换为 es5，但它没有解决这个问题。转换成es5的时候还是包含fetch的。我怎样才能解决这个问题。这是es6代码：

var btnText = document.getElementById('btnText');
var btnJson = document.getElementById('btnJson');
btnText.addEventListener("click",fetchBtnText);
function fetchBtnText() {
  fetch("sample.txt")
    .then((response) => response.text())
.then((data) => console.log(data))
}

这是到es5的转换

'use strict';
var btnText = document.getElementById('btnText');
var btnJson = document.getElementById('btnJson');
btnText.addEventListener("click", fetchBtnText);
function fetchBtnText() {
  fetch("sample.txt").then(function (response) {
    return response.text();
  }).then(function (data) {
    return console.log(data);
  });
}

当我尝试使用 react-native 中的 fetch 从 cloudinary 获取图像列表时，出现以下错误。如何解决这个问题？

TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (C:\workspace\react_native\Gallery\node_modules\react-native\node_modules\whatwg-fetch\fetch.js:441)
    at XMLHttpRequest.dispatchEvent (C:\workspace\react_native\Gallery\node_modules\event-target-shim\lib\event-target.js:172)
    at XMLHttpRequest.setReadyState (C:\workspace\react_native\Gallery\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:567)
    at XMLHttpRequest.__didCompleteResponse (C:\workspace\react_native\Gallery\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:397)
    at C:\workspace\react_native\Gallery\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:503
    at RCTDeviceEventEmitter.emit (C:\workspace\react_native\Gallery\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:179)
    at MessageQueue.__callFunction (C:\workspace\react_native\Gallery\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:351)
    at C:\workspace\react_native\Gallery\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116
    at MessageQueue.__guardSafe (C:\workspace\react_native\Gallery\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314)
    at MessageQueue.callFunctionReturnFlushedQueue (C:\workspace\react_native\Gallery\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115)

我读了这个问题和 这个问题。前者只解释了“no-cors”与“same-origin”；后者建议 'no-cors' 没有用，因为不透明响应（Javascript 无法读取/执行任何有用的操作）：

你基本上从不想在实践中使用 mode: 'no-cors'——除非在一些非常有限的情况下。那是因为设置模式：'no-cors' 实际上对浏览器说的是，“在任何情况下都阻止我的前端 JavaScript 代码查看响应正文和标题的内容。” 在大多数情况下，这显然不是您想要的。

有人可以告诉我们这些“有限情况”的例子是什么，我们希望使用“无cors”（即使响应是不透明的？）

我能想到的唯一情况是一种单向通信；如果客户端向服务器发送 GET 或 POST 就足够了，那么服务器就可以跟踪请求的发生；（例如，增加请求计数器）；...

...那么响应是一个 OpaqueResponse 就足够了；即客户端只需要知道请求是否成功（状态 200），不需要任何负载响应。

我的想法是一个有效的例子吗？有人可以推荐其他可能性/用例/'no-cors'用法的例子吗？

我正在尝试使用 Fetch API 将照片文件上传到 S3 存储桶。尝试上传照片时，我在 POST 上收到 400 Bad Request。我正确获取了预先签名的帖子 url 和文件详细信息，但我相信我格式化 formData 的方式不正确。

我正在使用一个 html 文件输入，它使用 onchange 来运行 javascript 函数 handlePhoto。

html是

<input type="file" onchange="handlePhoto()" id="file_input"/>

和 javascript 函数是

function handlePhoto(){
    const file = document.getElementById('file_input').files[0]
    let formData = new FormData()
    fetch("/v1/photos/get_presigned_post/" , {
      method: "GET"
    })
    .then(response => response.json())
    .then(s3Result => {
      const { url, fields } = s3Result;
      Object.keys(s3Result.fields).forEach(key => {
        formData.append(key, s3Result.fields[key]);
      });
      formData.append('acl', 'public-read');
      formData.append('Content-Type', file.type);
      formData.append("file", file);

      fetch(url, {
        method: "POST",
        body: formData,
        headers: …