你值得关注一下'Fetch'

发表于 |

前言

到目前为止，我们实现异步获取数据都是通过 AJAX ，或者其他封装成 ‘AJAX’ 类的工具函数（此处不讨论 JSONP 。。。）。而 AJAX 的核心就是 XMLHttpRequest ， XMLHttpRequest 的出现，使得 Web 页面开发进入一个新的时代。但是现在针对 XMLHttpRequest 的槽点越来越多。本身的 API 设计不是基于 Promise 的，会导致异步回调深渊（当然， jQuery 已经根据 Promise/A 实现对应的 Promise 方案）。而现在 Fetch 代表着新一代获取资源的技术解决方案(包括跨网络)，尽管它目前还是处于实验中。

Fetch 的介绍

尽管 Fetch 的兼容性在 chrome 42和 Firefox 39 以及 Opera 29上面得到了实现，但是对于 IE，哪怕是 IE11 都没有实现。这似乎使其不能在 pc 端上应用。但是社区已经对 新的 Fetch 标准做了很好的兼容。之前在自己的实际项目中用到了 Fetch ,来自于开源项目 whatwg-fetch。

这里有一篇 Fetch 的文章，介绍原生 Fetch。另外社区也有一片类似的文章 This API is so Fetching!

一个通用的 Fetch 的示例：

1
2
3
4
5
fetch(url, options).then(function(response) {
  // handle HTTP response
}, function(error) {
  // handle network error
})

Fetch 接受两个参数：’url’ , ‘options’。’url’ 是必填项，’options’ 是可选项。看下常规的 GET 、 POST 请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// for get
{
	method: 'GET',
	headers: {
		'Content-Type': 'application/json',
		'Token': token
	},
	credentials: 'same-origin'
}

// for post
{
	method: 'POST',
	headers: {
		'Content-Type': 'application/json',
		'Token': token
	},
	credentials: 'same-origin',
	body: JSON.stringify(formParams)
}

事实上， options的可选项包括

  1. maxRedirects
  2. disableRedirects
  3. credentials
  4. headers
  5. maxResponseLength
  6. method
  7. …(请看API)

Fetch 请求返回的 response 参数是 Response 对象的变量， Response 对象有以下属性

  1. Response.status response的状态码（缺省值：200）
  2. Response.statusText HTTP 状态码消息对应
  3. Response.ok 根据 response 的状态是否在200-299(包括200,299)这个范围内返回一个 Boolean 的值
  4. Response.headers Headers的信息

另外一些常规的方法

  1. text()
  2. json()
  3. blob()
  4. arrayBuffer()
  5. formData()

Fetch 返回的另外一个 function 则是错误信息的回调方法。

最后附上一个完整的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
fetch(`${baseUrl}/process/user/tasks?limit=200`,{
	method: 'GET',
	headers: {
		'Content-Type': 'application/json',
		'Token': token
	},
	credentials: 'same-origin'
})
.then(response => {
	if (response.status >= 200 && response.status < 300) {
		return response.json();
	}
})
.then(json => {
	dispatch({
		type: types.FETCH_UNHANDLE_BUSINESS_DATA,
		data: json.result
	})
})

在使用过 polyfill 版的 Fetch 后，可以对比一下与原生的 Fetch 的API的差别。