Fetch学习笔记

前言: 前几天面试问到 Ajax和Fetch的区别，因为以前也用过这两个东西，所以也没难倒我，现在回头整理一遍。

fetch

与XMLHttpRequest(XHR)类似，fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise，因此是一种简洁明了的API，比XMLHttpRequest更加简单易用。

如果还不了解Promise，可以移步👉浅谈Promise这篇博客

比较XMLHttpRequest（传统Ajax）

创建步骤：

• 创建XMLHttpRequest对象，也就是创建一个异步调用对象
• 创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
• 发送HTTP请求
• 处理响应，获取异步调用返回的数据

可以发现，主要的不同点在于：传统Ajax使用事件处理器，而不是Promise对象，并且请求的发起完全依赖于xhr对象所提供的方法。

想详细了解 Ajax的封装可以查看我上一篇博客，一步步教你 Ajax的封装👉Ajax学习笔记

fetch语法

fetch(url)
	.then(function(response) {
		return response.json();
	})
	.then(function(data) {
		console.log(data);
	})
	.catch(function(e) {
		console.log("Oops, error");
	});

使用 ES6 的 箭头函数

fetch(url)
	.then(response => response.json())
	.then(data => console.log(data))
	.catch(e => console.log("Oops, error", e))

使用 async/await 来做最终优化：

(async function () {
	try {
		let response = await fetch(url);
		let data = response.json();
		console.log(data);
	} catch(e) {
		console.log("Oops, error", e);
	}
})();

使用 await 后，写异步代码就像写同步代码一样爽。await 后面可以跟 Promise 对象，表示等待 Promise resolve() 才会继续向下执行，如果 Promise 被 reject() 或抛出异常则会被外面的 try…catch 捕获。

如果还不了解async/await，可以移步👉es6Async这篇博客

GET请求

fetch(url, {
    method: "GET", //默认
    headers:{
    	"Accept": "application/json, text/plain, */*"
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

POST请求

fetch(url, {
    method: "POST",
    headers: {
    	"Accept": "application/json, text/plain, */*",
        "Content-type":"application:/x-www-form-urlencoded; charset=UTF-8"
    },
    body: "name=hzzly&age=22"
})
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

使用Fetch请求发送凭证

要使用Fetch发送带有诸如cookie之类的凭证的请求。你可以在选项对象中将credentials属性值设置为“include”：

fetch(url,{
	credentials: "include"
})

封装POST请求

//将对象拼接成 name=hzzly&age=22 的字符串形式
function params(obj) {
	let result = ''
	for(let item in obj) {
		result += `&${item}=${obj[item]}`
	}
	if(result) {
		result = result.slice(1)
	}
	return result
}

function post(url, paramsObj) {
	let result = fetch(url, {
		methods: 'POST',
		credentials: "include"
		headers: {
	    	"Accept": "application/json, text/plain, */*",
	        "Content-type":"application:/x-www-form-urlencoded; charset=UTF-8"
	    },
	    body: params(paramsObj)
	})
	return result
}

let obj = {
	name: 'hzzly',
	age: 22
}
post(url, obj)
	.then(response => response.json())
	.then(data => console.log(data))
	.catch(e => console.log("Oops, error", e))