vue之fetch用法

<div id=”box”>
	//当点击按钮的时候，控制台可以打印出URL里面的数据
	<button @click=”handleClick()”>click</button>
</div>
<script>
New Vue({
	el:”#box”,
	data:{},
	methods:{
		handleClick(){
			//fetch方法：用来快速获取json格式数据(详情见底下)
			//Promise对象
			//url：链接地址
			fetch(“url”)
			// 第一个 then 接受到的是请求头的相关信息
			.then(res=>{
				console.log(res)  //拿到的是一个状态码
				//用json格式读出来，也可以改为text，得到的就是一个text字符串，但是要做一个json解析，所以极少用text格式
				return res.json()
			})
			//第二个.then拿到的是从后端请求回来的真正的数据
			//想要获取响应数据，需在第一个then中将响应数据转为json再返回给第二个then，在第二个then中去获取值
			.then(res=>{
				console.log(res)
			})
			// 请求错误时执行
			.catch(err=>{
				console.log(err)
			})
		}
	},
})
</script>
// fetch方法里也可以自主设置请求方法和参数(默认应该是GET)
// fetch(ApiConfig.url.getOpus + `?project_id=${projectId}`, {
// 	headers: {
// 		'content-type': 'application/json',
// 		'Authorization': `Bearer ${token}`
// 	},
// 	method: 'GET', // *GET, POST, PUT, DELETE, etc.
// 	mode: 'cors', // no-cors, cors, *same-origin
// })
// .then(response => response.json())
// .then( .... )
// 来自：https://www.cnblogs.com/zuiniub/p/12674259.html

Fetch有很严格的格式。res.json调用完返回的是一个json格式的promise对象，把这个promise对象return出去，如果成功的话第二个return就会调用，拿到后端的数据，如果失败的话就会进入catch分支。Catch可以省略不用去写

若还有疑问可参考：https://developer.mozilla.org/zh-CN/docs/Web/API/fetch

fetch默认不携带cookie
fetch发送请求默认是不发送cookie的，不管是同域还是跨域；因此对于有些需要权限验证的请求就可能无法获取数据，这时可以配置credentials项，有3个值：

omit: 默认值，忽略cookie的发送
same-origin: 表示cookie只能同域发送，不能跨域发送
include: cookie既可以同域发送，也可以跨域发送

credentials所表达的含义，其实与XHR2中的withCredentials属性类似，表示请求是否携带cookie；具体可以参考阮一峰老师的跨域资源共享 CORS 详解中withCredentials一节的介绍

这样，若要fetch请求携带cookie信息，只需设置一下credentials选项即可，例如

fetch(url, {credentials: ‘include’});

另外补充一点：

fetch默认对服务端通过Set-Cookie头设置的cookie也会忽略，若想选择接受来自服务端的cookie信息，也必须要配置credentials选项；