标签: fetch-api

从具有JavaScript fetch API的服务器请求时,您必须执行类似的操作

fetch(API)
  .then(response => response.json())
  .catch(err => console.log(err))

在这里,response.json()正在解决它的承诺.

问题是,如果你想捕获404错误,你必须解决响应承诺,然后拒绝获取承诺,因为只有在catch出现网络错误时你才会结束.所以fetch调用就像是

fetch(API)
  .then(response => response.ok ? response.json() : response.json().then(err => Promise.reject(err)))
  .catch(err => console.log(err))

这是一个更难阅读和推理的东西.所以我的问题是:为什么需要这个？将承诺作为回应价值有什么意义？有没有更好的方法来处理这个？

提出这样的要求:

return fetch(
            'http://localhost:8000/login',
            {   method: 'POST',
                headers: new Headers(
                   {"Content-Type": "application/json",
                    "Accept":"application/json"}
                ),

                body: JSON.stringify(
                   {'name': 'Tom', 'password': 'Soyer'}
                )
             }
           ).then( response => { console.log(response);})
            .catch(err => console.log(err))

请求使用OPTIONS方法运行而不是POST.仅在添加模式时:'no-cors'请求变为POST:

return fetch(
            'http://localhost:8000/login',
            {   method: 'POST',
                mode: 'no-cors',
                headers: new Headers(
                   {"Content-Type": "application/json",
                    "Accept":"application/json"}
                ),
                body: JSON.stringify(
                   {'name': 'Tom', 'password': 'Soyer'}
                )
             }
           ).then( response => { console.log(response);})
            .catch(err => console.log(err))

但响应不好(即使网络响应状态为200):{type:"opaque",url:"",status:0,ok:false,statusText:""...}我想是因为

Content-Type标头唯一允许的值是:application/x-www-form-urlencoded multipart/form-data text/plain

这里描述https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

是否有任何方式可以使用fetch生成POST json数据？

我有一些代码在哪里进行提取调用.这利用了现代chrome/firefox中内置的window.fetch api.

代码有时会遇到401:未经授权的响应.这是正常的,我希望它被忽略,我可以用代码的流程做.但是,当我尝试运行它时,Chrome确实会显示一个难看的console.error消息.

我如何编程地防止此控制台错误显示在所有计算机上的开发控制台中(即,没有chrome dev过滤器或tampermonkey类型插件).

这是一个可以解决的样本:

fetch("http://httpstat.us/401", {requiredStatus: 'ok'})
    .then(function() {
        console.log("pass!");
    }).catch(function() {
        console.log("fail!");
    });

我想通过提取发送一个帖子请求,但它不起作用.

但是,如果我通过jQuery ajax做到这一点,它就会成功.

我想知道这两种方式的区别,如果我在这里使用fetch有什么问题:

