Fetch()

lakeside 发布于2019-08-26 13:25 / 487人阅读

摘要：常见的坑接收到表示错误的状态码时，返回的不会被标记为即使状态码为或。会将状态标记为但返回值但属性设置为。网络故障或请求被阻止才会标记为。原始请求请求使用箭头函数获取一个文件，并打印到控制台。参数接受第二个可选参数，控制不同配置的参数。

Fetch()提供了一种方式进行跨网络异步请求资源的方式，用于访问和操作HTTP管道的部分，比如：请求和相应。

fetch常见的坑：

接收到表示错误的HTTP状态码时，fetch()返回的Promise不会被标记为reject（即使状态码为404或500）。fetch()会将Promise状态标记为resolve（但resolve返回值但OK 属性设置为 false）。网络故障或请求被阻止才会标记为reject。

fetch()不会从服务端发送或接收任何cookies。发送cookies 需要设置 fetch(url, {credentials: "include"}) 选项。

原始XHR请求

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "json";

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

fetch请求

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

使用箭头函数：

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

获取一个JSON文件，并打印到控制台。指明资源路径，然后返回一个Response对象，使用json()方法获取JSON但内容。

fetch参数

fetch()接受第二个可选参数，控制不同配置的init参数。

// Example POST method implementation:

postData("http://example.com/answer", {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match "Content-Type" header
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, same-origin, *omit
    headers: {
      "user-agent": "Mozilla/4.0 MDN Example",
      "content-type": "application/json"
    },
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, cors, *same-origin
    redirect: "follow", // manual, *follow, error
    referrer: "no-referrer", // *client, no-referrer
  })
  .then(response => response.json()) // parses response to JSON
}

包含凭据的请求

包含凭据的请求：

fetch("https://example.com", {
    //将credentials: "include"添加到传递给fetch()方法的init对象
    credentials: "include" 
})

若在同源橱发送凭据：

fetch("https://example.com", {
  credentials: "same-origin"  
})

确保浏览器不在请求中包含凭据：

fetch("https://example.com", {
  credentials: "omit"  
})

上传JSON数据

var url = "https://example.com/profile";
var data = {username: "example"};

fetch(url, {
  method: "POST", // or "PUT"
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    "Content-Type": "application/json"
  })
}).then(res => res.json())
.catch(error => console.error("Error:", error))
.then(response => console.log("Success:", response));

上传文件

使用、FormData() 和 fetch()

Headers

使用Headers构造函数创建headers对象，headers对象为多键值对：

var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

内容可被获取：

console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false

总结一下，Fetch 优点主要有：

语法简洁，更加语义化

基于标准 Promise 实现，支持 async/await

同构方便，使用 isomorphic-fetch

GPU云服务器云服务器 Fetch fetch webrtc fetch模式 fetch什么意思

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108779.html

fetch使用的常见问题及其解决办法

首先声明一下，本文不是要讲解fetch的具体用法，不清楚的可以参考MDN fetch教程。引言说道fetch就不得不提XMLHttpRequest了，XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调，尽管开发者只关心请求成功后的业务处理，但是也要配置其他繁琐内容，导致配置和调用比较混乱，也不符合关注分离的原则；fetch的出现正是为了解决XHR存在的这些问题。例如下面代码： f...

pubdreamcc 2019-08-20 14:34 评论0 收藏0
传统 Ajax 已死，Fetch 永生

摘要：结果证明，对于以上浏览器，在生产环境使用是可行的。后面可以跟对象，表示等待才会继续向下执行，如果被或抛出异常则会被外面的捕获。，，都是现在和未来解决异步的标准做法，可以完美搭配使用。这也是使用标准一大好处。只允许外部传入成功或失败后的回调。 showImg(https://cloud.githubusercontent.com/assets/948896/10188666/bc9a53...

fai1017 2019-08-21 10:41 评论0 收藏0
fetch使用的常见问题及其解决办法

摘要：首先声明一下，本文不是要讲解的具体用法，不清楚的可以参考教程。该模式用于跨域请求但是服务器不带响应头，也就是服务端不支持这也是的特殊跨域请求方式其对应的为。首先声明一下，本文不是要讲解fetch的具体用法，不清楚的可以参考 MDN fetch教程。 fetch默认不携带cookie 配置其 credentials 项，其有3个值： omit: 默认值，忽略cookie的发送 sam...

pkwenda 2019-08-23 17:52 评论0 收藏0
对python并发编程的思考

摘要：我们以请求网络服务为例，来实际测试一下加入多线程之后的效果。所以，执行密集型操作时，多线程是有用的，对于密集型操作，则每次只能使用一个线程。说到这里，对于密集型，可以使用多线程或者多进程来提高效率。为了提高系统密集型运算的效率，我们常常会使用到多个进程或者是多个线程，python中的Threading包实现了线程，multiprocessing 包则实现了多进程。而在3.2版本的py...

sshe 2019-07-30 15:24 评论0 收藏0
fetch，终于认识你

摘要：说明一点，下面演示的请求或请求，都是采用百度中查询到的一些接口，可能传递的有些参数这个接口并不会解析，但不会影响这个接口的使用。 fetch和XMLHttpRequest 如果看网上的fetch教程，会首先对比XMLHttpRequest和fetch的优劣，然后引出一堆看了很快会忘记的内容(本人记性不好)。因此，我写一篇关于fetch的文章，为了自己看着方便，毕竟工作中用到的也就是一些...

wzyplus 2019-08-21 16:51 评论0 收藏0