异步请求与Fetch

再谈异步请求

• Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

• 在浏览器，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。通过XHRHttpRequest对象及时监听完成事件，执行事件回调函数不会堵塞程序运行。

关于Fetch

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合乎逻辑的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如 CORS和HTTP的扩展。

• 新的Fetch API是XHRHttpRequest异步请求的另一种方案，比起其复杂糅杂的写法，fetch能更简洁的获取到数据。

• XHRHttpRequest使用事件回调函数容易进入回调地狱，而Fetch Api接收url参数返回Promise对象。

• Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。使之今后可以被使用到更多地应用场景中

Fetch的简单使用

let url = 'http://jsonplaceholder.typicode.com/users'
fetch(url).then((res)=>{
  console.log(res)
}).catch((err)=>{})

• 将url传递给fetch时会立即返回一个promise对象此时的状态是pending，当promise被通过时会返回一个response对象。如果我们用习惯了比如jquery封装好的ajax方法，很容易会以为上面的res就是返回的data。

• fetch 只有在遇到网络错误的时候才会 reject 这个 promise，比如用户断网或请求地址的域名无法解析等。只要服务器能够返回 HTTP 响应（甚至只是 CORS preflight 的 OPTIONS 响应），promise 一定是 resolved 的状态。

• fetch返回Promise对象
  

Response简介

• response.type有以下几种

  • basic 标准值，同源响应

  • cors 收到一个有效的跨域请求

  • opaque 跨域请求但服务器没有返回cors响应头

• 但是无效的跨域请求如果像下面这么写，其实根本无法拿到response对象
  

• request.mode用于确定跨域请求是否导致有效的响应

  • same-origin 同源情况下才可请求成功，否则抛出错误

    • 比如在有效的跨域请求设置这个模式会提示
      Fetch API cannot load http://jsonplaceholder.typico... Request mode is "same-origin" but the URL's origin is not same as the request origin file://.

  • cors: 表示同域和带有CORS响应头的跨域下可请求成功.

  • cors-with-forced-preflight: 表示在发出请求前, 将执行preflight检查.

  • no-cors: 用于跨域相应不带cors的情况，此时相应类型为opaque

• 根据上面的错误修改fetch的模式就可以返回response对象了，可以对比发现无效跨域请求并没有返回什么有价值的信息例如url，status，statusText等

  

• reponse.body属于ReadableStream类型

  • 当读取CSV等大文件时通过流来读取，可以选择在读取到要获取的数据后停止流，而不是获取到全部响应数据再去查找。

  • 对于常用返回的几种数据类型，可以使用blob()、text()、formData()、json()，这几种方法都会讲body标记为已读数据，所以想再次获取的时候就会报错

  • 比如下面的代码，真实返回的数据不是json类型的，想利用catch方法去捕获然后再次返回text类型，浏览器时会报TypeError: Already read

  fetch(url).then(function(response) {
    return response.json().catch(function() {
      return response.text();
    });
  });

• 正确的方式是使用clone()方法先对数据进行拷贝，响应数据通过clone并不会被回收，一直留在内存中，直至被读取

  fetch(url).then(function(response) {
    return response.clone().json().catch(function() {
      return response.text();
    });
  });

Request简介

• method：设置请求方法，默认GET方法

• credentials fetch方法默认不发送cookies，如果遇到401 Unauthorized没有权限问题就要看看是否有设置credentials

  • omit: 从不发送cookies.

  • same-origin: 只有当URL与响应脚本同源才发送cookies.

  • include: 总是发送cookies, 即使来自跨域的请求

  默认情况下请求不带coookie

• cache 设置缓存，跟XHR对比在请求时就可以控制缓存，虽然这是有争议的，因为这暴露了用户历史记录

  • default

    • 如果是最新的资源，则返回缓存

    • 如果资源已过期则向服务器发出条件请求；如果服务器指示资源没有改变则返回缓存；否则从服务器中下载，并更新缓存。

    • 如果没有找到缓存则发出正常情求，但不缓存资源。

  • no-store 直接从服务器获取资源并且不会将资源缓存

  • reload 直接从服务器获取资源，并且缓存资源

  • no-cache

    • 如果资源有效或者过期，浏览器会发出一个条件请求，如果服务器返回没有改变，则返回缓存，否则，重新获取资源并更新缓存

    • 如果不存在资源则浏览器发出正常请求下载并更新缓存

  • force-cache

    • 如果有缓存直接返回缓存，否则下载更新资源

  • only-if-cached

    • 如果有缓存直接返回缓存，否则浏览器返回错误

XHR和Fetch其他的对比

• fetch没有xhr中的abort()方法来中断请求

• fetch没有progress进度事件监听数据，但是你可以通过获取content-length计算进度

• XHR open方法有最后一个参数设为false的时候是同步请求，fetch没有提供同步请求的方法，但同步请求并不常用

• fetch 并没有像XHR的timeout属性来设置延时

Fetch实践体验

• 习惯了像是vue-resource等插件封装好的get,post方法，在使用fetch的时候很容易会被它看似简洁的api给迷惑

1. fetch兼容性问题

   • 我们需要引入fetch 的polyfill，扒开源码我们可以发现实现原理还是建立在XMLHttpRequest上的，但是由于polyfill要实现fetch如Blob类文件对象等，在safari和ie上还是有兼容性问题的

2. 参数传递问题

   • 在get请求方式中，我们还是只能像xhr那样以拼接url字符串的方式来传递，这与fetch看起来简洁的api有点不符。

     • 虽然原生的URLSearchParams 接口定义了用来处理 URL 参数串的方法。但是这个api目前兼容性也是不怎么好

     var paramsString = "q=URLUtils.searchParams&topic=api"
     var searchParams = new URLSearchParams(paramsString);
     searchParams.append("topic", "webdev");
     searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"

   • 在post请求中，数据要以body字段来传递参数，也就是说我们要常用的json格式要经过下面格式的转换，就像XMLHttpRequest那样

     body 可以是以下任何一种类型的实例：

     ArrayBuffer
     ArrayBufferView (Uint8Array and friends)
     Blob/File
     string
     URLSearchParams
     FormData
     

3. 响应数据的问题

   • 在回调函数中我们首先接受到的是response对象，由于body是ReadableStream类型，几乎很难预先判断数据是什么类型，也就很难判断是到底用text()、json()方法解析数据

   • response对象有一个bodyUsed的属性初始是false，调用text()、json()等方法会读取Response对象并且将它设置为已读，这时bodyUsed为true

     bodyUsed初始值为false

- 解决办法有两种但都有一定的不足
     1.是通过clone加catch方式找到正确的输出方式，但是要注意调用方法的顺序，不然一个json有可能最后还是以text的方式解析，还要注意的是最后要将response的数据回收或者读取，因为clone方法的读取并不影响原来的reponse对象

fetch(url).then(function(response) {
      return response.json().catch(function() {
         return response.text();
      });
});

  2.是通过判断content-type的方式，如果已知的返回格式不多的情况下用还是不错的选择

fetch(url).then(function(response) {
      if (response.headers.get('Content-Type') === 'application/json') {
        return response.json();
      }
      return response.text();
});

小结

• 基于promise的fecth方法可以让我们远离回调地狱而不需要其他的封装。

• fetch 将 response.body 设计成 ReadableStream 其实是非常有前瞻性的，这种设计让你在请求大体积文件时变得非常有用。
  

参考资料：https://jakearchibald.com/201...