初识fetch

rickchen 发布于2019-08-20 14:49 / 413人阅读

摘要：后面可以跟对象，表示等待才会继续下去执行，如果被或抛出异常则会被外面的捕获。没有获取状态方法，标准没有提供获取当前状态或者的方法。只允许外部传入成功或失败后的回调。这种进度通知的功能还没有用过，暂不知道如何替代。

始终不是很懂fetch的作用，然后查了很多资料，看了一篇不错的文章，结合自己之前学习的Promise，然后做一篇文章，稍微记录一下。
传统 Ajax 已死，Fetch 永生

虽然标题感觉比较大，然后指出了XMLHttpRequest的局限性。XMLHttpRequest是一个设计粗糙的API，不符合关注分离的原则，配置和调用方式也很混乱，而且基于事件的异步模式没有Promise友好。虽然我也没有觉得这样的理由足够强大到可以把Ajax逼死，但是毕竟流行是一种趋势。随着ES6时代的全面爆发，相信fetch的时代也将不会很远了。

现在来比较为了发起一个异步请求，两种写法的区别。

fetch的好处

用XHR发送一个json请求一般是这样的：

    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "json";
    xhr.onload = function(){
        console.log(xhr.response);
    };
    xhr.onerror = function(){
        console.log("error")
    }
    xhr.send();

用fetch实现的方式：

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

使用ES6的箭头函数后

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

也可以用async/await的方式

    try{
        let response = await fetch(url);
        let data = await response.json();
        console.log(data);
    } catch(e){
        console.log("error")
    }

用了await后，写异步代码感觉像同步代码一样爽。await后面可以跟Promise对象，表示等待Promise resolve()才会继续下去执行，如果Promise被reject()或抛出异常则会被外面的try...catch捕获。

fetch的主要优点是

语法简洁，更加语义化

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

同构方便

但是也有它的不足

fetch请求默认是不带cookie的，需要设置fetch(url, {credentials: "include"})

服务器返回400,500这样的错误码时不会reject,只有网络错误这些导致请求不能完成时，fetch才会被reject.

另外fetch的不足来自Promise 没有 Deferred

Deferred 可以在创建 Promise 时可以减少一层嵌套，还有就是跨方法使用时很方便。
ECMAScript 11 年就有过 Deferred 提案，但后来没被接受。其实用 Promise 不到十行代码就能实现 Deferred：es6-deferred。现在有了 async/await，generator/yield 后，deferred 就没有使用价值了。

没有获取状态方法：isRejected，isResolved

标准 Promise 没有提供获取当前状态 rejected 或者 resolved 的方法。只允许外部传入成功或失败后的回调。我认为这其实是优点，这是一种声明式的接口，更简单。

缺少其它一些方法：always，progress，finally

always 可以通过在 then 和 catch 里重复调用方法实现。finally 也类似。progress 这种进度通知的功能还没有用过，暂不知道如何替代。

不能中断，没有 abort、terminate、onTimeout 或 cancel 方法

Fetch 和 Promise 一样，一旦发起，不能中断，也不会超时，只能等待被 resolve 或 reject。

云服务器混合云 docker初识初识关系数据库 Fetch fetch webrtc

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

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

fetch 从初识到应用

摘要：是基于进行实现的对应兼容包兼容服务的兼容中的这个不用解释了吧转换为，要和对象中的保持一致，调用对应的返回一个对象以上代码的解释该值代表中是否携带到服务器端默认值，不携带到服务器允许从当前域下携带到服务器端，相对应服务器端的 fetch是基于promise进行实现的对应npm兼容包： node-fetch //兼容node服务的fetch ...

Amio 2019-08-20 18:11 评论0 收藏0
基于 Generator 和 Iterator 的惰性列表

摘要：在某些不定长度的列表操作上，惰性列表会让代码和结构更灵活。方法本身是立即执行的，如果满足条件，这里的方法会执行两次。结语和是带给我们的非常强大的语言层面的能力，它本身的求值可以看作是惰性的。初识 Lazy List 如果有了解过 Haskell 的朋友，对下面的这些表达一定不陌生 repeat 1 -- => [1, 1, 1, 1, 1,...] cycle abc -- => a...

superw 2019-08-23 12:09 评论0 收藏0
初识React(9)：dva简介

摘要：初始值，优先级低于传给的，如下此时，在后为以格式定义。用于处理同步操作，唯一可以修改的地方。由触发，可以触发，可以和服务器交互，可以获取全局的数据等等。取消注册，清理和。如果没有返回函数，使用会给予警告注册路由表。前言 dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以...

keke 2019-08-23 14:08 评论0 收藏0
用高阶函数实现地址的延迟搜索

摘要：原文高阶函数在中高阶函数实际上就是控制函数的函数，有别于普通函数传递变量，高阶函数传递的是函数，并且输出函数这对于初学者来说足够烧脑，也足够惊艳。初识时常常会被被震撼了，原来函数还可以这么用这是设计模式与开发实践的单例模式的一个高阶函数。原文高阶函数在javascript中高阶函数实际上就是控制函数的函数，有别于普通函数传递变量，高阶函数传递的是函数，并且输出函数这对于js初学...

Nosee 2019-08-21 11:34 评论0 收藏0
fetch:不一样的xhr请求

摘要：无论请求成功与否，它都返回一个对象，对应请求的。可选一个配置项对象，包括所有对请求的设置。注意或方法的请求不能包含信息。只读请求所关联的对象。使用一个对象来读取流中的数据，并将状态改为已使用。 fetch初识此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改...

cheng10 2019-08-20 18:25 评论0 收藏0