fetch('http://localhost:8888/news',{
    method:"post",
    data:"code=7&a=8&b=9"
}).then(function(data){
     data.json().then(function (json) {
}

嗨,只是学习使用js和react-native.我不能使用FormData它总是显示不支持的bodyinit类型.我想发送文本而不是json.stringfy.谁能帮我？谢谢!

var data = new FormData()
data.append('haha', 'input')

fetch('http://www.mywebsite.com/search.php', { 
  method: 'post',
  body: data
})
.then((response) => response.json())
.then((responseData) => {
  console.log('Fetch Success==================');
  console.log(responseData);

  var tempMarker = [];
  for (var p in responseData) {
   tempMarker.push({
    latitude: responseData[p]['lat'],
    longitude: responseData[p]['lng'] 
   })
  }

  this.setState({
    marker: tempMarker
  });

})
.catch((error) => {
  console.warn(error);
})
.done();

我最近一直在玩Javascript Fetch API.据我了解,默认情况下,所有重定向都是透明处理的,最后我得到了重定向链中最后一次调用的响应.

但是,我可以使用{redirect:'manual'}调用fetch,在这种情况下,它会返回一个没有可用信息的opaqueredirect响应.来自https://fetch.spec.whatwg.org/#concept-filtered-response-opaque-redirect

opaque-redirect过滤响应是一个过滤后的响应,其类型为"opaqueredirect",状态为0,状态消息为空字节序列,标头列表为空,body为空,预告片为空.

https://fetch.spec.whatwg.org/#http-fetch表示如果重定向设置为'manual',则响应将变为opaqueredirect:

切换请求的重定向模式:
...
- manual
    设置对opaque-redirect过滤响应的响应,其内部响应为actualResponse.

规范还说:

换句话说,不透明的过滤响应和不透明重定向过滤的响应几乎与网络错误无法区分.

鉴于这一切,为什么在使用Fetch API时会将重定向设置为手动？对我来说似乎没用.是否存在有用的用例？

我使用fetch()从api服务器获取数据.我的错误看起来像这样:

Uncaught (in promise) SyntaxError: Unexpected end of input at 
  fetch.then.blob.

你能告诉我我做错了什么吗？

const weatherAPi ='https://www.metaweather.com/api/location/523920';
fetch(weatherAPi, {
  mode: 'no-cors'
}).then(blob => blob.json())
  .then(data => console.log(data))

我的app/page（服务器组件）中有此代码：

const getUsers = async () => {
  const result = await fetch('/api/users', {method: 'GET'});
  if (result.ok) {
    return result.json();
  }
  return [];
}

export default async function IndexPage() {
  const users = await getUsers();
  return (<h1>Users: {users.length}</h1>);
}

这给了我以下错误：

TypeError: Failed to parse URL from api/users

如何从服务器端组件中引用 URL 的“左侧”？我能找到的所有 Next.js13示例都显示指向某个第三方服务器。Postgres 示例项目使用旧的路由器和客户端获取，使用与我使用的相同的语法。

我正在使用新的fetch API在Javascript中编写一个基本应用程序.以下是代码相关部分的基本示例:

function foo(url) {
  const options = {};
  options.credentials = 'omit';
  options.method = 'get';
  options.headers = {'Accept': 'text/html'};
  options.mode = 'cors';
  options.cache = 'default';
  options.redirect = 'follow';
  options.referrer = 'no-referrer';
  options.referrerPolicy = 'no-referrer';
  return fetch(url, options);
}

在进行获取请求时,我偶尔会在控制台中看到如下所示的错误:

拒绝加载脚本'<url>',因为它违反了以下内容安全策略指令...

在阅读并了解HTTP/2之后,看起来会出现此消息,因为响应正在推回预加载的脚本.使用devtools,我可以在响应中看到以下标题:

链接:<路径到脚本>; 相对=预载荷; 为=脚本

以下是我的Chrome扩展程序manifest.json文件的相关部分:

{
  "content_security_policy": "script-src 'self'; object-src 'self'"
}

以下是Chrome的manifest.json格式的文档,以及内容安全策略如何应用于扩展程序提取的内容:https://developer.chrome.com/extensions/contentSecurityPolicy

我做了一些测试,并且能够确定在获取期间发生此错误消息,而不是在解析响应文本时.没有问题将脚本元素加载到实时DOM中,这一切都发生在获取时.

在我的研究中我无法找到的是如何避免这种行为.看起来急于支持这个伟大的新功能,制作HTTP/2和fetch的人没有考虑我没有获取远程页面以便显示它或其任何相关资源(如css)的用例/图像/脚本.我(应用程序)以后不会使用任何相关资源; 只有资源本身的内容.

在我的使用案例中,这种推送(1)完全浪费了资源,并且(2)现在导致一个非常恼人和压力诱导的消息偶尔出现在控制台中.

话虽如此,这是我希望得到一些帮助的问题:有没有办法向浏览器发信号,使用清单或脚本,我对HTTP/2推送不感兴趣？是否有我可以为获取请求设置的标头告诉Web服务器不响应推送？我可以在我的应用程序清单中使用CSP设置,以某种方式触发不要推送我的响应吗？

我查看了https://w3c.github.io/preload/第3.3节,它没有多大帮助.我看到我可以发送标题Link: </dont/want/to/push/this>; rel=preload; as=script; nopush.问题是我还不知道响应中会有哪些链接头,我不确定fetch是否允许在初始请求中设置链接头.我想知道我是否可以发送某些类型的请求,可以在响应中看到链接头但是避免它们,然后发送追加所有相应nopush头的后续请求？

这是一个简单的测试用例来重现这个问题:

1. 获取最新或近乎最新的chrome的开发版本
2. 创建扩展文件夹
3. 使用类似的CSP创建清单
4. 加载扩展为解压缩到chrome中
5. 在devtools中打开扩展的后台页面
6. 在控制台类型获取(' https://www.yahoo.com ').
7. 检查控制台中显示的结果错误消息: …

我在我的React应用程序中使用fetch API.该应用程序部署在服务器上,运行正常.我多次测试了它.但是,突然应用程序停止工作,我不知道为什么.问题是,当我发送get请求时,我收到来自服务器的有效响应,但fetch API正在捕获异常并显示TypeError: failed to fetch.我甚至没有对代码进行任何更改,这是所有React组件的问题.

我得到了有效的答复.

但同时也得到这个错误.

fetch(url)
.then(res => res.json())
.then(data => {
  // do something with data
})
.catch(rejected => {
    console.log(rejected);
});

当我删除时credentials: "include",它适用于localhost,但不适用于服务器.

我尝试了在StackOverflow和GitHub上给出的每个解决方案,但它只是不适合我.