fetch

• fetch是一种HTTP数据请求的方式，是ajax的一种替代方案。fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。

• Fetch会返回Promise

• fetch(url, options).then()

fetch

fetch(url, options).then()


/*
	Fetch API 基本用法
	fetch(url).then()
	第一个参数请求的路径 Fetch会返回Promise 所以我们可以使用then 拿到请求成功的结果
*/
fetch('http://localhost:3000/fdata').then(function(data){
	// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
	return data.text();
}).then(function(data){
	// 在这个then里面我们能拿到最终的数据
	console.log(data);
})

// 1.1 GET参数传递 ‐ 传统URL 通过url ？ 的形式传参
fetch('http://localhost:3000/books?id=123', {
	# get 请求可以省略不写 默认的是GET
	method: 'get'
})
.then(function(data) {
	// 它返回一个Promise实例对象，用于获取后台返回的数据
	return data.text();
}).then(function(data) {
	// 在这个then里面我们能拿到最终的数据
	console.log(data)
});

// 1.2 GET参数传递 restful形式的URL 通过/ 的形式传递参数 即 id = 456 和id后台的配置有关
fetch('http://localhost:3000/books/456', {
	// get 请求可以省略不写 默认的是GET
	method: 'get'
})
.then(function(data) {
	return data.text();
}).then(function(data) {
	console.log(data)
});

// 2.1 DELETE请求方式参数传递 删除id 是 id=789
fetch('http://localhost:3000/books/789', {
	method: 'delete'
})
.then(function(data) {
	return data.text();
}).then(function(data) {
	console.log(data)
});

// 3 POST请求传参
fetch('http://localhost:3000/books', {
	method: 'post',
	// 3.1 传递数据
	body: 'uname=lisi&pwd=123',
	// 3.2 设置请求头
	headers: {
		'Content‐Type': 'application/x‐www‐form‐urlencoded'
	}
})
.then(function(data) {
	return data.text();
}).then(function(data) {
	console.log(data)
});

// POST请求传参
fetch('http://localhost:3000/books', {
	method: 'post',
	body: JSON.stringify({
		uname: '张三',
		pwd: '456'
	}),
	headers: {
		'Content‐Type': 'application/json'
	}
})
.then(function(data) {
	return data.text();
}).then(function(data) {
	console.log(data)
});

// PUT请求传参 修改id 是 123 的
fetch('http://localhost:3000/books/123', {
	method: 'put',
	body: JSON.stringify({
		uname: '张三',
		pwd: '789'
	}),
	headers: {
		'Content‐Type': 'application/json'
	}
})
.then(function(data) {
	return data.text();
}).then(function(data) {
	console.log(data)
});

/*
Fetch响应结果的数据格式
*/
fetch('http://localhost:3000/json').then(function(data){
	// return data.json(); // 将获取到的数据使用 json 转换对象
	return data.text(); // // 将获取到的数据 转换成字符串
}).then(function(data){
	// console.log(data.uname)
	// console.log(typeof data)
	var obj = JSON.parse(data);
	console.log(obj.uname,obj.age,obj.gender)
})