关闭

fetch 实现jsonp的办法以及fetch-jsonp的使用

来源:网络 文章列表 2022-01-26 8
Fetch API由于是基于Promise封装的 因此解决了Ajax的回调地狱问题 提高了代码的可读性和可维护性。fetch不接受跨域cookie 默认也不会发送cookie

一、什么是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)
})

如您看完博文,仍不会的话,本站长提供付费技术支持服务,价格不高! 立即咨询

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论