标签: fetch-api

我正在尝试使用新的Fetch API:https://developer.mozilla.org/en/docs/Web/API/Fetch_API

我正在做这样的GET请求:

var request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET'
});
fetch(request);

但是,我不确定如何将查询字符串添加到GET请求.理想情况下,我希望能够向以下URL发出GET请求:

'http://myapi.com/orders?order_id=1'

在jQuery中,我可以通过传递做到这一点{order_id: 1}作为data参数$.ajax().使用新的Fetch API有没有相同的方法呢？

我可以http://catfacts-api.appspot.com/api/facts?number=99通过Postman 点击这个终点并返回JSON

此外,我正在使用create-react-app,并希望避免设置任何服务器配置.

在我的客户端代码中我试图用fetch同样的东西,但我收到错误:

请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:3000 '访问.如果不透明响应满足您的需求,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.

所以我试图传入一个对象,我的Fetch将禁用CORS,如下所示:

fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'})
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });

有趣的是,我得到的错误实际上是这个函数的语法错误.我不确定我的实际fetch是否已损坏,因为当我删除{mode:'no-cors'}对象,并为其提供不同的URL时,它可以正常工作.

我也尝试传入该对象{ mode: 'opaque'},但这会从上面返回原始错误.

我相信我需要做的就是禁用CORS ..我错过了什么？

我最近一直在搞乱fetch()api,并注意到一些有点古怪的东西.

let url = "http://jsonplaceholder.typicode.com/posts/6";

let iterator = fetch(url);

iterator
  .then(response => {
      return {
          data: response.json(),
          status: response.status
      }
  })
  .then(post => document.write(post.data));
;

post.data返回一个promise对象. http://jsbin.com/wofulo/2/edit?js,output

但是如果写成:

let url = "http://jsonplaceholder.typicode.com/posts/6";

let iterator = fetch(url);

iterator
  .then(response => response.json())
  .then(post => document.write(post.title));
;

post这里是一个标准对象,您可以访问title属性. http://jsbin.com/wofulo/edit?js,output

所以我的问题是:为什么response.json在对象文字中返回一个promise,但是如果刚刚返回则返回值？

我的代码:

fetch("api/xxx", {
    body: new FormData(document.getElementById("form")),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "multipart/form-data",
    },
    method: "post",
}

我尝试使用fetch api发布我的表单,它发送的正文如下:

-----------------------------114782935826962
Content-Disposition: form-data; name="email"

test@example.com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

pw
-----------------------------114782935826962--

(我不知道为什么每次发送边界的数字都会改变...)

我希望用"Content-Type"发送数据:"application/x-www-form-urlencoded",我该怎么办？或者,如果我只需处理它,我如何解码控制器中的数据？

谁回答我的问题,我知道我可以做到:

fetch("api/xxx", {
    body: "email=test@example.com&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
}

我想要的是像$("#form").jQuery中的serialize()(没有使用jQuery)或者在控制器中解码mulitpart/form-data的方法.谢谢你的回答.

我想用fetch写一个简单的基本身份验证,但我一直收到401错误.如果有人告诉我代码有什么问题,那会很棒:

let base64 = require('base-64');

let url = 'http://eu.httpbin.org/basic-auth/user/passwd';
let username = 'user';
let password = 'passwd';

let headers = new Headers();

//headers.append('Content-Type', 'text/json');
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));

fetch(url, {method:'GET',
        headers: headers,
        //credentials: 'user:passwd'
       })
.then(response => response.json())
.then(json => console.log(json));
//.done();

function parseJSON(response) {
return response.json()
}

我很难找到使用fetch实现上传进度指示器的文档或示例.

这是迄今为止我发现的唯一参考资料,其中指出:

进度事件是一个高级功能,暂时无法获取.您可以通过查看Content-Length标头并使用传递流来监视接收的字节来创建自己的标头.

这意味着您可以无需另外明确地处理响应Content-Length.当然,即使在Content-Length那里也可能是谎言.使用流可以根据需要处理这些谎言.

如何编写"传输流来监控字节"发送？如果它产生任何差异,我正在尝试这样做以支持从浏览器到Cloudinary的图像上传.

注意:我对Cloudinary JS库不感兴趣,因为它依赖于jQuery而我的应用程序没有.我只对使用原生javascript和Github的polyfill 执行此操作所需的流处理感兴趣.fetch

https://fetch.spec.whatwg.org/#fetch-api

我正在使用fetch polyfill从URL检索JSON或文本,我想知道如何检查响应是否是JSON对象还是只是文本

fetch(URL, options).then(response => {
   // how to check if response has a body of type json?
   if (response.isJson()) return response.json();
});

我正在获取这样的URL:

fetch(url, {
  mode: 'no-cors',
  method: method || null,
  headers: {
    'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
    'Content-Type': 'multipart/form-data'
  },
  body: JSON.stringify(data) || null,
}).then(function(response) {
  console.log(response.status)
  console.log("response");
  console.log(response)
})

我的API期望数据是multipart/form-data这样的,我正在使用content-type这种类型......但是它给了我一个状态代码为400的响应.

我的代码出了什么问题？

我有一个fetch-api POST要求:

   fetch(url, {
      method: 'POST',
      body: formData,
      credentials: 'include'
    })

我想知道这是什么默认超时？我们如何将其设置为特定值,如3秒或无限秒？

我有一些参数,我想将表格编码POST到我的服务器:

{
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
}

我正在发送我的请求(目前没有参数)

var obj = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
};
fetch('https://example.com/login', obj)
  .then(function(res) {
    // Do stuff with result
  }); 

如何在请求中包含表单编码的参数？