标签: fetch-api

如果请求失败,新的js fetch API将失败(400):

fetch(uri).catch(function(err) {
   console.log(err);
});

发生这种情况时,真的没有办法获得响应机构吗？例如,检查错误代码.

编辑:我创建了一个js小提琴:https://jsfiddle.net/4x4xLwqo/,它调用这个mockbin端点:http://mockbin.org/bin/d87acbb0-526e-4d66-aea4-b827d9c35031/view

编辑2:更新jsfiddle以使用更好的端点:https://jsfiddle.net/4x4xLwqo/2/

我正在尝试使用fetch()API POST方法来获取PHP中的POST数据.

这是我尝试过的:

var x = "hello";
fetch(url,{method:'post',body:x}).then(function(response){
    return response.json();
});

PHP:

<?php
if(isset($_GET['x']))
{
    $get = $_GET['x'];
    echo $get;
}
?>

它是否正确？

我正在尝试使用fetch api创建一个http帖子.即使我发送令牌,我在VerifyCsrfToken.php中收到错误TokenMismatchException.如何使用fetch api拨打电话？(我也尝试过使用jQuery ajax并且它的工作正常)继承人fetch api代码

      var URL = $("#form").attr("action");
      var token = $("input[name='_token']").val();
      var group_id = $(this).val();
  fetch(URL, {
       method: 'post',
       mode: 'no-cors',
       body: JSON.stringify({
           'csrf-token': token,
           'group_id': group_id
       })
     }).then(function(response){
           return response.json();
       })  .then(function(json){



       })
         .catch(function(error){


         });

我已经在这样的表单中添加了令牌

<form id="form" action="{{ url('api/getcoursebygroup') }}">
    <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
  </form>

这个jQuery ajax调用工作正常:

$.ajax({
          type: "POST",
          url:  URL,
          data: { "group_id" : group_id, "_token" : token },
          dataType: 'json'
      }).done(function (result) {

        if(result.code == …

fetch API 请求只会在出现网络或服务器错误时失败。因此，例如，如果我执行以下代码，假设它通过try块没有错误，我将有一个有效的填充res.

try {
    const res = await fetch('/createurl', { 
        method: 'POST',
        body: 'testData',
        headers: {
            'Content-Type': 'application/json'
        }
    })

    if (res.ok) {
        alert('Resource created!')
    } else {
        alert('Error creating resource!')
    }

    flashResponseToUser(res)
} catch(e) {
    alert('A server or network error occurred during the request!')
}

我正在处理res向用户显示使用该功能的必要信息error或success消息flashResponseToUser(res)。由于res.json()返回 a Promise，flashResponseToUser必须是一个异步函数。

const flashResponseToUser = async(res) => {
    const jsonRes = await res.json() // Get …

根据规范,fetch api有各种缓存模式.("default","no-store","reload","no-cache","force-cache"和"only-if-cached")但是,不清楚每种模式的用途,或者浏览器支持的状态.

我试图将一些数据发布到服务器,但我不知道如何取回响应数据.

我有以下代码:

fetch(url, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: login,
    password: password,
  })
}).then(function(a){
  console.log(a);
})

它打印出一个Response包含body(ReadableByteStream),bodyUsed(false),ok(true),status(200)等数据的数据,但是我找不到我回来的数据,无处可去.当我打开chrome开发者控制台 - 网络时,我看到那里的响应数据.

我究竟做错了什么？

我一直在寻找一些资源如何获取,承诺,...工作,但我找不到任何写得好.

我正在尝试从API中获取数据.API已启用CORS支持并返回以下对OPTIONS请求的响应:

Access-Control-Request-Headers:content-type  
Access-Control-Allow-Origin:*  

API不允许'Content-type'任何其他内容'application/json'.

使用此限制,我试图使用fetchReact-Native方法来获取数据.

方法1(无人):

{
    method: 'POST',
    mode: "no-cors",
    headers: {
       'content-type': 'application/json'
}

使用此方法,浏览器会自动将内容类型发送为"text/plain".我假设这是因为CORS默认只允许三个标头中的一个.但是,由于服务器不支持此内容类型,因此会针对不支持的内容类型返回错误.

方法2(与cors或没有任何东西):

{ 
    method: 'POST',
    mode: "cors", // or without this line
    redirect: 'follow',
    headers: {
        'content-type': 'application/json'
    }
}   
...   
.then(response => console.log(response))

在这种情况下,使用Chrome的F12网络工具,我可以看到服务器返回数据:对服务器的第一个请求是fetchfor OPTIONS.为此,服务器回复一个空对象以及上面的标题集.下一个调用是实际的POST API调用,服务器使用包含一些数据的正确JSON响应向其响应.但是,通过我的代码进入控制台的响应是{}.我假设这是因为react的fetchAPI返回了OPTIONS调用的响应而不是实际的POST调用.

有没有办法忽略OPTIONS请求的响应并获得then处理后续请求响应的方法？

我正在开发一个项目，在该项目中，我提取美国 GDP 的 API，然后根据数据创建图表。现在，我对问题的第一部分感到困惑，因为我正在努力将 JSON 存储在变量中，以便我可以在项目的其余部分中使用它。我查看了其他一些线程，但没有找到适合我的解决方案。

下面是我当前的代码。

let jsondata =;

fetch('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json').then(
    function(u){ return u.json();}
  ).then(
    function(json){
        jsondata = json;
        console.log(jsondata)
    }
  )


console.log(jsondata)

目前，我可以在第二个函数中使用 console.log(json) 和 console.log(jsondata) 。但是，即使我在函数外部声明了该变量，它也不会使该变量成为自身全局变量。我缺少什么？

我有这个获取方法

loginbutton.onclick = (e)=> {
    e.preventDefault();
    var creds = {
        login: login.value,
        pass: pass.value
    }
    
    fetch('functions/asklogin.php', {
        method: "POST",
        header: {"Content-type": "application/json; charset=UTF-8"},
        body: JSON.stringify(creds)
    })
    .then(resp => resp.text())
    .then(data => console.log(data));
}

当我点击时，我的 xhr 身体吃饱了：

但是，如果我尝试从我的asklogin.php 中回显这些参数

echo "no".$_POST['pass'].":".$_POST['login'];

我得到的只是no:

感谢您的帮助

我试图通过代码使用我的 api 我收到此错误

object`（“[object Response]”）无法序列化为 JSON

但是当我通过浏览器调用或使用这个 api 时，我得到了响应。

这是我的代码 https://codesandbox.io/s/naughty-platform-1xket?file=/pages/index.js

我像这样使用我的 api

 console.log("-----");
  const cc = await fetch("https://1xket.sse.codesandbox.io/api/basecss/");
  console.log(cc, "llll");

API设计

export default async (req, res) => {
  const stylesheet = await (
    await fetch("https://www.****.com/asset/web/css/***-base.css", {})
  ).text();
  console.log(stylesheet, "server");
  res.status(200).send(stylesheet);
};

我在服务器上获取此控制台值。但是当我通过代码调用这个 api 时，我收到了这个错误

object` ("[object Response]") cannot be serialized as JSON. Please only return JSON serializable data types