• Fetch的使用


    Fetch 的出现就是为了解决 XMLHttpRequest(简称XHR) 的问题
    使用 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("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");
    });

    使用 ES6 的 arrow function 后

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


    使用 async/await 来做最终优化:
    try {
    let response = await fetch(url);
    let data = response.json();
    console.log(data);
    } catch(e) {
    console.log("Oops, error", e);
    }
    // 注:这段代码如果想运行,外面需要包一个 async function

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

    Fetch 常见坑

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

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

    IE 使用策略

    所有版本的 IE 均不支持 Fetch,fetch-ie8 会自动使用 XHR 做 polyfill。
    但在跨域时有个问题需要处理。

    IE8, 9 的 XHR 不支持 CORS 跨域,虽然提供 XDomainRequest ,但这个东西就是玩具,
    不支持传 Cookie!如果接口需要权限验证,还是乖乖地使用 jsonp 吧,推荐使用 fetch-jsonp 。
    如果有问题直接提 issue,我会第一时间解决。


    标准 Promise 的不足:

    由于 Fetch 是典型的异步场景,所以大部分遇到的问题不是 Fetch 的,其实是 Promise 的。
    ES6 的 Promise 是基于 Promises/A+ 标准,为了保持 简单简洁 ,只提供极简的几个 API。
    如果你用过一些牛 X 的异步库,如 jQuery(不要笑) 、Q.js 或者 RSVP.js,
    可能会感觉 Promise 功能太少了。


    没有 Deferred:

    Deferred 可以在创建 Promise 时可以减少一层嵌套,跨方法使用时很方便。

    ECMAScript 11 年就有过 Deferred 提案 ,但后来没被接受。其实用 Promise
    不到十行代码就能实现 Deferred: es6-deferred 。
    现在有了 async/await,generator/yield 后,deferred 就没有使用价值了。

  • 相关阅读:
    centos7内存处理
    MySQl分析工具之mysqltuner.pl及mysqlslap
    Mycat-web 安装
    【NOI2001】【Luogu P2704】【POJ1185】炮兵阵地
    【OpenJudge 7834】分成互质组
    Assignment(单调队列)
    OO’s Sequence
    【注意】邻接表
    20190405模拟测试
    【USACO2010open】时间旅行
  • 原文地址:https://www.cnblogs.com/shenjp/p/6401287.html
Copyright © 2020-2023  润新知