ES6的fetch API的使用和第三方fetch-jsonp的使用

还记得去年这个时候接手学长留下来的微信小程序项目 当时看到学长用的是fetch获取数据 还以为是微信提供的API…

一、什么是fetch

Fetch API提供了一个JavaScript接口 用于访问和操纵 HTTP 管道的一些具体部分 例如请求和响应
它还提供了一个全局fetch()方法 该方法提供了一种简单 合理的方式来跨网络异步获取资源

因此 简单来说就是Ajax的替代品 也可以用于获取数据
Fetch API由于是基于Promise封装的 因此解决了Ajax的回调地狱问题 提高了代码的可读性和可维护性

需要注意的是：

fetch不接受跨域cookie 默认也不会发送cookie
且fetch默认不支持IE(但可使用其它插件使其支持)

二、fetch的使用

fetch的使用很简单 直接调用fetch()方法即可

需要注意的是：当使用fetch API获取数据的时候 第一个then是获取不到数据的
第一个then获取的是response对象 这只是一个Http响应 并不是真的JSON数据
可以调用response.json()得到一个新的promise 此时获取的才是数据

fetch('http://example.com/api/test')
.then(response  => {
	return response.json();
})
.then(data => {
	console.log(data);
});

发送POST请求也很方便：
(有很多配置项可供配置)

fetch('http://example.com/api/test', {
	body: JSON.stringify({name:"Mike"}), // JSON格式的请求数据
	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 Test',
		'content-type': 'application/json'
	},
	method: 'POST', // GET, POST, PUT, DELETE之类的请求方式
	mode: 'cors', // no-cors, cors, same-origin 跨域策略
	redirect: 'follow', // manual, follow, error 重定向
	referrer: 'no-referrer', // client, no-referrer 来源引用
	})
	.then(response  => response.json())
	.then(data => {
		console.log(data);
	});

三、fetch-jsonp的使用 / 解决跨域问题

默认的window.fetch会受到跨域限制 因此当fetch遇到跨域问题会比较麻烦
为此 有很多第三方的解决方案 fetch-jsonp就是其中之一
fetch-jsonp可以让fetch以JSONP的形式发送跨域请求
且使用方便 和浏览器内置的fetch完全兼容 使用方式和fetch基本别无二致

注：fetch-jsonp只支持GET请求

下载：

(若下载速度慢 也可使用cnpm)

npm install fetch-jsonp -S

导入：

import fetchJSONP from 'fetch-jsonp'

使用：

fetchJSONP("https://example.com/api/test")
.then(response => response.json())
.then( data => {
	console.log(data)
})

---